Cara membuat tombol demo dan download seperti di pakai dengan blog terkenal, disini saya akan membagikan beberapa tombol demo dan download seperti blog terkenal yakni Arlina Dzgn, Kompi Ajaib, dan Dunia Blanter. Dengan saya membagikan tutorial ini, ini bisa menambah pengetahuan dan koleksi pelajaran di bilang disain blog. Kegunaan tombol demo dan download ini adalah untuk memperbagus tampilan untuk di pergunakan membungkus link atau url yang kita sudah sediakan di dalam tombol tersebut.
Membuat Tombol Demo dan Download di Blog
Langkah pertama :
Login ke Blogger > Tema > Edit HTML. Lalu Anda salah satu CSS di bawah ini, dan Anda cari kode
]]></b:skin> atau </style> dan Anda Pastekannya di atas kode tersebut.Cara Penggunaannya
Buat Entri Baru > Pilih Mode HTML (samping mode Compose). Lalu ikuti langkah-langkah di bawah ini.
Tombol demo dan download menurut saya sangat berguna, tidak hanya untuk memperbagus tampilan blog, kegunaan tombol tersebut untuk pengunjung atau pengguna sedikit melihat untuk Anda sedang membagikan suatu template atau menuju ke suatu halaman.
Saya sendiri memakai tombol demo dan download ini, yakni saya memakai tombol atau CSS buatan blog Arlina Design, karna menurut saya tampilannya bagus dengan yang lainnya. Berikut CSS tombol download dan demo yang bisa saya bagikan secara gratis untuk Anda.
Tombol Demo & Download Arlina Design Punya
Ini merupakan tombol demo & download milik Arlina Dzgn, ini juga yang di pakai dengan blog ini, berikut CSS nya yang bisa Anda pakai di Blog Anda.
#wrap {
margin: 20px auto;
text-align: center;
}
.btn {
display: inline-block;
position: relative;
font-weight: 700;
background: #3cc091;
padding: 9px 18px;
margin: 0 3px;
border-radius: 3px;
opacity: 1;
border: 0;
text-transform: uppercase;
transition: all .3s ease-out;
}
.btn:hover, .btn:active {
background: #374760;
}
a.btn {
color: rgba(255,255,255,1);
}Silakan masukkan kode ini untuk memang tombol download ala Arlina Dzgn
<div id="wrap">
<a class="btn" href="Link demo sobat" rel="”nofollow”" target="_blank">Result <i class="fa fa-paper-plane"></i></a></div>
<a class="btn" href="Link demo sobat" rel="”nofollow”" target="_blank">Download <i class="fa fa-download"></i></a>Tombol Demo & Download Kompi Ajaib Punya
Tombol ini kelihatannya saja yang simple, saya yakin Anda ingin memakai CSS tombol demo & download milik Kompi Ajaib ini.
.btn{padding:6px 12px;margin-bottom:5px;font-size:14px;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:4px}
.btn-primary{color:#fff;background-color:#337ab7;border-color:#2e6da4}
.btn-primary:focus{color:#fff;background-color:#286090;border-color:#122b40}
.btn-primary:active,.btn-primary:hover{color:#fff;background-color:#286090;border-color:#204d74}
.btn-lg{padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}Gunakan kode berikut ini untuk menggunakan tombol Kompi Ajaib
<a class="btn btn-primary btn-lg" href="Link demo sobat" rel="”nofollow”" target="_blank">Result <i class="fa fa-paper-plane"></i></a></div>
<a class="btn btn-primary btn-lg" href="Link demo sobat" rel="”nofollow”" target="_blank">Download <i class="fa fa-download"></i></a>Tombol Demo & Download Dunia Blanter
Tombol demo & download milik Dunia Blanter juga tidak berbeda dengan tombol Kompi Ajaib, hanya saja berbeda warna. Tapi menurut saya tombol ini lebih bagus dari tombol Kompi Ajaib.
.buttonx{display:inline-flex;border-radius:4px;cursor:pointer;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);font-size:13px;font-weight:700;text-transform:uppercase;color:#FFF!important;background-color:#22a1c4!important;margin:5px;padding:8px 20px;text-shadow:none;transition:all 1s}
.buttonx:hover,.buttonx:hover,.buttonx.link:hover{background:#1D7891!important;box-shadow:0 2px 10px 0 rgba(0,0,0,0.16), 0 2px 15px 0 rgba(0,0,0,0.12)}
.buttonx:focus{background:#1D7891}.buttona{float:right;margin:-5px;padding:8px;font-size:12px;display:inline-flex;cursor:pointer;font-family:'Open Sans';font-weight:700;text-transform:uppercase;color:#fff!important;background-color:#444!important}
.buttona:hover,.buttona:hover,.buttona.link:hover{background:#07ACEC!important;color:#fff}Silakan masukkan kode ini untuk menggunakan tombol Dunia Blanter
<a class="buttonx" href="Link demo sobat" rel="”nofollow”" target="_blank">Result <i class="fa fa-paper-plane"></i></a></div>
<a class="buttonx" href="Link demo sobat" rel="”nofollow”" target="_blank">Download <i class="fa fa-download"></i></a>Demikian tutorial yang bisa saya berikan, semoga bermanfaat, jangan lupa like dan share untuk berkembangnya blog ini menjadi lebih baik.
Thanks to :
- ID Dzgn
0 Comments