Cara Membuat Tombol Download, Demo & Buy Now di Blogger

Cara Membuat Tombol Download, Demo & Buy Now di Blogger - di artikel kali ini akan membahas tentag membuat tombol keren pada blogger.

Bila postingan  artikel kalian berisi Downlado, Tinjau (Demo), dan Belnja (Order) pastinya tombol ini sangat cocok untuk di kaborasikan.
Sebelum membuat hal yang harus di persiapkan seperti
  • Postingan blogger
  • Kode tombol  Download, Demo & Buy Now 

Bila poin di atas sudah siap semua kita menuju Cara Pembuatan Tombol Download, Demo & Buy Now keren di Blogger dengan mudah dan cepat, simak berikut

Tahp 1
Pemasangan kode script CSS pada HTML, Buka Dasbor Blogger pilih menu Tema lalu Edit HTML selanjutnya pemasangan kode Font Awesome di </head> 
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css' rel='stylesheet'/> 

Bila kode  Font Awesome sudah di pasang kita tidak usah melakukan pemasngan ulang.

Pemasangan kode CSS pada HTML pasang kode tersebuat di atas tag </style>
#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: 42px;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;
}

Tahap ke 2
Buat Postingan Blogger ubah postingna menjadi Tampilan HTML lalu  Copy Paste Kode yang sudah di sediakan di bawah.
<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>
<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>
<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>
Keterangan
Kode hesteg (#) ganti dengan link URL kalian

Hailnya 
Sekarang kalian sudah bisa Membuat Tombol Download, Demo & Buy Now di Blogger dengam mudah dan cepat dengan kode yang sudah di siapkan di artikel ini. Semoga bermanfaat, Trima kaasih.
Posting Komentar (0)
Lebih baru Lebih lama