Cara Membuat Tombol Demo with Font Awesome Right Arrow Resposive

Font Awesome Right Arrow adalah sebuah icon font awesome arah panah kanan 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 Right Arrow 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 Right Arrow 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 Buttons */

.button2{float:left;list-style:none;text-align:center;width:200px;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:700;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)}}

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="text-align:center;">

<ul class="button2">

<li><a class="demo" href="XXXX" target="_blank">Demo</a></li>

<li><a class="download" href="XXXX" target="_blank">Download</a></li>

</ul>

</div>

</div>

<div class="clear">

Pada teks box XXXX bisa diganti dengan link anda.
Pada teks box Demo, Download 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.