Cara memasang Tombol Demo dan Download di Blogspot
Pada kesempatan ini saya akan membagikan bagaimana cara memasang tombol demo dan download pada blogger atau blogspot. Banyak cara memasang tombol download di blogger dan salah satunya akan saya bagikan pada kesempatan ini.
Pada kesempatan ini saja bagikan seperti tombol demo dan download dibawah ini.
Jika anda berminat menggunakannya anda bisa lanjutkan membaca dan mengikuti tips berikut ini sampai dengan selesai.
1. Silahkan login di blog anda dan silahkan pilih template dan edit HTML. Seperti gambar dibawah ini.
2. Cari kode ]]></b:skin> gunakan Contol F lebih memudahkan dan pastekan kode dibawah ini diatasnya.
/* -- kangtora.blogspot.com --*/
.button{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:0;padding:0}
.demo {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #E55E48; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px; }
.download {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #5FAAE3; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px;}
.demo:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }
.download:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }
3. Simpan.
4. Buat entri baru dan masukkan kode dibawah ini di entri baru anda dalam keadaan tulisan HTML
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://kangtora.blogspotcom" target="_blank">Demo</a></li>
<li><a class="download" href="http://kangtora.blogspotcom" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>
Ket : Ganti warna merah dengan yang anda inginkan.
5. Publikasikan tulisan anda dan lihat hasilnya.
5. Publikasikan tulisan anda dan lihat hasilnya.
Cukup mudah bukan cara membuat tombol demo dan download di blogger atau blogspot. Pada kesempatan lain akan saya bahas lagi bentuk tombol demo dan download lainya.
Sekian dan terimakasih.