Tutorial membuat Tombol Demo dan Download di Blog

Find4something.blogspot.com | Tutorial membuat Tombol Demo dan Download di Blog - Sobat find4something pernahkah sobat melihat Tombol Deme dan Download dalam blog? nah biasanya si Tombol Demo dan download ini terdapat dalam postingan template atau sesuatu yang memerlukan demo atau contoh namun umumnya yang menggunakan tombol ini adalah blog yang menyediakan template gratis atau premium, sobat tau cara membuat tombol Demo dan Download ini? pass banget kalo ada yang belum tau,, ahahha,, banyak blogger yang sudah share cara membuat tombol Demo dan download namun kali tombol demo ala find4something hikhikhikhik. langsung aja Tutorial membuat Tombol Demo dan Download di blog

Caranya :
Masukan code dibawah ini sebelum ]]></b:skin>

/* -- www.find4something
.blogspot.com 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 }

Setelah itu buat postingan dan isi kode dibawah ini (HTML)

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

Jika ada masalah, hubungi saya di :

• Twitter : @bryan_kapahang
• Facebook : bryan kapahang
• Group : Request Software Gratis

Semoga Bermanfaat :) Bryan Kapahang