Membuat Tombol Demo Download Otomatis (Font Awesome)

Cara Membuat Tombol Demo Download Otomatis (Font Awesome) Membuat tombol demo download ini memang sudah banyak di berikan oleh blogger lain, namun saya jarang sekali menemukan tutorial dengan menggunakan font awesome, bagi anda seorang blogger yang menggunakan niche template atau blog download, tombol demo download ini sangat efektif di gunakan bagi blog anda, selain sangat mudah penerapannya , tombol demo download ini juga sangat bergaya di bandingkan dengan hanya menggunakan teks saja, jadi bagi anda yang ingin membuatnya, silahkan ikuti tutorial ini.

Gambar di atas adalah contoh tombol demo yang akan kita buat, kurang lebih seperti itu.

Cara membuat tombol demo download menggunakan font awesome.
1. Buka akun blogger anda
2. Pilih menu Template > Klik Edit Html
3. Lalu silahkan anda Copy kode CSS di bawah ini dan letakan tepat di atas kode </head> 

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

4. selanjutnya silahkan anda copy code dibawah ini dan letakan tepat di atas 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; 
}

5. Klik save template.

Cara menggunakannya.
Gunakan kode Html dibawah ini di mode Tab Html.

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

Silahkan ganti url http://www.madamvia.web.id/ dengan url sesuai yang anda inginkan.
bagaimana, sudah mengerti? jika belum paham, silahkan tanyakan di kolom komentar. lebih dan kurangnya saya mohon maaf. semoga sukses.

Share to:

Google+ Facebook Twitter