Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Tombol Demo dan Download di Blogger

Jika Anda memiliki situs blog yang membahas seputar desain blog atau coding tentunya sangat disarankan untuk membuat tombol demo dan download di Blogger. Dengan adanya tombol ini, akan sangat membantu pengunjung untuk menemukan hasil demo serta mengunduh script yang ada. Selain situs blog yang membahas coding, biasanya tombol yang satu ini seringkali ditemukan pada situs yang membagikan template blogger gratisan atau template bajakan yang dibagikan oleh banyak orang.

Sebenarnya saat ini sudah banyak sekali para blogger di Indonesia yang sudah membuat artikel cara membuat tombol demo dan download yang berbeda-beda. Namun, button atau tombol tersebut tidak memiliki gerakan animasi alias hanya diam saja. Oleh karena itu, pada tutorial kali ini saya akan membagikannya dengan versi yang berbeda yakni dengan menggunakan efek hover sehingga tombol demo dan download akan lebih terasa hidup.

Untuk menggunakan button yang akan saya bagikan di bawah ini diperlukan icon dari fontawesome, apabila tidak menggunakan font awesome. Maka, Anda bisa merubahnya dengan menggunakan icon SVG yang bisa didapatkan di internet. Agar tidak panjang lebar, yuk langsung saja ikuti panduan berikut:

Langkah 1 : Silahkan masuk ke dashboard blogger masing-masing.

Langkah 2 : Kemudian silahkan pilih Tema > lalu Edit HTML.

Langkah 3 : Selanjutnya silahkan letakkan kode CSS berikut ini di atas kode </head>.

<style>#btn-mahesweb {margin: 10px auto;
text-align: center;}
#btn-mahesweb br {display: none;}
.btn-mahesweb1, .btn-mahesweb2, .btn-mahesweb3 {position: relative;display: inline-block;height: 50px;width: 200px;line-height: 50px;padding: 0;border-radius: 50px;background: #fff;border: 2px solid #FF00FF;margin: 10px;transition: .5s}
.btn-mahesweb2 {border: 2px solid #FF00FF;}
.btn-mahesweb3 {border: 2px solid #9900FF;}
.btn-mahesweb1:hover {background-color: #CC00FF;}
.btn-mahesweb2:hover {background-color: #3f51b5;}
.btn-mahesweb3:hover {background-color: #d83500;}
.btn-mahesweb1:hover span.circle, .btn-mahesweb2:hover span.circle2, .btn-mahesweb3:hover span.circle3 {left: 100%;margin-left: -45px;background-color: #fdfdfd;}
.btn-mahesweb1:hover span.circle{color: #009688;}
.btn-mahesweb2:hover span.circle2 {color: #3f51b5;}
.btn-mahesweb3:hover span.circle3 {color: #d83500;}
.btn-mahesweb1:hover span.title, .btn-mahesweb2:hover span.title2, .btn-mahesweb3:hover span.title3 {left: 40px;opacity: 0;}
.btn-mahesweb1:hover span.title-hover, .btn-mahesweb2:hover span.title-hover2, .btn-mahesweb3:hover span.title-hover3 {opacity: 1;left: 40px;}
.btn-mahesweb1 span.circle, .btn-mahesweb2 span.circle2, .btn-mahesweb3 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-mahesweb2 span.circle2 {background-color: #3f51b5;}
.btn-mahesweb3 span.circle3 {background-color: #d83500;}
.btn-mahesweb1 span.title,.btn-mahesweb1 span.title-hover, .btn-mahesweb2 span.title2,.btn-mahesweb2 span.title-hover2,.btn-mahesweb3 span.title3, .btn-mahesweb3 span.title-hover3 {position: absolute;left: 90px;text-align: center;margin: 0 auto;font-size: 16px;font-weight: bold;color: #009688;transition: .5s;}
.btn-mahesweb2 span.title2,.btn-mahesweb2 span.title-hover2 {color: #3f51b5;left: 80px;}
.btn-mahesweb3 span.title3,.btn-mahesweb3 span.title-hover3 {color: #d83500;left: 80px;}
.btn-mahesweb1 span.title-hover, .btn-mahesweb2 span.title-hover2, .btn-mahesweb3 span.title-hover3 {left: 80px;opacity: 0;}
.btn-mahesweb1 span.title-hover, .btn-mahesweb2 span.title-hover2, .btn-mahesweb3 span.title-hover3 {
color: #fff;
}
#isi{margin:10 10 12px;font-size:16px;}</style>

Langkah 4 : Silahkan Save Template Anda.

Langkah 5 : Selesai.

Setelah langkah-langkah di atas sudah diterapkan dengan baik dan benar, maka langkah selanjutnya Anda sudah bisa menerapkannya di postingan yang diinginkan. Bagaimana caranya? Anda hanya perlu copy kode pemanggil CSS di atas menggunakan HTML di bawah ini:

<div id="btn-mahesweb"><a class="btn-mahesweb2" href="#" target="_blank">
<span class="circle2"><svg style="height: 22px; width: 24px;" viewbox="0 0 24 16">
<path d="M23,11H18A1,1 0 0,0 17,12V21A1,1 0 0,0 18,22H23A1,1 0 0,0 24,21V12A1,1 0 0,0 23,11M23,20H18V13H23V20M20,2H2C0.89,2 0,2.89 0,4V16A2,2 0 0,0 2,18H9V20H7V22H15V20H13V18H15V16H2V4H20V9H22V4C22,2.89 21.1,2 20,2Z" fill="currentColor"></path></svg></span>
<span class="title2">DEMO</span>
<span class="title-hover2">Klik Sini</span>
</a>
<a class="btn-mahesweb3" href="#" target="_blank">
<span class="circle3"><svg style="height: 22px; width: 24px;" viewbox="0 0 24 16">
<path d="M8 17V15H16V17H8M16 10L12 14L8 10H10.5V6H13.5V10H16M12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2M12 4C7.58 4 4 7.58 4 12C4 16.42 7.58 20 12 20C16.42 20 20 16.42 20 12C20 7.58 16.42 4 12 4Z" fill="currentColor">
</path></svg></span>
<span class="title3">UNDUH</span>
<span class="title-hover3">Klik sini</span>
</a>
</div>
<div class='isi'>

Rubah # menjadi URL Tujuan demo maupun file download masing-masing.

Itulah tutorial kali ini terkait dengan cara membuat tombol demo dan download di blogger dengan mudah hanya dengan CSS saja. Sehingga, tidak akan memberatkan loading blog Anda. Selamat mencoba!

Posting Komentar untuk "Cara Membuat Tombol Demo dan Download di Blogger"

X