Cara memasang tombol DEMO dan Download diblog

Pagi sobat blogger ? pada kesematan kali ini saya akan memposting cara memasang tombol Demo dan Download di blog, setelah sebelumnya saya sudah memberi tutorial kumpulan Syntax Highlighter buat blog. Tombol demo sudah disertai juga dengan font awesome untuk mempercantiknya.

Ok sobat tanpa panjang lebar mari simak tutorialnya:

1. sobat masuk blog

2. masuk dasboard klik template>> Edit HMTL

3. cari kode ]]></b:skin>

dan simpan kode CSS berikut diatasnya

.buttonx{
float:left;
list-style:none;
text-align:center;
width: 100%;
margin:5px 0;
padding:0;
font-size:14px;
clear:both;
}
 
.buttonx ul {
margin:0;padding:0
}
 
.buttonx li{
display:inline;
margin:0;
padding:0
}
 
.demo {
border: none;border-radius:2px;
padding: 8px 19px !important;
background: #E55E48;
color: #fff !important;
text-align: center;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
transition: background-color .4s ease-out 0s;
}
 
.download {
border: none;border-radius:2px;
padding: 8px 19px !important;
background: #2ecc71;
color: #fff !important;
text-align: center;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
transition: background-color .4s ease-out 0s;
}
 
.demo:hover {
background: #454242;
text-decoration:none
}
 
.download:hover {
background: #454242;
text-decoration:none
}
 
.download:before {
content : "\f019";
font-family : FontAwesome;
font-weight : normal;
padding :11px 11px 9px !important;
background : #27ae60;
margin-left : -19px;
margin-right : 6px;
border-radius : 3px 0 0 3px;
font-size : 16px;
}
 
.demo:before {
content : "\f06e";
font-family : FontAwesome;
font-weight : normal;
padding : 11px 11px 9px !important;
background : #c0392b;
margin-left : -19px;
margin-right : 6px;
border-radius : 3px 0 0 3px;
font-size : 16px;
}

4. cara pemasangannya dibawah ini:

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

Terakhir simpan template

Semoga bermanfaat

Sumber: +Maz Wawan