Cara Memasang Auto Scroll Page di Blogger

Cara Memasang Auto Scroll Page di Blogger

Snippet Tips Blogger

SobatMasbro

September 20, 2020

SobatMasbro - Saat ini hampir semua blog itu berisi konten membaca bacaan seperti cerita novel, tutorial, gaya hidup, pendidikan dan masih banyak lagi website yang berisi banyak bacaan. Bacaannya pun hingga puluhan halaman bahkan lebih dari itu, sehingga pembaca melakukan scrolling atau menggulirkan halaman yang mereka baca.

Nah jika blog sobat kontennya berisi banyak bacaan, saya punya tool agar scrollingnya tidak perlu manual oleh tangan pada smartphone atau laptop sobat. Tujuannya agar tidak bosan, tidak pegal, dan memudahkan kita semua terutama pembacanya. 

Tidak hanya itu, blog sobat juga bisa menjadi daya tarik tersendiri bagi pembacanya sehingga blog sobat nyaman dan ramai pengunjung.

Auto Scroll Page yang saya buat ini ada 5 kecepatan yang berbeda-beda dari yang lambat hingga yang cepat, jadi sobat bisa mengaturnya sesuai dengan yang sobat atau pembaca inginkan. Untuk demonya ada disebelah kanan blog saya tinggal klik tombol fixednya.

Memasang Auto Scroll Page atau Halaman Scroll Otomatis

• Buka blogger.com
• Lalu buka menu Template > Edit HTML
• Copy CSS dibawah ini dan paste tepat diatas kode </style> agar mudah mencarinya tekan Ctrl+F

/* Speed SobatMasbro */
.speedsobatmasbro{position:fixed;right:0px;top:35%;background:#fff;padding:10px;float:right;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 3px rgba(0,0,0,0.13);z-index:99}.ngaran{font-size:12px;font-weight:500;color:#222;text-align:center;padding-bottom: 7px;}.speedbar{background:rgb(0, 204, 0);width:32px;height:17px;margin:0 auto;margin-top:4px}.stopmasbro{background:#ff0000;width:32px;margin:0 auto;margin-top:12px;border-radius:3px;font-size:11px;padding:4px 0px 4px 0px;text-align:center;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 3px rgba(0,0,0,0.13);cursor:pointer}
/* SpeedToggle */
.speedtoggle{background:#fff;background-size:100%;color:#222;font-size:1.4em;width:42px;height:42px;line-height:38px;outline:0;z-index:90;top:28%;right:45px;position:fixed;border-radius:99em;padding:0;text-align:center;cursor:pointer;opacity:1;box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 3px rgba(0,0,0,0.13);transition:all .25s;}.speedtoggle:hover{box-shadow: 0 4px 8px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.13);}

• Selanjutnya tambahkan Javascript sekaligus HTML dibawah ini.
• Copy script dibawah ini dan paste tepat diatas kode </body>

<script type='text/javascript'>
//<![CDATA[ // Jangan diedit lagi! Nanti ERROR !! //
var speed=1;var disp=0;var handle;var currentspeed=0;var status=1;var currentpos=0,alt=1,curpos1=0,curpos2=-1;var color=new Array();color[1] = "#ddd";color[2] = "#ccc";color[3] = "#bbb";color[4] = "#aaa";color[5] = "#999";var interval=new Array(400,300,200,100,30);function scrollwindow(){if (status==1){if (document.all && !document.getElementById) temp=document.body.scrollTop;else temp=window.pageYOffset;if (alt==0) alt=2;else alt=1;if (curpos1!=curpos2){if (document.all) currentpos=document.body.scrollTop+speed;else currentpos=window.pageYOffset+speed;window.scroll(0,currentpos);}else{currentpos=0;window.scroll(0,currentpos);}}}function startit(s){status=1;currentspeed=s;clearInterval(handle);handle = setInterval("scrollwindow()",interval[s]);}function stopit(){currentspeed=0;for (i=1;i<=5;i++) {document.getElementById('speed'+i).style.backgroundColor=color[i];}status=0;}
function resetBg(n) {for (i=1;i<=5;i++) {document.getElementById('speed'+i).style.backgroundColor=color[i];}for (i=1;i<=currentspeed;i++) {document.getElementById('speed'+i).style.backgroundColor="#00cc00";}}function changeBg(n) {for (i=1;i<=5;i++) {document.getElementById('speed'+i).style.backgroundColor=color[i];}for (i=1;i<=n;i++) {document.getElementById('speed'+i).style.backgroundColor="#00cc00";}}function tooglespeed() {if (disp==0) {disp=1;document.getElementById('speedsobatmasbro').style.display='';document.getElementById('speedtoogle').innerHTML='<svg viewBox="-8 -8 34 34"><path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z" fill="#222"/></svg>';document.getElementById('speedtoogle');}else {disp=0;document.getElementById('speedsobatmasbro').style.display='none';document.getElementById('speedtoogle').innerHTML='<svg viewBox="-9 -9 42 42"><path d="M6 2v6h.01L6 8.01 10 12l-4 4 .01.01H6V22h12v-5.99h-.01L18 16l-4-4 4-3.99-.01-.01H18V2H6zm10 14.5V20H8v-3.5l4-4 4 4zm-4-5l-4-4V4h8v3.5l-4 4z" fill="#222"/></svg>';document.getElementById('speedtoogle');}}function calcHeight(){var the_height=document.getElementById('sobatmasbro').contentWindow.document.body.scrollHeight;document.getElementById('sobatmasbro').height=the_height;}//script created by https://sobatmasbro.blogspot.com//
//]]></script><html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<div class='speedtoggle' onclick='tooglespeed();' title='Auto Scroll'><svg viewBox='-11 -11 47 47'><path d='M6 2v6h.01L6 8.01 10 12l-4 4 .01.01H6V22h12v-5.99h-.01L18 16l-4-4 4-3.99-.01-.01H18V2H6zm10 14.5V20H8v-3.5l4-4 4 4zm-4-5l-4-4V4h8v3.5l-4 4z' fill='#222'/></svg></div>
<div class='speedsobatmasbro' id='speedsobatmasbro' style='display: none;'>
  <div class='speedsobat'>              
<div class='ngaran'>Speed</div>
<div class='speedbar' id='speed5' onclick='startit(5);' onmouseout='resetBg();' onmouseover='this.style.cursor=&apos;pointer&apos;;changeBg(5);' title='Speed 5X'/>      
<div class='speedbar' id='speed4' onclick='startit(4);' onmouseout='resetBg();' onmouseover='this.style.cursor=&apos;pointer&apos;;changeBg(4);' title='Speed 4X'/>  
<div class='speedbar' id='speed3' onclick='startit(3);' onmouseout='resetBg();' onmouseover='this.style.cursor=&apos;pointer&apos;;changeBg(3);' title='Speed 3X'/>                       
<div class='speedbar' id='speed2' onclick='startit(2);' onmouseout='resetBg();' onmouseover='this.style.cursor=&apos;pointer&apos;;changeBg(2);' title='Speed 2X'/>
<div class='speedbar' id='speed1' onclick='startit(1);' onmouseout='resetBg();' onmouseover='this.style.cursor=&apos;pointer&apos;;changeBg(1);' title='Speed 1X'/> 
<div class='stopmasbro' onclick='stopit();' title='Berhentikan'>Stop</div>
  </div><div class='speedtoggle' id='speedtoogle' onclick='tooglespeed()' title='Tutup Auto Scroll'><svg viewBox='-8 -8 34 34'><path d='M6 2v6h.01L6 8.01 10 12l-4 4 .01.01H6V22h12v-5.99h-.01L18 16l-4-4 4-3.99-.01-.01H18V2H6zm10 14.5V20H8v-3.5l4-4 4 4zm-4-5l-4-4V4h8v3.5l-4 4z' fill='#222'/></svg></div></div>
  </html>

• Selesai, Save Template dan lihat hasilnya.

Gimana sob? sudah bisa digunakan? Oke sob, cukup sekian untuk postingan kali ini Cara Memasang Auto Scroll Page/Halaman di Blogger semoga dapat digunakan dengan baik.

Jika ada error, kesalahan ataupun ada yang ditanyakan silahkan berkomentar dibawah ini. Semoga bermanfaat dan terima kasih.

SobatMasbro September 20, 2020