Cara Membuat Tombol Demo dan Download dengan Icon di Postingan Blog

Cara Membuat Tombol Demo dan Download dengan Icon di Postingan Blog – Kesempatan kali ini saya akan membagikan tutorial cara memasang tombol button demo dan download dengan icon awesome di blog postingan blogger.

Sebenarnya sebelumnya saya sudah banyak menjelaskan cara membuat tombol demo/result pada potingan sebelumnya dengan berbagai macam tampilan ataupun efek, namun pada kesempatan ini saya membuatnya dengan tampilan yang berbeda dan lebih sederhana, yaitu dengan icon font awesome di sebelah kanannya.

Jika yang lalu saya membuat tombol (button) dan download yang letaknya memanjang memisah diatas dan dan dibawah, namun kali ini saya membuatnya bersebelahan yaitu disebelah kiri dan kanan, dengan alasan agar terlihat lebih rapi. Tombol ini juga bisa diganti sesuka hati kalian, misalnya mengubahnya dengan tombol kunjungi, beli,result dan semacamnya sesuai dengan keinginan anda sendiri.

Cara Membuat Tombol Demo dan Download dengan Icon di Postingan Blog

1. Login ke Blogger kalian > pilih menu Tema > kemudian Edit HTML

2. Letakkan ko ini tepat berada di atas kode ]]></b:skin> atau </style>

/* CSS BUTTON DEMO DOWNLOAD */
#wrap {margin:20px auto;text-align:center;}
#wrap br {display:none;}
.button.left {display:inline-block;position:relative;font-family:'Source Sans Pro', Helvetica, sans-serif;background:#fb7073;padding:10px 30px;font-size:14px;margin:0 3px;color:#fff!important;border-radius:1px;border:none;text-transform:uppercase;text-decoration:none;}
.button.right {display:inline-block;position:relative;font-family:'Source Sans Pro', Helvetica, sans-serif;background:#1b1b1b;padding:10px 30px;font-size:14px;margin:0 3px;color:#fff!important;border-radius:1px;border:none;text-transform:uppercase;text-decoration:none;}
.button i {margin-left:15px;font-weight:normal;font-family:FontAwesome;}

3. Jika sudah kemudian pilih Simpan Tema

4. Untuk menerapkan tombol demo dan download ini di postingan blog anda > buat Postingan Baru > pilih menu HTML (bukan Compose) > kemudian masukkan kode ini didalamnya

<div id="wrap">
<a class="button left" href="URL-ANDA" rel="nofollow" target="_blank">RESULTS<i class="fa fa-search"></i></a>
<br />
<a class="button right" href="URL-ANDA" rel="nofollow" target="_blank">DOWNLOAD<i class="fa fa-download"></i></a>
</div>
<div class="clear">
</div>

5. Selanjutnya tinggal di Publikasikan saja

Keterangan:

Cukup mudah bukan bukan untuk Memasang Tombol Demo dan Download dengan Icon ini di postingan blog kalian. Sampai disini cukup sekian tutorial saja dari saya, semoga dengan adanya tutorial ini dapat berguna bagi kita semua, Terimakasih.