RahmanCyber.NET | Blogger - Sebenarnya menambah banyak script di blog itu dapat menambah waktu load ya teman teman, jadi sebelum memulai, kalian perlu mengerti dampaknya, tetapi kalo efeknya itu untuk kenyamanan dalam berselancar di website kita, anggap aja dunia kita.. jadi tiap orang saling mengunjungi Dunia orang lain melalui media blog..
{getToc} $title={Table of Contents}
karena disitu ada berbagai macam pemikiran layaknya menulis sebuah buku, jadi pengunjung berhak untuk stay atau memilih tempat lain... Kheren Kan?
Tipe Pengunjung Blog
Iya dong, maka dari itu kadang untuk membangun tempat yang nyaman untuk pengunjung supaya betah untuk berkunjung di tempat kita itu memang gampang gampang susah.. hehe, ya karena tipe pengunjung itu beragam.. ada yang bosen jika tempatnya monoton.. masak dunia satu sama lainnya sama...?
Ada yang gak terlalu suka keramaian.. pengennya yang cepat dan simple langsung ke inti.. ada juga yang ia gak memperhatikan itu.. pokoknya kalau dia butuh sesuatu mau tempatnya simple gak ramai, ataupun ramai.. dia enjoy aja yang penting apa yang ia inginkan ia dapatkan.. ^_^
Nah, kadang kita pun, kadang mengambil tengah tengahnya... jadi supaya banyak kalangan bisa masuk dan syukur syukur tertarik untuk berkunjung. Intinya semakin ramai, maka sumber daya yang dibutuhkan semakin banyak, sedangkan semakin sepi, maka sumber daya yang dibutuhkan akan lebih sedikit.
Ramai / Sepi
Ramai dan Sepi ini di analogikan sebagai widget dan pernak pernik blog, mencangkup berbagai efek yang disematkan didalam blog itu sendiri sehingga menjadi ciri khas tersendiri tiap blog tersebut.
Efek Scrolling pada Blog
Begitupun juga efek yang kita bahas ini, yaitu Efek Scrolling, efek yang akan terlihat ketika layar di gulir ke atas maupun ke bawah. Sebenarnya kita sudah bahas apa sih itu scrolling dan lainnya di postingan kita sebelumnya yaitu tentang Smooth scrolling pada Table of Content Otomatis, dimana perbedaannya adalah kalo kemarin itu muncul ketika klik / onclick, sedangkan ini itu.. gulir biasa..
Jadi apabila pengunjung membaca sudah melewati akhir dari screen maka halaman akan berada pada fungsi scroll.
Jadi bayangannya sebuah halaman web yang panjang melewati layar, itu dimuat.. ada yang pakai lazy load image, artinya gambar yang belum terjangkau tampilan layar itu secara otomatis belum di load, dimana ini akan mempercepat waktu loading di awal pemuatan.
Tetapi ini hanya material gambar saja, atau video juga.. tergantung script yang dipakai, sedangkan untuk lain lainnya tetap dimuat.. nah sehingga sebenarnya halaman web panjang itu sudah dimuat..
Smooth Scrolling
Fungsi dari smooth scrolling ini adalah agar pergeseran atas bawah atau bawah ke atas itu bisa halus, atau tidak kasar.. jadi pengunjung kira kira masih bisa membaca teks walaupun ada pergerakan keatas, seakan akan gerakannya itu enggak terlalu nampak.
Cara Memberi Efek Smooth Scrolling di Website berbasis Blogger
Pada inti pembahasan ini, kita langsung praktek ya teman teman, jadi bisa langsung kalian terapkan di website kalian.
1. Kalian masuk dulu ke Dashboard Blogger
2. Silahkan kalian menuju ke tab Tema ⇒ Klik Icon Segitiga kebawah ⇒ Edit HTML
3. Setelah itu kalian cari kode akhiran body seperti ini </body>. Untuk memudahkan kalian dalam mencari, silahkan tekan tombol Ctrl + F di keyboard kalian. Lalu ketik </body> di kolom pencarian tersebut.
4. Kalau udah ketemu, langkah selanjutnya adalah Copy / Ctrl+ C script dibawah ini dan Pastekan / Ctrl + V tepat diatas kode </body>
berikut ini adalah kodenya
<script type="text/javascript">
/*<![CDATA[*/
// Script Smooth Scroll - Publish by RahmanCyber.NET
!function(){function e(){var e=!1;e&&c("keydown",r),v.keyboardSupport&&!e&&u("keydown",r)}function t(){if(document.body){var t=document.body,o=document.documentElement,n=window.innerHeight,r=t.scrollHeight;if(S=document.compatMode.indexOf("CSS")>=0?o:t,w=t,e(),x=!0,top!=self)y=!0;else if(r>n&&(t.offsetHeight<=n||o.offsetHeight<=n)){var a=!1,i=function(){a||o.scrollHeight==document.height||(a=!0,setTimeout(function(){o.style.height=document.height+"px",a=!1},500))};if(o.style.height="auto",setTimeout(i,10),S.offsetHeight<=n){var l=document.createElement("div");l.style.clear="both",t.appendChild(l)}}v.fixedBackground||b||(t.style.backgroundAttachment="scroll",o.style.backgroundAttachment="scroll")}}function o(e,t,o,n){if(n||(n=1e3),d(t,o),1!=v.accelerationMax){var r=+new Date,a=r-C;if(a<v.accelerationDelta){var i=(1+30/a)/2;i>1&&(i=Math.min(i,v.accelerationMax),t*=i,o*=i)}C=+new Date}if(M.push({x:t,y:o,lastX:0>t?.99:-.99,lastY:0>o?.99:-.99,start:+new Date}),!T){var l=e===document.body,u=function(){for(var r=+new Date,a=0,i=0,c=0;c<M.length;c++){var s=M[c],d=r-s.start,f=d>=v.animationTime,h=f?1:d/v.animationTime;v.pulseAlgorithm&&(h=p(h));var m=s.x*h-s.lastX>>0,w=s.y*h-s.lastY>>0;a+=m,i+=w,s.lastX+=m,s.lastY+=w,f&&(M.splice(c,1),c--)}l?window.scrollBy(a,i):(a&&(e.scrollLeft+=a),i&&(e.scrollTop+=i)),t||o||(M=[]),M.length?E(u,e,n/v.frameRate+1):T=!1};E(u,e,0),T=!0}}function n(e){x||t();var n=e.target,r=l(n);if(!r||e.defaultPrevented||s(w,"embed")||s(n,"embed")&&/.pdf/i.test(n.src))return!0;var a=e.wheelDeltaX||0,i=e.wheelDeltaY||0;return a||i||(i=e.wheelDelta||0),!v.touchpadSupport&&f(i)?!0:(Math.abs(a)>1.2&&(a*=v.stepSize/120),Math.abs(i)>1.2&&(i*=v.stepSize/120),o(r,-a,-i),void e.preventDefault())}function r(e){var t=e.target,n=e.ctrlKey||e.altKey||e.metaKey||e.shiftKey&&e.keyCode!==H.spacebar;if(/input|textarea|select|embed/i.test(t.nodeName)||t.isContentEditable||e.defaultPrevented||n)return!0;if(s(t,"button")&&e.keyCode===H.spacebar)return!0;var r,a=0,i=0,u=l(w),c=u.clientHeight;switch(u==document.body&&(c=window.innerHeight),e.keyCode){case H.up:i=-v.arrowScroll;break;case H.down:i=v.arrowScroll;break;case H.spacebar:r=e.shiftKey?1:-1,i=-r*c*.9;break;case H.pageup:i=.9*-c;break;case H.pagedown:i=.9*c;break;case H.home:i=-u.scrollTop;break;case H.end:var d=u.scrollHeight-u.scrollTop-c;i=d>0?d+10:0;break;case H.left:a=-v.arrowScroll;break;case H.right:a=v.arrowScroll;break;default:return!0}o(u,a,i),e.preventDefault()}function a(e){w=e.target}function i(e,t){for(var o=e.length;o--;)z[N(e[o])]=t;return t}function l(e){var t=[],o=S.scrollHeight;do{var n=z[N(e)];if(n)return i(t,n);if(t.push(e),o===e.scrollHeight){if(!y||S.clientHeight+10<o)return i(t,document.body)}else if(e.clientHeight+10<e.scrollHeight&&(overflow=getComputedStyle(e,"").getPropertyValue("overflow-y"),"scroll"===overflow||"auto"===overflow))return i(t,e)}while(e=e.parentNode)}function u(e,t,o){window.addEventListener(e,t,o||!1)}function c(e,t,o){window.removeEventListener(e,t,o||!1)}function s(e,t){return(e.nodeName||"").toLowerCase()===t.toLowerCase()}function d(e,t){e=e>0?1:-1,t=t>0?1:-1,(k.x!==e||k.y!==t)&&(k.x=e,k.y=t,M=[],C=0)}function f(e){if(e){e=Math.abs(e),D.push(e),D.shift(),clearTimeout(A);var t=D[0]==D[1]&&D[1]==D[2],o=h(D[0],120)&&h(D[1],120)&&h(D[2],120);return!(t||o)}}function h(e,t){return Math.floor(e/t)==e/t}function m(e){var t,o,n;return e*=v.pulseScale,1>e?t=e-(1-Math.exp(-e)):(o=Math.exp(-1),e-=1,n=1-Math.exp(-e),t=o+n*(1-o)),t*v.pulseNormalize}function p(e){return e>=1?1:0>=e?0:(1==v.pulseNormalize&&(v.pulseNormalize/=m(1)),m(e))}var w,g={frameRate:150,animationTime:800,stepSize:120,pulseAlgorithm:!0,pulseScale:8,pulseNormalize:1,accelerationDelta:20,accelerationMax:1,keyboardSupport:!0,arrowScroll:50,touchpadSupport:!0,fixedBackground:!0,excluded:""},v=g,b=!1,y=!1,k={x:0,y:0},x=!1,S=document.documentElement,D=[120,120,120],H={left:37,up:38,right:39,down:40,spacebar:32,pageup:33,pagedown:34,end:35,home:36},v=g,M=[],T=!1,C=+new Date,z={};setInterval(function(){z={}},1e4);var A,N=function(){var e=0;return function(t){return t.uniqueID||(t.uniqueID=e++)}}(),E=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||function(e,t,o){window.setTimeout(e,o||1e3/60)}}(),K=/chrome/i.test(window.navigator.userAgent),L="onmousewheel"in document;L&&K&&(u("mousedown",a),u("mousewheel",n),u("load",t))}();
/*]]>*/
</script>
Oke de, Kalo udah, langkah selanjutnya adalah..
5. Silahkan kalian Save Template , lalu kalian cek apakah ada perbedaan?
Itulah cara memasang Script Efek Smooth Scrolling pada Website berbasis Blogger, jadi kalo masih belum yakin... dalam keadaan masih berada di Edit Html, kalian Undo atau CTRL + Z , lalu Save Template... Hal ini akan mengembalikan Tampilan ke sebelumnya..
Jangan ditutup Tab yang kita buka.. ( Atau biar keliatan banget, kalian bisa buka web kalian di Hape, Smartphone / Tablet..
Setelah itu ulangi dari langkah nomor 4 (Tutorial ini jangan di tutup dulu, biar mudah copy pastenya..
Lalu kalau udah Save Template lagi
dan Bukalah di Tab Baru website kalian..( atau biar lebih yaqien, kalian bisa buka melalui hape dengan tambahan tab di browser lagi )
Lalu Bandingkan sama yang sebelumnya.. apakah ada perbedaan?
hehe
Penutup Pembahasan Efek Smooth Scrolling
Itulah efek smooth scrolling ya teman teman, tetap ingat poinnya.. jika kita menambah script maka akan menambah juga waktu load dan size / ukuran file pemuatan,
jadi jika memang dirasa sangat perlu, maka kalian bisa menambahkan.. tetapi jika memang sebenarnya Template yang sobat pakai di Blog udah Smooth untuk scrollingnya..
Maka Enggak usah ditambah kode ini lagi..
Sekian.. Moga Bermanfaat.
Jya...
F.N.A-RED