Cara Membuat Tombol Download Dan Demo Keren Di Blogger
Cara Membuat Tombol Download Dan Demo Keren Di Blogger

Voizd.com
---
![]() |
Cara Membuat Tombol Download Dan Demo Keren Di Blogger |
Tombol download keren ini dapat digunakan dan sangat cocok untuk kamu yang memiliki blog dengan tema Download.selain itu efek ini juga memberikan efek transisi warna ketika digeser. Tanpa Berlama-lama yuk disimak Tutorialnya.
Cara Membuat Tombol Download Keren Diblogger.
1. Pertama-tama silahkan sobat masuk ke akun Blogger yang kamu miliki, Selanjunya pilih Tema - Lalu edit HTML.
2. Copy kode untuk Font Awesome berikut sebelum tag </head>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css' rel='stylesheet'/>
#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; }
4. Setelah itu silahkan masuk ke postingan yang ingin di tambahkan tombol keren ini, lalu pilih mode HTML.
5. Copy dan paste kode berikut untuk memasang tombol keren.
Pada href="#", silahkan ganti # dengan url yang dituju. Misal Voizd.com
<div id="btn-keren"> <a href="#" class="btn-keren1" target="_blank"> <span class="circle"><i class="fa fa-desktop"></i></span> <span class="title">Demo</span> <span class="title-hover">Click here</span> </a> <a href="#" class="btn-keren2" target="_blank"> <span class="circle2"><i class="fa fa-download"></i></span> <span class="title2">Download</span> <span class="title-hover2">Click here</span> </a> </div>
6. Jika sudah klik publish
Penutup
Demikianlah Tutorial Tentang Cara Membuat Tombol Download Dan Demo Keren Di Blogger, Semoga dapat memberikan manfaat kepada pembaca dan blog sobat terlihat lebih keren.
Post a Comment
Post a Comment