Cara Membuat Tombol Download Dan Demo Pada Blog

Membuat Tombol Download Dan Demo - Pada kesempatan kali ini saya akan berbagi tutorial bagaiamana cara membuat tombol download dan demo menggunakan css , Tutorial kali ini sangat berguna buat sobat yang mengelola blog download seperti blog saya ini . tombol ini membantu visitor mencari tombol download dan tombol demo dengan sangat mudah.

Cara Membuat Tombol Download Dan Demo
1. Buka Blogger , Kemudian klik login
2. Ditampilan Dashboard pergi ke Template
3. Edit HTML
4. Letakan css berikut tepat diatas ]]></b:skin>

 /* CSS Demo Download Buttons - Alponse */
.btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important}
.btn ul {margin:0;padding:0}
.btn li{display:inline;margin:5px;padding:0;list-style:none;}
.demo,.download{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out}
.demo {background-color:#3498DB;}
.download {background-color:#1ABC84;}
.demo:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;}
.download:hover {background-color:#49DDAA;color:#fff;border-bottom:2px solid #1ABC84;opacity:1;}
.demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}

5. Langkah terakhir sobat membuat postingan/entri baru . letakakan kode html dibawah ini dalam Mode HTML

 <div style="text-align: center;">
<ul class="btn">
<li><a class="demo" href="https://alponse.blogspot.com/" target="_blank">DEMO</a></li>
<li><a class="download" href="https://alponse.blogspot.com/" target="_blank">Download</a></li>
</ul>
</div>
</div>

Begitulah Cara Membuat Tombol Download Dan Demo . Dengan mengikuti tutorial diatas saya harap sobat bisa memahaminya dengan mudah . cukup sekian untuk tutorial kali ini , sampai jumpa ditutorial selanjutnya.