Membuat Tombol Download di Blog Menggunakan Bootstrap dan Font Awesome

Rumahit.ID - Membuat Tombol Download di Blog Menggunakan Bootstrap dan Font Awesome
Tutorial ngeblog kali ini Rumah IT akan membahas cara membuat tombol download di blog menggunakan Bootstrap dan font awesome. Seperti pada judul kita akan memanggil font awesome ke dalam template blog untuk menampilkan efek icon pada tombol download. Selain digunakan untuk link download, bisa juga digunakan untuk link demo sebuah blog atau halaman website. Langsung saja ke TKP gan.

Langkah #1 :

Silahkan Login ke blog untuk edit template, cari kode </head> kemudian letakan kode pemanggil font awesome dibawah ini diatas kode </head> .

<!-- TOMBOL DEMO DAN DOWNLOAD -->
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/> 

Langkah #2 :

Selanjutnya kita akan membuat CSS untuk tombol download, cari kode </b:skin> lalu tempatkan kode CSS berikut diatas kode </b:skin> kemudian simpan template.

/* model flat ui 2 */

.button2{float:center;list-style:none;text-align:center;width:250px;margin:10px;padding:2px;font-size:14px;clear:both}

.button2 ul{margin:0;padding:0}

.button2 li{display:inline;margin:5px;padding:0;list-style:none}

.button2 li a.demo,.button2 li a.download{position:relative;padding:14px 48px 14px 16px;background:#3498db;display:block;color:#fff !important;font-weight:500;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:200px;margin:auto;overflow:hidden}

.button2 li a.download{background:#e74c3c}

.button2 li a.demo:hover,.button2 li a.download:hover{background:#666}

.button2 li a.demo:active,.button2 li a.download:active{cursor:pointer}

.button2 li a.demo:after,.button2 li a.download:after{content:'\f054';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px 24px;font-family:fontawesome;transition:all .3s}

.button2 li:hover a.demo:after,.button2 li:hover a.download:after{background:transparent;-webkit-animaton:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}

@webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}

@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}} 

Langkah #3 :

Terakhir kita akan menerapkan tombol didalam postingan, buat postingan baru kemudian pindah ke mode HTML, salin kode berikut untuk memanggil CSS tombol yang sudah dibuat.

<div class="text-align:center;">
<ul align="center" class="button2">
<li style="text-align: center;"><a class="demo" href="http://adf.ly/1Rb2uX" target="_blank">Demo</a></li>
<li style="text-align: center;"><a class="download" href="http://adf.ly/1Rb30n" target="_blank">Download</a></li>
</ul> 

Jika berhasil maka akan menghasilkan tampilan tombol seperti contoh dibawah ini :

Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text

Sekian tutorial Membuat Tombol Download di Blog Menggunakan Bootstrap dan Font Awesome, jika ada pertanyaan silahkan tinggalkan jejak di komentar. Salam Informatika