CARA MEMBUAT TOMBOL DEMO DAN DOWNLOAD DI BLOG

Selamat malam, kali ini saya share tentang Cara Membuat Tombol Demo dan Download di Blog, cara ini sebenarnya mudah jika Anda memahami fungsi dari kode-kode script blogger. Contoh gambar demo dan download, kira-kira seperti ini contohnya..

langsung aja bagaimana cara membuat tombol demo dan download di blog, berikutlah tutorialnya :

1. Buka blog Anda
2. Pilih Template -> Edit HTML
3. Copy kode di bawah ini tepat di atas kode ]]></b:skin>

/* -- Kang Ismet Button --*/
.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 }

4. Klik Simpan Template
5. Untuk menggunakannya Anda gunakan kode di bawah ini saat memposting (gunakan mode HTML bukan Compose)

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="Link Demo" target="_blank">Demo</a></li>
<li><a class="download" href="Link Download" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>

6. Selanjutnya Anda Klik Publikasikan

Keterangan kode :
Anda ganti Link Demo dan Link Download dengan link demo dan link download Anda, jika sudah siap tampilannya seperti demo yang saya buat ini,

• Demo
• Download

Demikian postingan Cara Membuat Tombol Demo dan Download di Blog, jika ada yang kurang jelas silahkan Anda bertanya melalui kotak komentar di bawah ini, selamat mencoba...!!