Cara Membuat Tombol Download Demo dan Buy Now di Blogger

Cara Membuat Tombol Download Demo dan Buy Now di Blogger Mboton Halo sobatku blogger sekalian, pada kesempatan kali ini admin akan memberikan sedikit tips bagi anda yang belum mengerti untuk membuat tombol download Demo dan Buy Now di template Blogger anda dengan menggunakan CSS dan SVG yang tentu membuat blogger anda biar kelihatan bekerja bagus dengan performa yang tetap cepat diakses Membuat Tombol Download Demo dan Buy Now.

Tombol Download Demo Dan Buy Now Di Blogger?

Dengan memadukan animasi hover yang sangat keren yaitu berupa animasi transisi dan background gradiasi yang sangat apik, tombol ini akan membantu blog sobat tampil dengan performa yang lebih menarik dan enak untuk dipandang.

Dengan keuntungan tersebut, otomatis pengunjung blog sobat akan semakin betah dan sering berkunjung di blog sobat kan Oke, langsung saja ke tutorialnya! Simak terus ya.

Cara Membuat Tombol Download Demo dan Buy Now di Blogger

1. Silahkan Akun Gmail.
2. Login ke akun blogger Anda Masing-Masing.
3. Masuk ke menu atau Dashboard Klik Tema blogger anda semua lalu anda klik Edit HTML kalian masing-masing.
4. Selanjutnya cari kode ]]></b:skin> dan pastekan kode dibawah ini tepat diatas kode tersebut.

/* Tombol Download Demo Dan Buy Now */
#btn-keren {margin: 10px auto;
text-align: center;}
#btn-keren br {display: none;}
.btn-keren1 {position: relative;display: inline-block;height: 50px;width: 200px;line-height: 50px;padding: 0;border-radius: 7px;background:linear-gradient(225deg,#4285f4 0,#1a73e8 75%);margin: 10px;transition: .5s}
.btn-keren2 {position: relative;display: inline-block;height: 50px;width: 200px;line-height: 50px;padding: 0;border-radius: 7px;background:linear-gradient(225deg,#4285f4 0,#1a73e8 75%);margin: 10px;transition: .5s}
.btn-keren3 {position: relative;display: inline-block;height: 50px;width: 200px;line-height: 50px;padding: 0;border-radius: 7px;background:linear-gradient(225deg,#4285f4 0,#1a73e8 75%);margin: 10px;transition: .5s}
.btn-keren1:hover {background-color:linear-gradient(225deg,#4285f4 0,#1a73e8 75%);}
.btn-keren2:hover {background-color:linear-gradient(225deg,#4285f4 0,#1a73e8 75%);}
.btn-keren3:hover {background-color:linear-gradient(225deg,#4285f4 0,#1a73e8 75%);}
.btn-keren1:hover span.circle, .btn-keren2:hover span.circle2, .btn-keren3:hover span.circle3 {left: 100%;border-radius: 100%;margin-left: -45px;background-color: transparent;}
.btn-keren1:hover span.circle{color: #fff;}
.btn-keren2:hover span.circle2 {color: #fff;}
.btn-keren3:hover span.circle3 {color: #fff;}
.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 {display: block;background-color: #fff;color: #1a73e8;position: absolute;float: left;margin: 5px;line-height: 55px;height: 40px;width: 40px;top: 0;left: 5px;transition: .5s;border-radius: 100%;}
.btn-keren2 span.circle2 {display: block;background-color: #fff;color: #1a73e8;position: absolute;float: left;margin: 5px;line-height: 55px;height: 40px;width: 40px;top: 0;left: 5px;transition: .5s;border-radius: 100%;}
.btn-keren3 span.circle3 {display: block;background-color: #fff;color: #1a73e8;position: absolute;float: left;margin: 5px;line-height: 55px;height: 40px;width: 40px;top: 0;left: 5px;transition: .5s;border-radius: 100%;}
.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: #fff;transition: .5s;}
.btn-keren2 span.title2,.btn-keren2 span.title-hover2 {color: #fff;left: 70px;}
.btn-keren3 span.title3,.btn-keren3 span.title-hover3 {color: #fff;left: 60px;}
.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;
}

Silahkan sobat sesuaikan sendiri untuk warnanya Membuat Tombol Download Demo dan Buy Now

Jika sudah, klik SIMPAN.

Langkah Membuat Tombol Pada Postingan

Buatlah postingan baru kemudian silahkan copy kode dibawah ini dan pastekan di menu HTML buka.

<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>

Apabila  hanya ingin memasang salah satu atau dua tombol saja misalnya tombol demo saja, silahkan cukup pasang salah satu kode html diatas dengan keterangan dibawah ini.

Sesuaikan sesuai keinginan anda masing-masing yang anda ingin gunakan tombol yang mana pada postingan diblogger anda semua sendiri ya.

Silakan Klik untuk melihat Tombol-Tombol Demonya Di Bawah ini:

Penutup

Membuat Tombol Download Demo dan Buy Now Bagaimana mudah bukan untuk tutorial Cara Membuat Tombol Demo Download dan Buy Now di blogger ala Mboton.

Membuat Tombol Download Demo dan Buy Now Jika ada yang ditanyakan silahkan bisa komen dibawah ya sobat. Jangan lupa dishare juga.