Cara Membuat Button Download Keren Di Blog

Hello selamat pagi sobat, kali ini admin mau bagi bagi tutorial nih untuk mempercantik website kamu . yap seperti pada judul kaliini kita akan menambahkan tombol download di pos kita agar nga ngebosenin tampilan link downloadnya, oke tanpa lebih banyak bosa basi langsung aja nih, eits ebelum kamu buat lihat dulu nih previewnya dibawah ini

Sebelumnya terapkan CSS stylesheet Font Awesome berikut ini pada HTML blog, letakkan di bawah kode <head>

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

1. Masuk ke Dashboard Blog, pilih Template dan masuk ke Edit HTML

2. Salin dan letakkan kode CSS berikut ini tepat di atas kode ]]></b:skin> atau </style>

/* CSS Tombol Demo dan Download Keren */
#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;
}

Simpan Template/Save Template

3. Selanjutnya adalah tahap penerepan HTML untuk demo dan download button pada blog post

Keterangan : Terapkan HTML berikut di HTML editor (bukan ~~Compose~~)

<div id="wrap">
<a class="btn down" href="#" rel="nofollow" target="_blank">Live Demo <i class="fa fa-paper-plane"></i></a><br />
<a class="btn down" href="#" rel="nofollow" target="_blank">Download <i class="fa fa-download"></i></a></div>

Terakhir ganti tanda "#" dengan link (tautan) milik Anda.

nurulamin1455

Cara Membuat Button Download Keren Di Blog