Cara Membuat Tombol Download with Font Awesome Rotate Resposive

Font Awesome Rotate adalah sebuah icon font awesome berputar terus menerus secara periodik dan dibingkai dengan kotak tombol berbentuk persegi panjang yang sedikit dipotong pada tiap sudut dengan radius bordir sehingga kelihatan lebih manis untuk menghiasi entri posting blog. Kali ini tersedia bebarapa pilihan warna yang bisa disesuaikan dengan warna Template blog.

Penempatan Font Awesome Rotate tombol download akan menambah cantik tampilan yang akan membuat rasa tertarik pasa visitor untuk meng-klik tombol yang yang dipasang pada entri posting blog dan kemungkinan besar akan kembali lagi pada waktu lain.

Perlu perhatian sedikit, karena saya share ada beberapa tombol dan pengambilan kode-nya disesuaikan dengan warna teks box. Langkah yang harus dilakukan adalah:

Cara meletakkan CSS Font Awesome Rotate pada blog.

Masuk ke akun blogger.
Masuk ke menu tab Template > Edit HTML.
Letakkan kode berikut tepat diatas kode </head>.

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

Letakkan kode dibawah ini tepat diatas kode ]]></b:skin> atau </style>.

 /* Skin Design Button Download */
a:link{text-decoration:none}
.vn-red a{ background-color:#e74c3c; display:inline-block; position:relative; margin:30px 5px; padding:20px 20px 20px 80px; color:#fff; transition:all 0.4s ease; border-radius:3px }
.vn-red a:before{ content:"\f019"; font-family:fontAwesome; position:absolute; font-style: normal; font-weight: normal; text-decoration: inherit; font-size:28px; border-radius:0 20px 0 0; color:#000; background-color:#fff; opacity:0.3; padding:20px; top:0; left:0; }
.vn-red a:hover{ background:#7f8c8d }
.vn-green a{ background-color:#27ae60; display:inline-block; position:relative; margin:30px 5px; padding:20px 20px 20px 80px; color:#fff; transition:all 0.4s ease; border-radius:3px }
.vn-green a:before{ content:"\f019"; font-family:fontAwesome; position:absolute; font-style: normal; font-weight: normal; text-decoration: inherit; font-size:28px; border-radius:0 20px 0 0; color:#000; background-color:#fff; opacity:0.3; padding:20px; top:0; left:0 }
.vn-green a:hover{ background:#7f8c8d }
.vn-wisteria a{ background-color:#8e44ad; display:inline-block; position:relative; margin:30px 5px; padding:20px 20px 20px 80px; color:#fff; transition:all 0.4s ease; border-radius:3px }
.vn-wisteria a:before{ content:"\f019"; font-family:fontAwesome; position:absolute; font-style: normal; font-weight: normal; text-decoration: inherit; font-size:28px; border-radius:0 20px 0 0; color:#000; background-color:#fff; opacity:0.3; padding:20px; top:0; left:0 }
.vn-wisteria a:hover{ background:#7f8c8d }
.vn-orange a{ background-color:#f39c12; display:inline-block; position:relative; margin:30px 5px; padding:20px 20px 20px 80px; color:#fff; transition:all 0.4s ease; border-radius:3px }
.vn-orange a:before{ content:"\f019"; font-family:fontAwesome; position:absolute; font-style: normal; font-weight: normal; text-decoration: inherit; font-size:28px; border-radius:0 20px 0 0; color:#000; background-color:#fff; opacity:0.3; padding:20px; top:0; left:0 }
.vn-orange a:hover{ background:#7f8c8d }
.vn-blue a{ background-color:#2980b9; display:inline-block; position:relative; margin:30px 5px; padding:20px 20px 20px 80px; color:#fff; transition:all 0.4s ease; border-radius:3px }
.vn-blue a:before{ content:"\f019"; font-family:fontAwesome; position:absolute; font-style: normal; font-weight: normal; text-decoration: inherit; font-size:28px; border-radius:0 20px 0 0; color:#000; background-color:#fff; opacity:0.3; padding:20px; top:0; left:0 }
.vn-blue a:hover{ background:#7f8c8d } 
.vn-warm_brown a{ background-color:#8c6635; display:inline-block; position:relative; margin:30px 5px; padding:20px 20px 20px 80px; color:#fff; transition:all 0.4s ease; border-radius:3px }
.vn-warm_brown a:before{ content:"\f019"; font-family:fontAwesome; position:absolute; font-style: normal; font-weight: normal; text-decoration: inherit; font-size:28px; border-radius:0 20px 0 0; color:#000; background-color:#fff; opacity:0.3; padding:20px; top:0; left:0 }
.vn-warm_brown a:hover{ background:#7f8c8d } 

Pilih warna tombol sesuai dengan warna CSS pada teks box diatas. Kemudian tekan tombol SAVE Template.

Cara memanggil CSS diatas pada entri posting blog.

Letakkan kode HTML dibawah ini sesuai keinginan dalam entri posting.

<div class="vn-red" style="text-align: center;">
<a href="XXXX">DOWNLOAD 1 <i class="fa fa-rocket fa-lg fa-spin"></i></a> 
</div>
<div class="vn-green" style="text-align: center;">
<a href="XXXX" class="btn-wrap">DOWNLOAD 2 <i class="fa fa-rocket fa-lg fa-spin"></i></a>
</div>
<div class="vn-wisteria" style="text-align: center;">
<a href="XXXX" class="btn-wrap">DOWNLOAD 3 <i class="fa fa-rocket fa-lg fa-spin"></i></a>
</div>
<div class="vn-orange" style="text-align: center;">
<a href="XXXX" class="btn-wrap">DOWNLOAD 4 <i class="fa fa-rocket fa-lg fa-spin"></i></a>
</div>
<div class="vn-blue" style="text-align: center;">
<a href="XXXX" class="btn-wrap">DOWNLOAD 5 <i class="fa fa-rocket fa-lg fa-spin"></i></a>
</div> 
<div class="vn-warm_brown" style="text-align: center;">
<a href="XXXX" class="btn-wrap">DOWNLOAD 6 <i class="fa fa-rocket fa-lg fa-spin"></i></a>
</div> 

Pilih warna tombol sesuai dengan warna HTML pada teks box diatas.
Pada teks box XXXX bisa diganti dengan link anda.
Pada teks box Download 1, Download 2, Download 3, Download 4, Download 5, Download 6 bisa diganti sesuai dengan selera anda.
Jika semua selesai dan sesuai dengan pemaparan diatas maka langkah selanjutnya klik tombol PUBLISH dan lihat hasilnya.

Result

Demikian tutorial yang bisa kami sampaikan, jika kurang dipahami silahkan tinggalkan pesan.