Tombol Live Demo dan Download yang saya share kali ini memenfaatkan font-awesome, yaitu sebuah bentuk logo yang sudah diaplikasikan menjadi bentuk font sehingga dalam penerapannya hanya perlu kode font tersebut untuk memanggilnya dan tentunya sangat ringan dalam proses loading. Biasanya tombol ini dipakai untuk LIVE DEMO dan DOWNLOAD pada situs atau blog tutorial download.
Tombol ini akan menarik para pengunjung untuk mengetahui apa yang ada dibalik tombol itu dan penempatan kode tombol ini tidak sulit, meskipun bagi teman-teman yang masih baru belajar dalam hal ini.
Biar sesuai dengan apa yang diharapkan, maka perhatikan langkah demi langkah penempatan kode script, style atau CSS dibawah ini dengan seksama. Langkah yang harus dilakukan adalah:
Letakkan kode pada Template blog.
Masuk ke akun blogger.
Masuk ke menu tab Template > Edit HTML.
Letakkan kode dibawah ini tepat dibawah kode <head>.
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
/* CSS Live Demo dan Download Skin Design */
#wrap {/
margin:20px auto;/
text-align:center;/
}/
#wrap br {/
display:none;/
}/
.btn {/
display:inline-block;/
position:relative;/
font-family:'Source Sans Pro', Helvetica, sans-serif;/
background:#3b3f48;/
padding:6px 14px;/
font-size:14px;/
margin:0 3px;/
color:#fff!important;/
border-radius:3px;/
border:none;/
text-transform:uppercase;/
text-decoration:none;/
transition:all 0.3s ease-out;/
}/
.btn.down {/
background:#3b3f48;/
color:#fff!important;/
}/
.btn.down:hover,.btn.down:active,.btn:hover,.btn:active {/
background:#0099ff;/
color:#fff;/
}/
a.btn.down:hover,a.btn.down:active,a.btn:hover,a.btn:active {/
color:#fff;/
}/
.btn i {/
margin-left:10px;/
font-weight:normal;/
font-family:FontAwesome;/
}
Panggil kode pada entri blog.
Letakkan kode dibawah ini pada entri blog.
<div id="wrap">
<a class="btn down" href="XX" rel="nofollow" target="_blank">Live Demo <i class="fa fa-paper-plane"></i></a>
<br />
<a class="btn down" href="XX" rel="nofollow" target="_blank">Download <i class="fa fa-download"></i></a>
</div>
Kemudian klik tombol PUBLISH dan silahkan lihat hasilnya.
Demikian tutorial yang bisa kami sampaikan, jika kurang dipahami silahkan tinggalkan pesan.
Show Parser Hide Parser