Membuat Hide/show Auto Scroll

Membuat Hide/show Auto Scroll

Tombol Show/hide Auto Scroll ini adalah perangkat yang sangat berguna untuk menggulung halaman sebuah blog dengan kecepatan yang bisa diatur, berbeda dengan yang pernah saya posting terdahulu yaituMembuat Auto Scroll/back to top dengan secara mudah langsung menuju halaman atas (silahkan klik disini untuk membedakannya). Widget hide/show Auto Scroll ini kegunaannya memang sangat membantu sekali untuk pembaca/pengunjung yang sedang membaca artikel dan cukup mengatur kecepatannya dari 1 sampai dengan  5 (high). Untuk demo-nya silahkan anda menggunakan widget auto scroll yang berada di sebelah kanan blog ini seperti gambar berikut ini 

Apabila anda tertarik untuk memasangnya berikut cara memasang show/hide auto scroll :
Masuk ke dashboard ► LAYOUT ► EDIT HTML ► centang Expand Widget Templates dan temukan bagian kode berikut. cari kode dibawah ini (tekan ctrl+F) : </head>
Setelah menemukannya salin kode berikut persis di atas kode </head>

<script src='http://h1.ripway.com/dadimulyadi/mgm-auto-sc.js' type='text/javascript'/>

Kemudian sisipkan kembali kode script berikut dibawah kode </head>

<style>
.speedbar {list-style-type:none;border:1px solid #424242;height:10px;margin-left:-40px;}
.capt {font-family:arial;font-size:8pt;color:#000000;margin-left:-5px;}
</style>

<div style='position:fixed;right:0px;top:250px;'>
<div id='speednav' style='background:#424242;padding:10px;float:right;width:24px;height:122px;display:none;'>
<div class='capt'>SPEED</div>
<ul>
<li style='list-style-type:none;border:0px;width:20px;margin-left:-40px;font-family:arial;font-size:7pt;color:#CCC;text-align:center;'>high</li>
<li class='speedbar' id='speed5' onclick='startit(5);' onmouseout='resetBg();' onmouseover='this.style.cursor=&apos;pointer&apos;;changeBg(5);' style='background:#999;width:20px;'/>
<li class='speedbar' id='speed4' onclick='startit(4);' onmouseout='resetBg();' onmouseover='this.style.cursor=&apos;pointer&apos;;changeBg(4);' style='background:#aaa;width:20px;'/>
<li class='speedbar' id='speed3' onclick='startit(3);' onmouseout='resetBg();' onmouseover='this.style.cursor=&apos;pointer&apos;;changeBg(3);' style='background:#bbb;width:20px;'/>
<li class='speedbar' id='speed2' onclick='startit(2);' onmouseout='resetBg();' onmouseover='this.style.cursor=&apos;pointer&apos;;changeBg(2);' style='background:#ccc;width:20px;'/>
<li class='speedbar' id='speed1' onclick='startit(1);' onmouseout='resetBg();' onmouseover='this.style.cursor=&apos;pointer&apos;;changeBg(1);' style='background:#ddd;width:20px;'/>
<li class='speedbar' onclick='stopit();' onmouseover='this.style.cursor=&apos;pointer&apos;;' style='font-family:arial;font-size:7pt;color:#CCC;text-align:center;width:20px;height:12px;'>stop</li>
</ul>
</div>
<div id='speedtoogle' onclick='tooglespeed()' onmouseout='this.style.backgroundColor=&apos;#2E2E2E&apos;;' onmouseover='this.style.backgroundColor=&apos;#2E2E2E&apos;;this.style.cursor=&apos;pointer&apos;;' style='float:right;background:#2E2E2E'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkI0uKJ-fj6UnG-NXqxtJ-RAJrOvKctnW0FhSQ0GGC5Bi9z5a34SLyh83g9qUMR8yIQXBmDOH_Li2Hk8v-G7aHBENl3U9x023xPVUTEtLSi-_x82AGcj4YuIzqI9SR9aLL9U9WJ0AlAms/s1600/showautoscroll.png' style='border-right:1px solid #2E2E2E;'/></div>
</div>

Langkah terakhir silahkan menekan tombol save template. sekian dan semoga cara pasang show auto scroll di blogger ini bermanfaat.

Posted in: Membuat Hide/show Auto Scroll