Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blog / SEO / Template / Tips

Cara Membuat Tombol Demo, Download dan Buy Now Mudah di Blog

Oleh Moderator
Cara Membuat Tombol Demo, Download dan Buy Now Mudah di Blog - Kali ini admin akan memberikan sebuah tips atau tutorial tentang bagaimana cara membuat tombol download, demo dan buy now keren dengan mudah pada blogger. Seperti yang kita ketahui bahwa tombol download yang menarik juga dapat membuat pengunjung betah terhadap website kita, itu karena tersedianya tombol tersebut membuat pengunjung secara cepat menemukan tombol download asli yang di maksudkan oleh penulis atau blogger.

tombol-download-demo-dan-buy-now

Tombol-tombol keren yang di sajikan penulis juga berfungsi untuk mempercantik tampilan website. Dengan demikian akan terlihat menarik baik dikalangan pengunjug maupun penulis itu sendiri. Dengan menerapkan tombol-tombol yang indah dan tersusun rapi, maka akan secara tidak langsung pula google pencaharian juga akan cepat merespon dan merekomendasikan website atau blog anda.

Bagi anda yang tertarik untuk menerapkan tombol-tombol keren seperti tombol download, demo dan buy now yang biasanya digunakan pada website dowload template, maka admin akan memberikan cara atau langkah-langkahnya di bawah ini.

  • Silahkan masuk atau login ke blogger
  • Pada halaman dashboard blogger, pilih menu TEMA
  • Lalu cari dan klik tombol Edit HTML
  • Kemudian tekan CTRL+ F untuk mencari kode
  • Dan cari kode ]]></b:skin> 
  • Setelah anda menemukan kode tersebut, maka copy kode di bawah ini :


/* Tombol Download Jagoandzgn */
#btn-keren {margin: 10px auto;
text-align: center;}
#btn-keren br {display: none;}
.btn-keren1, .btn-keren2, .btn-keren3 {position: relative;display: inline-block;height: 50px;width: 200px;line-height: 50px;padding: 0;border-radius: 50px;background: #fdfdfd;border: 2px solid #009688;margin: 10px;transition: .5s}
.btn-keren2 {border: 2px solid #3f51b5;}
.btn-keren3 {border: 2px solid #d83500;}
.btn-keren1:hover {background-color: #009688;}
.btn-keren2:hover {background-color: #3f51b5;}
.btn-keren3:hover {background-color: #d83500;}
.btn-keren1:hover span.circle, .btn-keren2:hover span.circle2, .btn-keren3:hover span.circle3 {left: 100%;margin-left: -45px;background-color: #fdfdfd;}
.btn-keren1:hover span.circle{color: #009688;}
.btn-keren2:hover span.circle2 {color: #3f51b5;}
.btn-keren3:hover span.circle3 {color: #d83500;}
.btn-keren1:hover span.title, .btn-keren2:hover span.title2, .btn-keren3:hover span.title3 {left: 40px;opacity: 0;}
.btn-keren1:hover span.title-hover, .btn-keren2:hover span.title-hover2, .btn-keren3:hover span.title-hover3 {opacity: 1;left: 40px;}
.btn-keren1 span.circle, .btn-keren2 span.circle2, .btn-keren3 span.circle3 {display: block;background-color: #009688;color: #fff;position: absolute;float: left;margin: 5px;line-height: 55px;height: 40px;width: 40px;top: 0;left: 0;transition: .5s;border-radius: 50%;}
.btn-keren2 span.circle2 {background-color: #3f51b5;}
.btn-keren3 span.circle3 {background-color: #d83500;}
.btn-keren1 span.title,.btn-keren1 span.title-hover, .btn-keren2 span.title2,.btn-keren2 span.title-hover2,.btn-keren3 span.title3, .btn-keren3 span.title-hover3 {position: absolute;left: 90px;text-align: center;margin: 0 auto;font-size: 16px;font-weight: bold;color: #009688;transition: .5s;}
.btn-keren2 span.title2,.btn-keren2 span.title-hover2 {color: #3f51b5;left: 80px;}
.btn-keren3 span.title3,.btn-keren3 span.title-hover3 {color: #d83500;left: 80px;}
.btn-keren1 span.title-hover, .btn-keren2 span.title-hover2, .btn-keren3 span.title-hover3 {left: 80px;opacity: 0;}
.btn-keren1 span.title-hover, .btn-keren2 span.title-hover2, .btn-keren3 span.title-hover3 {
color: #fff;
}
  • Pastekan atau tempelkan tepat DIATAS kode ]]></b:skin>
  • Lalu klik tombol SAVE atau SIMPAN.

Setelah anda menyimpan kode penghubungnya, maka ada hanya perlu untuk menerapkan kode pemanggil pada artikel yang ingin anda berikan tombol download, demo & buy now tersebut.
Silahkan anda buat postingan baru atau memilih artikel yang hendak di sisipkan tombol downlaod dengan mengklik tombbol edit pada entri post. Buka file artikel tersebut atau membuat postingan baru, selanjutnya ubah menu halaman dari COMPOSE menjadi HTML dan salin kode di bawah ini :

<div id="btn-keren">
<a href="#" class="btn-keren1" target="_blank">
<span class="circle"><svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M21,14H3V4H21M21,2H3C1.89,2 1,2.89 1,4V16A2,2 0 0,0 3,18H10L8,21V22H16V21L14,18H21A2,2 0 0,0 23,16V4C23,2.89 22.1,2 21,2Z" /> </svg></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>
</div>

<div id="btn-keren">
<a href="#" class="btn-keren2" target="_blank">
<span class="circle2"><svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" /> </svg></span>
<span class="title2">Download</span>
<span class="title-hover2">Click here</span>
</a>
</div>

<div id="btn-keren">
<a href="#" class="btn-keren3" target="_blank">
<span class="circle3"><svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M17,18C15.89,18 15,18.89 15,20A2,2 0 0,0 17,22A2,2 0 0,0 19,20C19,18.89 18.1,18 17,18M1,2V4H3L6.6,11.59L5.24,14.04C5.09,14.32 5,14.65 5,15A2,2 0 0,0 7,17H19V15H7.42A0.25,0.25 0 0,1 7.17,14.75C7.17,14.7 7.18,14.66 7.2,14.63L8.1,13H15.55C16.3,13 16.96,12.58 17.3,11.97L20.88,5.5C20.95,5.34 21,5.17 21,5A1,1 0 0,0 20,4H5.21L4.27,2M7,18C5.89,18 5,18.89 5,20A2,2 0 0,0 7,22A2,2 0 0,0 9,20C9,18.89 8.1,18 7,18Z" />
</svg></span>
<span class="title3">Buy Now</span>
<span class="title-hover3">Click here</span>
</a>
</div>
Ganti tanda ( # ) dengan link menuju halaman
Jika ada dari salah satu tombol yang ingin anda hilangkan, maka anda hanya cukup menghapus dari kode <div id=...> hingga </div>. Contohya cukup untuk menghilangkan seperti kode di bawah ini :

<div id="btn-keren">
<a href="#" class="btn-keren3" target="_blank">
<span class="circle3"><svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M17,18C15.89,18 15,18.89 15,20A2,2 0 0,0 17,22A2,2 0 0,0 19,20C19,18.89 18.1,18 17,18M1,2V4H3L6.6,11.59L5.24,14.04C5.09,14.32 5,14.65 5,15A2,2 0 0,0 7,17H19V15H7.42A0.25,0.25 0 0,1 7.17,14.75C7.17,14.7 7.18,14.66 7.2,14.63L8.1,13H15.55C16.3,13 16.96,12.58 17.3,11.97L20.88,5.5C20.95,5.34 21,5.17 21,5A1,1 0 0,0 20,4H5.21L4.27,2M7,18C5.89,18 5,18.89 5,20A2,2 0 0,0 7,22A2,2 0 0,0 9,20C9,18.89 8.1,18 7,18Z" />
</svg></span>
<span class="title3">Buy Now</span>
<span class="title-hover3">Click here</span>
</a>
</div>
Jika sudah selesai, maka anda dapat melihat pertinjuan terlebih dahulu untuk memastikan apakah tips ini berhasil atau tidak. Jika anda sudah memastikan telah mengikuti langkah-langkah yang admin berikan dengan benar, maka dapat saya jamin bahwa tips ini akan ampuh dan auto berhasil. 

Apa bila ada yang kurang paham dengan penjelasan admin, maka anda dapat menanyakan langsung kepada admin dengan menuliskan nya di kolom komentar di bawah. Mungkin cukup sekian pembahasan dari admin pada kesempatan kali ini dan lain waktu admin akan memberikan video selengkapnya di bawah postingan, sekian dan terimaksih.