Membuat Tombol Demo dan Download pada Blog - Jika sebelum-sebelumnya, saya membahas lebih banyak tentang widget, maka pada artikel ini saya mau ngebahas tentang Button/Tombol, yaitu Tombol Download dan Buttons.
Menurutku kedua tombol ini, penting untuk ada pada sebuah blog, apalagi bagi blog yang banyak menyertakan Link Download pada blog. Dengan adanya tombol ini, Link yang anda tuliskan pada artikel anda seperti Cara Menghapus Widget Blog akan diubah menjadi lebih menarik dengan tombol Demo dan Download tersebut. Jadi, intinya adalah Tombol ini akan menyembunyikan linknya dan menggantinya dengan Button, pembaca akan diarahkan pada link tersebut setelah pembaca mengklik buttonnya.
Salah satu manfaat dari Button ini adalah, Blog akan terlihat lebih rapi dan terlihat professional. Seperti yang saya katakan dalam kebanyakan artikel-artikelku sebelumnya, blog yang terlihat professional akan membuat si pembaca yakin dengan apa yang anda tuangkan dalam setiap artikelmu.
Tombol Demo dan Download ini dibuat dengan menggunakan CSS3, kelebihan dengan menggunakan CSS3 adalah tombol demo dan download tidak akan memberikan pengaruh banyak terhadap proses pemuatan blog, berbeda dengan yang tidak menggunakan CSS3, blog akan terasa berat dan membutuhkan waktu pemuatan yang cukup lama.
Sebelumnya saya ingin memastikan bahwa blog anda sudah terpasang font awesome.
Sekarang mari kita Mulai tutorialnya
Pertama-tama buka Blogger.com > Kemudian masuk ke menu Template, pilih Edit HTML, kemudian letakkan Kodenya sebelum ]]></b:skin> atau </Style>
.btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important}
.btn ul {margin:0;padding:0}
.btn li{display:inline;margin:5px;padding:0;list-style:none;}
.demo,.download{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out}
.demo {background-color:#3498DB;}
.download {background-color:#1ABC84;}
.demo:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;}
.download:hover {background-color:#49DDAA;color:#fff;border-bottom:2px solid #1ABC84;opacity:1;}
.demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}Sekarang, cobalah untuk membuat artikel baru, lalu masukkan kode ini dalam artikel mu, pada Tab HTML
<div style="text-align: center;">
<ul class="btn">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
<li><a class="download" href="YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
</ul>
</div>Jika anda hanya ingin tombol Demo saja
<div style="text-align: center;">
<ul class="btn">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
</ul>
</div>Atau Jika anda hanya ingin Tombol Download
<div style="text-align: center;">
<ul class="btn">
<li><a class="download" href="YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
</ul>
</div>Hasilnya akan seperti gambar diatas.
Jangan Lupa untuk mengganti YOUR-LINK-HERE dengan link yang akan dituju, dan jangan lupa untuk menambahkan kode tersebut di setiap artikel yang ingin anda berikal Tombol Demo dan Download. Bagaimana mudah bukan? Sekian penjelasanku, Semoga Bermanfaat.
0 komentar