Cara Membuat Tombol Demo dan Download dengan Icon di Postingan Blog - Kesempatan kali ini aku akan membagikan tutorial cara memasang tombol button demo dan d0wnl0ad dengan icon awesome di blog postingan blogger.
Sebenarnya sebelumnya aku sudah banyak menjelaskan cara menciptakan tombol demo/result pada potingan sebelumnya dengan aneka macam macam tampilan ataupun efek, namun pada kesempatan ini aku membuatnya dengan tampilan yang berbeda dan lebih sederhana, ialah dengan icon font awesome di sebelah kanannya.
Jika yang kemudian aku menciptakan tombol (button) dan d0wnl0ad yang letaknya memanjang memisah diatas dan dan dibawah, namun kali ini aku membuatnya bersebelahan ialah disebelah kiri dan kanan, dengan alasan biar terlihat lebih rapi. Tombol ini juga sanggup diganti sesuka hati kalian, contohnya mengubahnya dengan tombol kunjungi, beli,result dan semacamnya sesuai dengan impian anda sendiri.
Cara Membuat Tombol Demo dan Download dengan Icon di Postingan Blog
1. Login ke Blogger kalian > pilih sajian Tema > kemudian Edit HTML
2. Letakkan ko ini sempurna berada di atas aba-aba ]]></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 d0wnl0ad ini di postingan blog anda > buat Postingan Baru > pilih sajian HTML (bukan Compose) > kemudian masukkan aba-aba 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-d0wnl0ad"></i></a> </div> <div class="clear"> </div>5. Selanjutnya tinggal di Publikasikan saja
Keterangan:
| Kode | Keterangan |
|---|---|
| URL-ANDA | ubah dengan Link yang anda inginkan |
| RESULTS/DOWNLOAD | ubah goresan pena sesuai impian anda (misalnya: beli, demo,lihat ataupun kunjungi |
Cukup gampang 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 sanggup mempunyai kegunaan bagi kita semua, Terimakasih.
Sumber http://www.analisyuki.com/