Membuat Tombol Download dan Demo

Pasti kita sering melihat tombol di atas kan? Biasanya tombol tersebut digunakan untuk melihat demo pada sebuah blog. Nah, kali ini saya akan memposting tentang Membuat Tombol Download dan Demo Blog. Simak postingan berikut ini.

Tombol Download dan Demo blog pada setiap template bisa berbeda beda, bahkan ada juga yang belum ada. Nah, kali ini saya akan memberikan Cara Membuat Tombol Download dan Demo Blog seperti di atas tadi. Berikut cara untuk Membuat Tombol Download dan Demo Blog.

Pertama, Masukkan kode berikut berikut di atas ]]></b:skin>


/* -- 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 }

Lalu, untuk memasangnya, masukkan kode ini dalam postingan HTML

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

Berikut postingan Membuat Tombol Download dan Demo Blog. Semoga anda berhasil dalam memasangnya, Jika ada kesalahan dalam script atau apapun yang ada di dalamnya silahkan komentar untuk segera di perbaiki.

Bagikan Artikel ini