Cara Membuat Auto Scroll Pada Blogger - WESTOIKU

Berikut cara membuat auto scroll pada postingan blogger , sehingga bisa memudahkan pengunjung agar tetap berada di dalam postingan tanpa harus men scroll halaman , karna sudah di lengkapi dengan scroll otomatis , sehingga artikel berjalan dengan sendirinya..

Biasanya kita jumpai pada blog yang membahas tentang chord kunci gitar , gunanya untuk memudahkan pengunjung agar bisa tetap main gitar dan tangan tidak sibuk untuk men scroll ke bawah ,, !!

Walaupun blog sobat bukan membahas tentang chord kunci gitar , tetapi tidak ada salahnya apabila di pasang menu auto scroll otomatis.

Untuk cara pembuatanya cukup mudah , sobat tinggal pasang kode script di bawah ini dan masukan kode kedalam template blogger milik sobat .

Manfaat Dari Memasang Auto Scroll Di Blogger

Tanpa kita sadari , ternyata memasang auto scroll otomatis di blog ada manfaatnya :

•  Tampilang Blogger Terlihat Keren.
•  Memudahkan Pengunjung , karna Bisa Berjalan Otomatis.
•  Blog Terlihat Beda Dari Yang Lainya.
•  Menu Blogger Menjadi Lebih Lengkap.
•  Tidak Mengganggu Tampilan Postingan karna bisa di sembunyikan.
•  Untuk Konten Chord Kunci Gitar Tentunya Sangat Dibutuhkan.

Untuk tampilanya kurang lebih seperti ini ,

Berikut adalah tampilan auto scroll , tetapi gambar disini sudah saya modifikasi ,

Jadi mungkin tampilanya akan berbeda...!!

Jika sobat penasaran , sobat bisa lihat di 

DEMO

Ukuran speed nya dari 1-5 

Jika sobat sudah tidak sabar ingin membuatnya ,

Yuk simak artikel dibawah dengan benar.

Cara Membuat Auto Scroll Di Blogger

Sebelum memasukan kode script , silahkan sobat baca ini dulu. !!

Catatan :

Alangkah baiknya sobat backup terlebih dahulu template blogger milik sobat , apabila terjadi error bisa segera dipulihkan.

Pada pemasangan ini , sobat harus memasuki area edit html.

Ada dua tahap ,

Yaitu sobat harus mencari kode 

</style>  dan  </body>

1. Buka Akun Blogger.

2. Pilih Thema , Edit HTML

Cari kode   </style>

Lalu taruh kode ini tepat atasnya

ini code nya gaes..

/* 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 cari kode  </body>

Taruh kode ini tepat di atasnya

ini code nya gaes..

<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>

Klik Simpan Thema.

Selesai , semoga berhasil.

Itulah tutorial cara membuat auto scroll pada blogger.