Cara Membuat Tombol Demo dan Download Bottom Keren dan menarik pada Posting Blog. Cara membuatnya mudah dah singkat nggak pakai ribet. Seperti yang banyak kita jumpai didalam blog khususnya kebanyakan blog yang menyediakan template gratis. Banyak yang menggunakan cara ini untuk memperindah tampilan blognya.
Ada banyak cara dan tampilan pastinya untuk Tombol Demo dan Tombol Download ini. Dan kali ini kita akan mencoba membuatnya semenarik mungkin. Langsung saja kita lihat tutorial berikut :
1. Seperti biasa, kita Log in dulu ke blog masing-masing
2. Masuk Dasboard pilih Template >> Edit Html
3. Cari kode berikut (gunakan Ctrl+F untuk mencarinya)
]]></b:skin>
4. Copas kode dibawah ini dan letakkan diatas kode ]]></b:skin>
0. [ Blok satu kali klik ].malesdesign-demo{display:inline-flex;cursor:pointer;Keterangan :
font-size:13px ;font-weight:bold;
text-transform:uppercase;box-shadow:0 1px 2px rgba(0,0,0,.2);
color:#FFF !important;border:2px solid #FFF!important;
background-color:#083d64!important;background:0;
margin:5px 0;padding:8px 25px;text
shadow:none!important;transition:all 0s!important}
.malesdesign-demo:hover{background-color:#0070b0 !important;
background:0} .malesdesign-demo:active{position:relative;top:1px}
- font-size:13px adalah ukuran tulisan
- color:#FFF adalah warna tulisan
- background-color:#083d64 adalah warna background dasar
- background-color:#0070b0 adalah warna background ketika dikursor
Sampai disini kita sudah berhasil memasang kode CSS nya yang selanjutnya tinggal kita pasang kode pemanggilnya.
1. Buat Entri Baru / Posting
2. Pindah Mode Compose ke Mode Html
3. Copas kode skrip berikut :
0. [ Blok satu kali klik ]
<div style="margin: 10px 0; text-align: center;">4. Pindah lagi dari Mode Html ke Mode Compose
<a class="malesdesign-demo" href="URL TUJUAN" target="_blank"> DEMO </a>
<a class="malesdesign-demo" href="URL TUJUAN" target="_blank"> DOWNLOAD </a>
</div>
Keterangan :
Ganti URL TUJUAN dengan link Url yang diinginkan.
Tombol akan tampak seperti pada gambar diatas ketika posting sudah dipublikasikan.Sebagai contoh :
Sebelum di Publikasikan
Sesudah di Publikasikan
Sebenarnya masih banyak sekali contoh serta tampilan mengenai tombol tersebut, namun untuk kali ini cukup itu dulu, dilain waktu kita akan coba dengan tampilan lainnya yang lebih menarik lagi. Selesai sudah tutorial mengenai Cara Membuat Tombol Demo dan Download Bottom kali ini. Selamat mencoba ^_^
No SPAM...!!!