For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Membuat back to top beserta progres scroll di blogger

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

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
Best Viral Premium Blogger Templates from Icloudice


kami menawarkan berbagai template blogger dan produk istimewa untuk anda, support karya anak bangsa dengan membeli produk yang kami jual

Welcome to my store limited

  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Cookie Consent
    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
    Oops!
    It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
    AdBlock Detected!
    We have detected that you are using adblocking plugin in your browser.
    The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
    Site is Blocked
    Sorry! This site is not available in your country.