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.

Membuat Tombol Demo Download Otomatis (Font Awesome)

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.

9 Responses to "Membuat Tombol Demo Download Otomatis (Font Awesome)"

  1. izin pasang di zonahentongerz.blogspot.com :D

    ReplyDelete
  2. I feel happiness to read the content that you are posting.

    ReplyDelete
  3. Local Search Engine Optimization Providers produces regular results that meet progressively ambitious task goals. I initially found Local Search Engine Optimization Providers while employed by yet another business and that I recalled an outstanding job they do discover here. Straight Website Marketing knows what they're carrying out; apparent from the results they develop

    ReplyDelete
  4. The quality of your articles and contents is great.
    backlinks company

    ReplyDelete
  5. Your blogs stuff is purely enough for me personally.
    ministryofreedom.com/

    ReplyDelete