Cara Membuat Tombol Download Pada Posting Blog

Membuat Tombol Demo dan Download dengan Font Awesome - Pada saat kita membagikan template atau software tidak jauh dengan namanya demo dan download. sekarang saya akan membagikan tutorial pembuatan tombol demo dan download tapi pada postingan ini saya menggunnakan font awesome anda bisa baca bagaimana Memasang Plugin Font Awesome di Blogger.

Untuk penampakan lihat gambar diatas atau bisa seperti dibawah ini:

Demo Download

Tutorial pembuatan:

1. Masuk dashboard Blogger > Template dan Edit HTML
2. Simpan kode CSS diatas kode ]]></b:skin> atau </style>

.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; 
} 

3. Untuk penggunaan HTML seperti dibawah ini:

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

4. Simpan Template

Semoga bermanfaat