Membuat Tombol Download, Demo, Buy Now Keren di Blogger
Panduanajib.com - Halo semua, hari ini saya akan berikan kembali sebuah tutorial simple dan keren untuk Anda semua pengguna blogger. Ya tutorial yang akan saya berikan hari ini adalah Cara Membuat Tombol Download, Demo, Buy Now Keren di Blogger.
Tombol ini tidak akan membuat loading blog Anda berat, sebab tutorial yang akan saya berikan ini menggunakan sebuah kode CSS SVG yang akan cepat diakses namun tetap akan tampil keren serta benar-benar tidak akan membebani loading blog Anda.
Selain ringan, tombol ini memiliki sebuah Hover yang sangat keren yakni berupa animasi transisi dan pergantian warna serta slide yang sangat manis ketika seseorang mencoba untuk melakukan klik pada salah satu tombol ini.
Sekedar informasi bahwa Icon ini mengahruskan Anda menggunakan Font Awesome di blogger. Jika tidak ada, Anda bisa menggantinya menjadi SVG.
2. Masuk ke menu Tema > edit HTML
3. Kemudian cari kode ]]></b:skin> dan letakan kode di bawah ini tepat DIATAS kode tersebut
4. Kemudian silahkan klik SIMPAN, selesai.
Bagaimana sangat mudah bukan caranya.
Tombol ini tidak akan membuat loading blog Anda berat, sebab tutorial yang akan saya berikan ini menggunakan sebuah kode CSS SVG yang akan cepat diakses namun tetap akan tampil keren serta benar-benar tidak akan membebani loading blog Anda.
Selain ringan, tombol ini memiliki sebuah Hover yang sangat keren yakni berupa animasi transisi dan pergantian warna serta slide yang sangat manis ketika seseorang mencoba untuk melakukan klik pada salah satu tombol ini.
Sekedar informasi bahwa Icon ini mengahruskan Anda menggunakan Font Awesome di blogger. Jika tidak ada, Anda bisa menggantinya menjadi SVG.
Cara Membuat Tombol Download, Demo, Buy Now Keren di Blogger
1. Silahkan masuk ke akun blogger Anda2. Masuk ke menu Tema > edit HTML
3. Kemudian cari kode ]]></b:skin> dan letakan kode di bawah ini tepat DIATAS kode tersebut
/* Tombol Download PANDUANAJIB */
#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;
}
4. Kemudian silahkan klik SIMPAN, selesai.
Cara Penerapan:
Silahkan buat sebuah postingan, kemudian masukan kode di bawah ini pada postingan HTML bukan Compose.<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>
Bagaimana sangat mudah bukan caranya.
DEMO
Demikian sedikit artikel dari saya, semoga bermanfaat.
Posting Komentar untuk "Membuat Tombol Download, Demo, Buy Now Keren di Blogger"
Harap memberikan komentar dengan bijak dan sesuai artikel yang dibaca. Mohon jangan spam disini.