Cara Mambuat Auto Scroll Otomatis Pada Halaman Blog

Auto scroll otomatis adalah fitur yang memungkinkan halaman blog secara otomatis bergulir atau bergerak ke bawah dengan sendirinya tanpa interaksi pengguna. Dalam konteks Blogger, fitur ini memungkinkan pembaca untuk menjelajahi konten yang lebih panjang dengan lebih mudah dan nyaman. Alih-alih harus terus-menerus menggulir manual, auto scroll otomatis mengambil alih tugas tersebut sehingga pengguna dapat lebih fokus pada konten yang sedang dibaca.

Keuntungan Auto Scroll Otomatis pada Blogger:

1. Mempermudah Navigasi: Auto scroll otomatis memungkinkan pengguna untuk melihat konten yang lebih panjang secara keseluruhan tanpa harus menggulir manual. Ini sangat berguna untuk artikel yang memiliki banyak paragraf atau konten yang perlu dibagikan secara teratur, seperti tutorial atau daftar.

2. Meningkatkan Keterlibatan: Dengan penggunaan auto scroll otomatis, pembaca akan cenderung lebih lama berinteraksi dengan konten Anda. Hal ini dapat meningkatkan tingkat keterlibatan dan mengurangi tingkat pentalan (bounce rate) karena pengguna merasa lebih tertarik dengan pengalaman yang lebih dinamis.

3. Memperkaya Desain Halaman: Fitur auto scroll otomatis dapat digunakan untuk memberikan efek visual yang menarik pada halaman blog Anda. Misalnya, Anda dapat mengatur kecepatan scroll, efek transisi, atau menggabungkannya dengan elemen desain lainnya seperti gambar latar belakang atau animasi. Ini membantu menciptakan tampilan yang unik dan mencolok, sehingga membedakan blog Anda dari yang lain.

Cara Mambuat Auto Scroll Otomatis Di Halaman Blog:

1. Buka blogger dan masuk ke bagian edit tema.

2. Salin kode di bawah ini dan tempelkan di atas kode </style>

/* 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);}

3. Setelah itu, salin kode di bawah ini dan tempelkan di atas 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>

4. Simpan dan lihat hasilnya

Kesimpulan:

Akan mudah bagi para pembaca di blog dengan fitur ini karena pengunjung tidak perlu lagi memakai jempol tangan untuk gulir ke bawah dan tinggal untuk fokus membaca saja.