Cara Membuat Tombol Demo dan Download Keren Pada Blog

Pada kesempatan kali ini, saya bakal ngasik tau kalian tutorial pemasangan tombol Demo dan Download. Jadi mungkin dari kalian blognya berisi tentang software ataupun tutorial blogging, tidak lain pasti kalian akan menggunakan tombol seperti ini, selain mempercantik blog anda, pengunjung juga tidak bingung ketika ingin mendownload ataupun melihat demo pada blog anda. Seperti yang dilansir pada Blog Kang Ismet, tombol demo dan download ini menggunakan fitur CSS jadi akan tersesuaikan pada blog kalian masing-masing tampilannya.

Example :

• Demo
• Download

Tutorial Pemasangan :
1. Login pada akun blogger masing-masing
2. Masuk pada bagian Template dan klik Edit HTML
3. Paste kode berikut diatas kode ]]></b:skin>

/* -- Button DEMO and DOWNLOAD--*/
.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. Jika sudah, Simpan
5. Jika kalian ingin menampilkannya pada postingan kalian, gunakan mode HTML dan paste kode berikut

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://gunkdephoenix.blogspot.com/" target="_blank">Demo</a></li>
<li><a class="download" href="http://gunkdephoenix.blogspot.com/" target="_blank">Download</a></li>
</ul>
</div>

Oke sobat, sudah jelas bukan? Jika mengalami kesulitan isi kolom komentar dibawah ini
Selamat Mencoba

Thanks To : http://blog.kangismet.net/

Tweet