Tutorial Cara Membuat Tombol Demo dan Download pada Blog

 

Sekarang kita akan membahas Tutorial Cara Membuat Tombol Demo dan Download pada Blog seperti gambar di atas Tombol Demo dan Download akan menambah daya tarik suatu blog.


Credit: ayamjantan25

kedua tombol ini, penting untuk ada pada sebuah blog, apalagi bagi blog yang banyak menyertakan Link Download pada blog

Salah satu manfaat dari Button ini adalah, Blog akan terlihat lebih rapi dan terlihat professional.

Tombol Demo dan Download ini dibuat dengan menggunakan CSS3, kelebihan dengan menggunakan CSS3 adalah tombol demo dan download tidak akan memberikan pengaruh banyak terhadap proses pemuatan blog, berbeda dengan yang tidak menggunakan CSS3, blog akan terasa berat dan membutuhkan waktu pemuatan yang cukup lama.

Sebelumnya saya ingin memastikan bahwa blog anda sudah terpasang font awesome.

Sekarang mari kita Mulai tutorialnya

Pertama-tama buka Blogger.com > Kemudian masuk ke menu Template, pilih Edit HTML, kemudian letakkan Kodenya sebelum ]]></b:skin> atau </Style>

.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;}

Simpan Templatenya

Sekarang, cobalah untuk membuat artikel baru, lalu masukkan kode ini dalam artikel mu, pada Tab HTML

<div style="text-align: center;">
<ul class="btn">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
<li><a class="download" href="YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
</ul>
</div>

Jika anda hanya ingin tombol Demo saja

<div style="text-align: center;">
<ul class="btn">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
</ul>
</div>

Atau Jika anda hanya ingin Tombol Download

<div style="text-align: center;">
<ul class="btn">
<li><a class="download" href="YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
</ul>
</div>

Hasilnya akan seperti gambar diatas. 

Jangan Lupa untuk mengganti YOUR-LINK-HERE dengan link yang akan dituju, dan jangan lupa untuk menambahkan kode tersebut di setiap artikel yang ingin anda berikal Tombol Demo dan Download. Bagaimana mudah bukan? Sekian penjelasanku, Semoga Bermanfaat.

Credit: ayamjantan25