Cara Membuat Tombol Auto Scroll Page Pada Blogger - Hkgankz

Cara Membuat Tombol Auto Scroll Page pada Blogger

Hkgankz - Scroll atau Scrolling adalah tindakan yang dilakukan untuk menggulir atau melihat lebih banyak. Saat ini banyak sekali situs-situs yang berisikan tentang Berita, Cerita, Novel, atau Penjelasan dari Ilmu maupun Artikulasi lainnya. Sehingga proses Scrolling atau menggulir ini pun memiliki peran yang penting bagi para pembaca.

Oleh karena itu, Jika Blog kalian atau Situs kalian berisikan dengan hal-hal tersebut yang lebih memiliki tujuan untuk pembaca situs kalian atau blog kalian untuk lebih melakukan scrolling dan menggulir. Kalian wajib membuat tombol Auto Scrolling Page pada Blog kalian maupun situs kalian. Sehingga memudahkan para pengunjung untuk menikmati isi dari blog dan situs kalian lebih lama lagi, tanpa perlu melakukan Scrolling dan Menggulir.

Tidak hanya itu saja, dengan menggunakan Tombol Auto Scroll Page pada blog dan situs kalian, Hal tersebut akan berdampak positif dan terlihat menarik dan nyaman bagi para pengunjung, apa lagi dengan adanya Tombol Auto Scroll Page, memungkinkan pengunjung untuk kembali lagi mengunjungi blog atau situs kalian. Sangat Hebat sih genkz.

Karena, jika pengunjung sudah merasa nyaman pada suatu blog atau situs, biasanya mereka akan mengingat nama blog atau situs tersebut. Contohnya "Wahh, enak nih baca novel di hkgankz.blogspot.com, ada Tombol Auto Scroll Page nya, jadi gak perlu repot Scrolling atau Menggulir". Kira-kira Seperti itu contohnya genkz :p

Berikut ini adalah penjelasan tentang Cara Membuat Tombol Auto Scroll Page pada Blogger, yang tentunya akan bermanfaat untuk kalian, dan silahkan coba untuk diterapkan pada blog atau situs kalian.

Tombol Auto Scroll Page ini memiliki 5 Jenis pilihan kecepatan scrolling page. Sehingga pengunjung dapat menentukan sendiri berapa cepat Tombol Auto Scroll Page ini berjalan dan aktif.

 
Sumber : Sobatmasbro

Langkah - Langkah Cara Membuat Tombol Auto Scroll Page pada Blogger :
- Buka Blogger.com
- Lalu buka menu Template > Edit HTML
- Copy CSS berikut ini dan Paste diatas kode </Style>

/* Speed hkgankz */
.speedhkgankz{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}.stopgankz{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);}
/* End */

- Selanjutnya tambahkan Javascript sekaligus HTML berikut ini
- Copy scriptnya 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('speedhkgankz').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('speedhkgankz').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('hkgankz').contentWindow.document.body.scrollHeight;document.getElementById('hkgankz').height=the_height;}//script created by https://hkgankz.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='speedhkgankz' id='speedhkgankz' style='display: none;'>
  <div class='speedgankz'>              
<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='stopgankz' 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 kemudian lihat hasilnya.

Catatan :
Silahkan undul file Notepad yang berisikan script diatas, jika kalian tidak bisa melkukan Copy Paste.
Unduh disini.

Bagaimana? apakah sudah muncul dihalaman blog kalian atau situs kalian? Jika mengalami kendala atau tidak muncul, coba kalian cek lagi apakah sudah mengikuti langkah - langkah Cara Membuat Tombol Auto Scroll Page pada Blogger dengan benar. Terimakasih sudah mengunjungi hkgankz.blogspot.com