Cara Membuat Download dan Demo Button Keren di Blog

Pada posting kali ini, saya akan memberikan tutorial membuat download button dan demo button di blog. Pada artikel sebelumnya, saya juga membagikan tutorial dengan judul dan kategori yang sama, yaitu Cara Membuat Download Button Keren di Blog. Tapi, pada tutorial kali ini saya akan membagikan cara membuat demo button juga. cara nya ga jauh beda dengan membuat download button pada umumnya, dengan memasukan kode CSS ke template dan kode HTML ke dalam postingan. Terus, Bagaimana cara membuat download dan demo button yang keren di blog? ini dia caranya....

• Pertama, login ke blogger, kemudian pada dashboard pilih Template > Edit HTML.
• Cari kode ]]></b:skin> ,  bisa menggunakan CTRL+F agar lebih cepat.
• Copy kode CSS berikut, dan letakan dibawah kode ]]></b:skin>

.button {
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
background:url(&quot;http://www.zurb.com/images/overlay-button.png&quot;) repeat-x scroll 0 0 #222222;
border-bottom:1px solid rgba(0, 0, 0, 0.25);
color:#FFFFFF !important;
cursor:pointer;
font-weight:bold;
line-height:1;
overflow:visible;
font-size:17px;
padding:8px 19px 9px;
position:relative;
text-decoration:none; 
text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);
width:auto;
}
.demobutton {
background-color:#999999;
text-align:center;
width:150px;
}
.demobutton:hover {
background-color:#00A0EE;
}
.downloadbutton {
background-color:#91BD09; 
text-align:center;
width:150px;
}
.downloadbutton:hover {
background-color:#00AC00;
}
.button:hover {
-moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
-webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
}

• Save Template.
• Buat Posting baru, Pada menu compose dan HTML, pilih HTML, dan copy kode berikut.
  
  
  
  Kode HTML untuk DEMO

<a class="demobutton button" href="LINK DEMO KALIAN" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Live Demo</span></a> 

Kode HTML untuk Download

<a class="button downloadbutton" href="LINK DOWNLOAD KALIAN" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Download</span></a>

Catatan :  Ganti teks yang berwarna merah dengan link download atau link demo kalian.
kode  style="float: left;" adalah letak dari tombol nya, Left berarti kiri, kalian bisa mengganti nya dengan Center atau Right.

Sekian tutorial nya, semoga bermanfaat.....