Hello sobat ICloudzer kali ini admin bakalan memberikan informasi mengenai bagaimana caranya membuat tombol download switch atau slide diblogger keren dan mudah pastinya
Info: Jika kamu sudah penasaran yuk langsung aja kita bahas bersama sama okay
Tombol Switch
Tombol download yang bisa switch atau bisa digeser tersebut ketika kamu menyentuh tombolnya maka tombol tersebut akan otomatis tergeser sebelum tombol tersebut mengarahkan kehalaman url yang disematkan didalamnya
Fungsi
Sebenarnya tombol switch tersebut bukan hanya untuk menampilkan tombol download namun juga untuk bia menyematkan url apapun yang kamu inginkan didalam tombol switch tersebut
Dibuat Menggunakan CSS
Pada tampilan tombol switch diblogger ini hanya dibuat menggunakan kode CSS saja, jadi tidak membuat blog anda menjadi berat dan pastinya akan lebih responsif karena pembuatannya dibuat menggunakan kode CSS
Contoh Tampilan
Sebagai pelengkapnya admin bakalan memberikan contoh tampilan mengenai sebuah tombol download diblogger yang bisa digeser ketika tombol tersebut disentuh, berikut ini adalah contoh tampilan nya
Info: Bagaimana sobat dengan contoh tampilannya keren bukan 😉
Cara Pembuatan
Baiklah admin bakalan memberikan penjelasan mengenai bagaimana caranya membuat tombol download switch diblogger, baca dan pelajari artikel kali ini hingga selesai okay, biar tida salah paham
Kode CSS
Seperti biasanya langkah pertama yang bisa kamu lakukan adalah menyalin kode CSS dibawah ini, kemudian kamu bia meletakkannya diatas kode ]]><b:skin>
#rahTombol { margin:20px auto; text-align:center; }
#rahTombol br { display:none; }
.rahSlide2 { position:relative; display:inline-block; height:50px; width:200px; line-height:50px; padding:0; border-radius:50px; background:#fdfdfd; border:2px solid #dc143c; margin:10px; transition:.5s; }
.rahSlide2 { border:2px solid #dc143c; }
.rahSlide2:hover { background-color:#dc143c; }
.rahSlide2:hover span.circle2 { left:100%; margin-left:-45px; background-color:#fdfdfd; color:#dc143c; }
.rahSlide2:hover span.circle2 { color:#dc143c; }
.rahSlide2:hover span.title2 { left:40px; opacity:0; }
.rahSlide2:hover span.title-hover2 { opacity:1; left:40px; }
.rahSlide2 span.circle2 { display:block; background-color:#F9690E; color:#fff; position:absolute; float:left; margin:5px; line-height:42px; height:40px; width:40px; top:0; left:0; transition:.5s; border-radius:50%; }
.rahSlide2 span.circle2 { background-color:#dc143c; }
.rahSlide2 span.title2,.rahSlide2 span.title-hover2 { position:absolute; left:90px; text-align:center; margin:0 auto; font-size:16px; font-weight:bold; color:#dc143c; transition:.5s; }
.rahSlide2 span.title2,.rahSlide2 span.title-hover2 { color:#dc143c; left:80px; }
.rahSlide2 span.title-hover2 { left:80px; opacity:0; }
.rahSlide2 span.title-hover2 { color:#fff; }Info: Atau kamu bisa menggunakan tag kode <style> untuk meletakkan kode CSS tersebut
Kode HTML
Langkah selanjutnya setelah kamu menyimpan kode CSS tersebut, kamu bisa menggunakan kode HTML dibawah ini untuk menampilkan Tombol Switch nya
<div id="rahTombol" style="text-align: center;">
<a class="rahSlide2" href="Url_anda_disini" rel="nofollow" target="_blank">
<span class="circle2">
<i class="fa fa-download">
</i>
</span>
<span class="title2">
Download
</span>
<span class="title-hover2">
Klik disini
</span>
</a>
</div>Info: Kamu harus menggunakan mode HTML ketika ingin menggunakan kode diatas okay