Hello sobat icloudZer kali ini admin bakalan memberikan informasi blogger mengenai bagaimana kah caranya membuat tombol back to top beserta progres scroll secara otomatis di blogger
Info: Jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Tombol BTT
Maaf ya agar lebih gampang admin singkat penyebutannya menjadi BTT!? BTT merupakan pengertian dari back to top yang mana tombol tersebut berfungsi untuk mengarahkan si pengklik ke halaman atas pada suatu website, telah banyak pengguna website yang menggunakan back to top, karena pembuatannya yang mudah dan penggunaan nya juga sangat penting bagi website itu sendiri, oh iya pada postingan admin sebelumnya juga pernah membahas megenai back to top di blogger jika penasaran langsung aja klik link ini untuk melihat postingan mengenai back to top
Menggunakan Progress Scroll
Yang unik dari tombol back to top tersebut adalah penggunaan fitur progress scrollnya! apakah itu progres scroll? secara simplenya progres scroll berfungsi layaknya animasi, namun hanya tampil pada saat di scroll ke atas ataupun ke bawah saja, biasanya progres scroll di gunakan pengguna blogger dan website pada halaman atas blog tepatnya di bagian atas header blog namun saat ini progres scroll telah banyak di kembangan alias di kolaborasikan dengan tampilan yang beraneka macam sehingga membuat blog ataupun website semakin menarik tentunya
Menggunakan javascript
Dalam membuat tombol back to top beserta fitur progres scroll di blogger tersebut di buat khusus menggunakan kode javascript, sedangkan pada tampilan tombol back to top tersebut di buat menggunakan kode CSS saja, jika di tanya soal kecepatan, script ataupun kode pembuat tombol back to top beserta progres scroll tersebut tidak menghambat kelanjutan blog ataupun website anda
Contoh Tampilan
Jika kamu masih bingung mengenai tombol back to top beserta progres scroll tersebut silahkan gunakan tombol di bawah ini untuk melihatnya
Info: Bagaimana sobat icloudZer dengan contoh tampilan nya keren sekali yak
Cara pembuatan
Baiklah sekarang saatnya admin bakalan menjabarkan mengenai bagaimana caranya membuat tombol back to top beserta progres scroll tersebut di blogger, harap bagi kamu untuk mempelajari nya secara benar dan perlahan ok
Kode CSS
Langkah pertama seperti biasanya kamu bisa salin kode CSS di bawah ini kemudian kamu bisa meletakkan nya di atas kode ]]></b:skin>
/* Backtotop by Icloudice.com */
.rah-bTop{position:fixed;right:20px;bottom:20px;height:40px;width:40px;display:block;background:#f7f7f7;border-radius:50px;box-shadow:inset 0 0 0 2px rgba(255,255,255,0.2),rgba(0,0,0,0.07) 0 1px 1px,rgba(0,0,0,0.07) 0 2px 2px,rgba(0,0,0,0.07) 0 4px 4px,rgba(0,0,0,0.07) 0 8px 8px,rgba(0,0,0,0.07) 0 16px 16px;z-index:51;opacity:0;visibility:hidden;transform:translateY(15px);-webkit-transition:all 200ms linear;transition:all 200ms linear}
.rah-bTop svg.progress-circle{width:100%!important;height:100%!important}
.rah-bTop.active-progress{opacity:1;visibility:visible;transform:translateY(0)}
.rah-bTop svg.line{strocke:#48525c;stroke-width:2;position:absolute;text-align:center;line-height:40px;left:8px;top:7px;height:24px;width:24px;display:block;z-index:51;-webkit-transition:all 100ms linear;transition:all 100ms linear}
.rah-bTop:hover::before{opacity:1}
.rah-bTop svg path{fill:none}
.rah-bTop svg.progress-circle path{stroke:#3291d1;stroke-width:5;box-sizing:border-box;-webkit-transition:all 100ms linear;transition:all 100ms linear}
@media screen and (max-width:480px){.rah-bTop{right:10px;bottom:50px;height:40px;width:40px}.rah-bTop svg.line{left:8px;top:7px;}}.dark-mode .rah-bTop{background:#1c2733}.dark-mode .rah-bTop svg.progress-circle path{stroke:yellow}Info: Atau kamu bisa menggunakan tag kode <style> untuk meletakkan kode CSS di atas
Kode HTML
Langkah selanjutnya yang bisa kamu lakukan adalah dengan menyalin lagi kode HTML di bawah ini kemudian kamu bisa meletakkan nya di atas kode </body>
<div class="rah-bTop" data-tooltip="Scroll" onclick="window.scrollTo({top: 0})">
<svg class="progress-circle svg-content" height="100%" viewbox="-1 -1 102 102" width="100%">
<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98">
</path>
</svg>
<svg class="line" fill="none" stroke="##de3535" viewbox="0 0 24 24">
<g transform="translate(12.000000, 12.000000) rotate(-180.000000) translate(-12.000000, -12.000000) translate(5.000000, 8.500000)">
<path d="M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0">
</path>
</g>
</svg>
</div>Info: Fungsi kode HTML di atas adalah untuk menampilkan tombol back to top beserta progress scroll nya
Kode Javascript
Masih belum selesai, kamu harus menyalin lagi kode javascript di bawah ini kemudian letakkan kode tersebut tepat di atas kode </body>
<script>
/*<![CDATA[*/
/* BackToTop by www.icloudice.com */
var _0x5a80=["\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C","\x23\x72\x61\x68\x6D\x73\x67\x2D\x6E\x74\x66","\x71\x75\x65\x72\x79\x53\x65\x6C\x65\x63\x74\x6F\x72","\x3C\x73\x70\x61\x6E\x3E\x4B\x65\x72\x65\x6E\x20\x73\x65\x6B\x61\x6C\x69\x20\x6B\x61\x6E\x20\x73\x6F\x62\x61\x74\x20\x69\x63\x6C\x6F\x75\x64\x5A\x65\x72\x21\x3C\x2F\x73\x70\x61\x6E\x3E","\x2E\x72\x61\x68\x2D\x62\x54\x6F\x70\x20\x70\x61\x74\x68","\x67\x65\x74\x54\x6F\x74\x61\x6C\x4C\x65\x6E\x67\x74\x68","\x74\x72\x61\x6E\x73\x69\x74\x69\x6F\x6E","\x73\x74\x79\x6C\x65","\x57\x65\x62\x6B\x69\x74\x54\x72\x61\x6E\x73\x69\x74\x69\x6F\x6E","\x6E\x6F\x6E\x65","\x73\x74\x72\x6F\x6B\x65\x44\x61\x73\x68\x61\x72\x72\x61\x79","\x20","\x73\x74\x72\x6F\x6B\x65\x44\x61\x73\x68\x6F\x66\x66\x73\x65\x74","\x67\x65\x74\x42\x6F\x75\x6E\x64\x69\x6E\x67\x43\x6C\x69\x65\x6E\x74\x52\x65\x63\x74","\x73\x74\x72\x6F\x6B\x65\x2D\x64\x61\x73\x68\x6F\x66\x66\x73\x65\x74\x20\x31\x30\x6D\x73\x20\x6C\x69\x6E\x65\x61\x72","\x73\x63\x72\x6F\x6C\x6C\x54\x6F\x70","\x68\x65\x69\x67\x68\x74","\x73\x63\x72\x6F\x6C\x6C","\x61\x63\x74\x69\x76\x65\x2D\x70\x72\x6F\x67\x72\x65\x73\x73","\x61\x64\x64\x43\x6C\x61\x73\x73","\x2E\x72\x61\x68\x2D\x62\x54\x6F\x70","\x72\x65\x6D\x6F\x76\x65\x43\x6C\x61\x73\x73","\x6F\x6E","\x72\x65\x61\x64\x79"];function rahpesan(){document[_0x5a80[2]](_0x5a80[1])[_0x5a80[0]]= _0x5a80[3],rahNeon(3500)}$(document)[_0x5a80[23]](function(){var _0x9e73x2=document[_0x5a80[2]](_0x5a80[4]);var _0x9e73x3=_0x9e73x2[_0x5a80[5]]();_0x9e73x2[_0x5a80[7]][_0x5a80[6]]= _0x9e73x2[_0x5a80[7]][_0x5a80[8]]= _0x5a80[9];_0x9e73x2[_0x5a80[7]][_0x5a80[10]]= _0x9e73x3+ _0x5a80[11]+ _0x9e73x3;_0x9e73x2[_0x5a80[7]][_0x5a80[12]]= _0x9e73x3;_0x9e73x2[_0x5a80[13]]();_0x9e73x2[_0x5a80[7]][_0x5a80[6]]= _0x9e73x2[_0x5a80[7]][_0x5a80[8]]= _0x5a80[14];var _0x9e73x4=function(){var _0x9e73x5=$(window)[_0x5a80[15]]();var _0x9e73x6=$(document)[_0x5a80[16]]()- $(window)[_0x5a80[16]]();var _0x9e73x7=_0x9e73x3- (_0x9e73x5* _0x9e73x3/ _0x9e73x6);_0x9e73x2[_0x5a80[7]][_0x5a80[12]]= _0x9e73x7};_0x9e73x4();$(window)[_0x5a80[17]](_0x9e73x4);var _0x9e73x8=50;var _0x9e73x9=550;jQuery(window)[_0x5a80[22]](_0x5a80[17],function(){if(jQuery(this)[_0x5a80[15]]()> _0x9e73x8){jQuery(_0x5a80[20])[_0x5a80[19]](_0x5a80[18])}else {jQuery(_0x5a80[20])[_0x5a80[21]](_0x5a80[18])}})})/*]]>*/
</script>Info: Kode javascript di atas jangan di edit entar fungsi back to topnya tidak tampil alias tidak berfungsi lagi