BREAKING NEWS

BLOG

ARTIKEL PUBLIK

SEO

Sunday, 9 July 2017

Membuat Tombol Download di Blog Menggunakan Bootstrap dan Font Awesome


Membuat Tombol Download di Blog Menggunakan Bootstrap dan Font Awesome

      Membuat Tombol Download di Blog Menggunakan Bootstrap dan Font Awesome - Tutorial ngeblog kali ini Informatika XYZ 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 :



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

Post a Comment

 
Copyright © 2017 AKADEMI INFORMATIKA - Member of Rumah IT
Our Partners: Indonesia Travel Guide - ICT Computer - Safe Your Link Away. Powered byBlogger