Cara Membuat Tombol Download Dan Demo By Community Bogorizyor

Cara Membuat Tombol Demo dan Download ala Community Bogorizyor - Ya, Malam ini saya akan berbagi Cara Membuat Tombol Demo dan Download ala Community Bogorizyor. Sekarang sudah banyak macam-macam Tombol untuk Demo ataupun Download dimana-mana, dan sekarang saya akan berbagi Tombol Demo dan Download ala Kang Ismet dengan warna dan efek Hover yang halus, dan lumayan bagus untuk dipandang.Untuk Demo bisa lihat dibawah ini.

• Demo
• Download

Untuk cara penerapannya sangat mudah, berikut ini cara untuk menerapkannya.
Masuk ke www.blogger.com
Buka Template dan Klik Edit HTML
Letakan kode dibawah ini diatas kode ]]></b:skin>

 /* -- Community Bogorizyor --*/
 .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}

Kemudian Simpan Template / Save Template. Selesai.
Untuk menggunakan di postingan blog anda, silahkan copy code ini di HTML.

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