Cara Membuat Auto Scroll Pada Blogger
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
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='pointer';changeBg(5);' title='Speed 5X'/>
<div class='speedbar' id='speed4' onclick='startit(4);' onmouseout='resetBg();' onmouseover='this.style.cursor='pointer';changeBg(4);' title='Speed 4X'/>
<div class='speedbar' id='speed3' onclick='startit(3);' onmouseout='resetBg();' onmouseover='this.style.cursor='pointer';changeBg(3);' title='Speed 3X'/>
<div class='speedbar' id='speed2' onclick='startit(2);' onmouseout='resetBg();' onmouseover='this.style.cursor='pointer';changeBg(2);' title='Speed 2X'/>
<div class='speedbar' id='speed1' onclick='startit(1);' onmouseout='resetBg();' onmouseover='this.style.cursor='pointer';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.