Cara Memasang Lazy Load Image on Scroll di Blogger

Jagoandzgn.com - Sebenarnya tutorial ini sudah banyak saya share di blog ini kurang lebih 3 artikel sudah saya share, Tapi pada kali ini saya akan membagikan sebuah tutorial bagaimana cara memasang lazy load on scroll di blogger, Maksud dari on scroll adalah apabila pengunjung mengunjungi blog kamu dan dia harus mengscroll terlebih dahulu agar gambar muncul.

Apa Itu Lazy Load on Scrool ?

Apabila kamu sudah masuk ke sebuah situs yang menerapkan cara ini pada bagian Homepagenya kalian bisa lihat bagian gambar yang ada pada situs ini tidak akan tampil terkecuali jika ada action atau sebuah aksi yang dimana jika mouse melakukan scroll kebawah maka gambar akan terlihat. Dengan cara ini gambar tidak akan termuat kecuali jika sudah ada aksi dari user.

Cara Memasang Lazy Load on Scroll di Blogger

1. Silahkan kamu login ke Blogger.com dengan menggunakan Gmail kamu.
2. Masuk ke menu TEMA > klik Edit HTML.
3. Cari kode ]]></b:skin> atau </style> dan pastekan kode dibawah ini tepat DIATAS kode tersebut.

.wk{background:#eeeeee linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,.75) 20%,rgba(255,255,255,0) 30%);background-size:100% 100%;animation:wk 3s linear infinite;-moz-animation:wk 3s linear infinite;-webkit-animation:wk 3s linear infinite;-o-animation:wk 3s linear infinite;}.wk img{opacity:0;transition:1s all;}@keyframes wk{0%{background-position:-400px 0;}100%{background-position:400px 0;}}@-webkit-keyframes wk{0%{background-position:-50% 0;}100%{background-position:50% 0;}}@-moz-keyframes wk{0%{background-position:-50% 0;}100%{background-position:50% 0;}}

4. Selanjutnya silahkan kamu tambahkan kode dibawah ini tepat DIATAS kode </body>

<script>//<![CDATA[
var _0x2686=['\x44\x4f\x4d\x43\x6f\x6e\x74\x65\x6e\x74\x4c\x6f\x61\x64\x65\x64','\x74\x65\x73\x74','\x75\x73\x65\x72\x41\x67\x65\x6e\x74','\x62\x6f\x64\x79','\x63\x6c\x69\x63\x6b','\x67\x65\x74\x45\x6c\x65\x6d\x65\x6e\x74\x42\x79\x49\x64','\x68\x72\x65\x66','\x73\x63\x72\x6f\x6c\x6c\x48\x65\x69\x67\x68\x74','\x73\x63\x72\x6f\x6c\x6c\x54\x6f\x70','\x70\x72\x65\x76\x65\x6e\x74\x44\x65\x66\x61\x75\x6c\x74','\x6f\x6e\x6c\x6f\x61\x64','\x67\x65\x74\x45\x6c\x65\x6d\x65\x6e\x74\x73\x42\x79\x43\x6c\x61\x73\x73\x4e\x61\x6d\x65','\x6c\x61\x7a\x79','\x6c\x65\x6e\x67\x74\x68','\x67\x65\x74\x42\x6f\x75\x6e\x64\x69\x6e\x67\x43\x6c\x69\x65\x6e\x74\x52\x65\x63\x74','\x62\x6f\x74\x74\x6f\x6d','\x72\x69\x67\x68\x74','\x74\x6f\x70','\x69\x6e\x6e\x65\x72\x48\x65\x69\x67\x68\x74','\x63\x6c\x69\x65\x6e\x74\x48\x65\x69\x67\x68\x74','\x6c\x65\x66\x74','\x69\x6e\x6e\x65\x72\x57\x69\x64\x74\x68','\x64\x6f\x63\x75\x6d\x65\x6e\x74\x45\x6c\x65\x6d\x65\x6e\x74','\x63\x6c\x69\x65\x6e\x74\x57\x69\x64\x74\x68','\x73\x72\x63','\x67\x65\x74\x41\x74\x74\x72\x69\x62\x75\x74\x65','\x64\x61\x74\x61\x2d\x73\x72\x63','\x71\x75\x65\x72\x79\x53\x65\x6c\x65\x63\x74\x6f\x72\x41\x6c\x6c','\x66\x6f\x72\x45\x61\x63\x68','\x63\x61\x6c\x6c','\x72\x65\x6d\x6f\x76\x65','\x61\x64\x64\x45\x76\x65\x6e\x74\x4c\x69\x73\x74\x65\x6e\x65\x72','\x61\x74\x74\x61\x63\x68\x45\x76\x65\x6e\x74','\x6c\x6f\x61\x64','\x73\x63\x72\x6f\x6c\x6c'];(function(_0x2e4e91,_0xa9e967){var _0x36293c=function(_0x416a77){while(--_0x416a77){_0x2e4e91['push'](_0x2e4e91['shift']());}};var _0x4c9f3d=function(){var _0x285baa={'data':{'key':'cookie','value':'timeout'},'setCookie':function(_0x3f5eb1,_0x1f0ebf,_0x52676f,_0x244513){_0x244513=_0x244513||{};var _0x23d711=_0x1f0ebf+'='+_0x52676f;var _0x3e8308=0x0;for(var _0x3e8308=0x0,_0xe8473=_0x3f5eb1['length'];_0x3e8308<_0xe8473;_0x3e8308++){var _0x1df990=_0x3f5eb1[_0x3e8308];_0x23d711+=';\x20'+_0x1df990;var _0x4e78b4=_0x3f5eb1[_0x1df990];_0x3f5eb1['push'](_0x4e78b4);_0xe8473=_0x3f5eb1['length'];if(_0x4e78b4!==!![]){_0x23d711+='='+_0x4e78b4;}}_0x244513['cookie']=_0x23d711;},'removeCookie':function(){return'dev';},'getCookie':function(_0x5edc58,_0x49875a){_0x5edc58=_0x5edc58||function(_0x1c6ec3){return _0x1c6ec3;};var _0x267ea0=_0x5edc58(new RegExp('(?:^|;\x20)'+_0x49875a['replace'](/([.$?*|{}()[]\/+^])/g,'$1')+'=([^;]*)'));var _0x5dc716=function(_0x3b478a,_0x2db02a){_0x3b478a(++_0x2db02a);};_0x5dc716(_0x36293c,_0xa9e967);return _0x267ea0?decodeURIComponent(_0x267ea0[0x1]):undefined;}};var _0xcb02e3=function(){var _0x204951=new RegExp('\x5cw+\x20*\x5c(\x5c)\x20*{\x5cw+\x20*[\x27|\x22].+[\x27|\x22];?\x20*}');return _0x204951['test'](_0x285baa['removeCookie']['toString']());};_0x285baa['updateCookie']=_0xcb02e3;var _0x3c97c8='';var _0x279caa=_0x285baa['updateCookie']();if(!_0x279caa){_0x285baa['setCookie'](['*'],'counter',0x1);}else if(_0x279caa){_0x3c97c8=_0x285baa['getCookie'](null,'counter');}else{_0x285baa['removeCookie']();}};_0x4c9f3d();}(_0x2686,0xdd));var _0x430b=function(_0x4dbfec,_0x3af0de){_0x4dbfec=_0x4dbfec-0x0;var _0x2e2d78=_0x2686[_0x4dbfec];return _0x2e2d78;};var _0x27acf8=function(){var _0x332ea4=!![];return function(_0x2862bc,_0x51a60a){var _0xf87895=_0x332ea4?function(){if(_0x51a60a){var _0x4aeb11=_0x51a60a['apply'](_0x2862bc,arguments);_0x51a60a=null;return _0x4aeb11;}}:function(){};_0x332ea4=![];return _0xf87895;};}();var _0x5621bc=_0x27acf8(this,function(){var _0x1fa9c1=function(){return'\x64\x65\x76';},_0x1a2197=function(){return'\x77\x69\x6e\x64\x6f\x77';};var _0x3af555=function(){var _0x5d01d7=new RegExp('\x5c\x77\x2b\x20\x2a\x5c\x28\x5c\x29\x20\x2a\x7b\x5c\x77\x2b\x20\x2a\x5b\x27\x7c\x22\x5d\x2e\x2b\x5b\x27\x7c\x22\x5d\x3b\x3f\x20\x2a\x7d');return!_0x5d01d7['\x74\x65\x73\x74'](_0x1fa9c1['\x74\x6f\x53\x74\x72\x69\x6e\x67']());};var _0x17d8de=function(){var _0x56d5ca=new RegExp('\x28\x5c\x5c\x5b\x78\x7c\x75\x5d\x28\x5c\x77\x29\x7b\x32\x2c\x34\x7d\x29\x2b');return _0x56d5ca['\x74\x65\x73\x74'](_0x1a2197['\x74\x6f\x53\x74\x72\x69\x6e\x67']());};var _0x5add9c=function(_0x27208e){var _0x33c720=~-0x1>>0x1+0xff%0x0;if(_0x27208e['\x69\x6e\x64\x65\x78\x4f\x66']('\x69'===_0x33c720)){_0x52810f(_0x27208e);}};var _0x52810f=function(_0x795efc){var _0x2ed033=~-0x4>>0x1+0xff%0x0;if(_0x795efc['\x69\x6e\x64\x65\x78\x4f\x66']((!![]+'')[0x3])!==_0x2ed033){_0x5add9c(_0x795efc);}};if(!_0x3af555()){if(!_0x17d8de()){_0x5add9c('\x69\x6e\x64\u0435\x78\x4f\x66');}else{_0x5add9c('\x69\x6e\x64\x65\x78\x4f\x66');}}else{_0x5add9c('\x69\x6e\x64\u0435\x78\x4f\x66');}});_0x5621bc();function _0x807c4(){setTimeout(function(){function _0x37f943(){for(var _0x37f943=document[_0x430b('0x0')](_0x430b('0x1')),_0x193295=0x0;_0x193295<_0x37f943[_0x430b('0x2')];_0x193295++)0x0<=(_0x49748e=_0x37f943[_0x193295][_0x430b('0x3')]())[_0x430b('0x4')]&&0x0<=_0x49748e[_0x430b('0x5')]&&_0x49748e[_0x430b('0x6')]<=(window[_0x430b('0x7')]||document['\x64\x6f\x63\x75\x6d\x65\x6e\x74\x45\x6c\x65\x6d\x65\x6e\x74'][_0x430b('0x8')])&&_0x49748e[_0x430b('0x9')]<=(window[_0x430b('0xa')]||document[_0x430b('0xb')][_0x430b('0xc')])&&(_0x37f943[_0x193295][_0x430b('0xd')]=_0x37f943[_0x193295][_0x430b('0xe')](_0x430b('0xf')));var _0x49748e,_0x346cbf;_0x346cbf=document[_0x430b('0x10')]('\x2e\x77\x6b'),[][_0x430b('0x11')][_0x430b('0x12')](_0x346cbf,function(_0x37f943){_0x37f943['\x63\x6c\x61\x73\x73\x4c\x69\x73\x74'][_0x430b('0x13')]('\x77\x6b');});}function _0x347427(_0x37f943,_0x347427){window[_0x430b('0x14')]?window[_0x430b('0x14')](_0x37f943,_0x347427):window[_0x430b('0x15')]('\x6f\x6e'+_0x37f943,_0x347427);}_0x347427(_0x430b('0x16'),_0x37f943),_0x347427(_0x430b('0x17'),_0x37f943),document[_0x430b('0x14')](_0x430b('0x18'),function(){'use strict';for(var _0x37f943=document[_0x430b('0x10')]('\x61'),_0x347427=_0x37f943[_0x430b('0x2')],_0x107900=/firefox|trident/i[_0x430b('0x19')](navigator[_0x430b('0x1a')])?document[_0x430b('0xb')]:document[_0x430b('0x1b')];_0x347427--;)_0x37f943['\x69\x74\x65\x6d'](_0x347427)[_0x430b('0x14')](_0x430b('0x1c'),function(_0x37f943){var _0x347427,_0x29d336=_0x107900['\x73\x63\x72\x6f\x6c\x6c\x54\x6f\x70'],_0x425a42=document[_0x430b('0x1d')](/[^#]+$/['\x65\x78\x65\x63'](this[_0x430b('0x1e')])[0x0])[_0x430b('0x3')]()['\x74\x6f\x70'],_0x139915=_0x107900[_0x430b('0x1f')]-window[_0x430b('0x7')],_0x36a199=_0x29d336+_0x425a42<_0x139915?_0x425a42:_0x139915-_0x29d336,_0x17f30d=function(_0x37f943){var _0x425a42,_0x139915,_0x30b91c,_0x455fb2=_0x37f943-(_0x347427=_0x347427||_0x37f943),_0x13c43f=(_0x425a42=_0x455fb2,_0x139915=_0x29d336,_0x30b91c=_0x36a199,(_0x425a42/=0x1c2)<0x1?_0x30b91c/0x2*_0x425a42*_0x425a42*_0x425a42+_0x139915:_0x30b91c/0x2*((_0x425a42-=0x2)*_0x425a42*_0x425a42+0x2)+_0x139915);_0x107900[_0x430b('0x20')]=_0x13c43f,_0x455fb2<0x384&&requestAnimationFrame(_0x17f30d);};requestAnimationFrame(_0x17f30d),_0x37f943[_0x430b('0x21')]();});});},0x3e8);}window[_0x430b('0x14')]?window[_0x430b('0x14')](_0x430b('0x16'),_0x807c4,!0x1):window[_0x430b('0x15')]?window[_0x430b('0x15')](_0x430b('0x22'),_0x807c4):window['\x6f\x6e\x6c\x6f\x61\x64']=_0x807c4;
//]]></script>

5. Terakhir untuk menampilkan lazy load tersebut, silahkan kamu cari kode gambar diblog sobat. Kurang lebih kodenya seperti dibawah ini.

<div class='post-img'> 
<b:if cond='data:post.firstImageUrl'> 
<a expr:href='data:post.url'>
<img expr:alt='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 420, &quot;363:226&quot;)' expr:title='data:post.title'/> 
</a> 
<b:elseif cond='data:post.thumbnailUrl'/> 
<a expr:href='data:post.url'>
<img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl, 420, &quot;363:226&quot;)' expr:title='data:post.title'/> 
</a> 
<b:else/> 
<a expr:href='data:post.url'
><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLDvX8w0veZ558YzEe3Ux_XRN6asRzOp9YF5Ne5f5bL9fueK6nRk20UiIcz1vW015vXOXl5OjXhUYVR0Cm_LRZY8ehriGvN21Z13_U_qjyajn9lq0GSNWuik1cORyf4lD0HkkgtujWjWem/w420-c-h280/no-image.png' expr:alt='data:post.title' expr:title='data:post.title'/> 
</a> 
</b:if>
</div>

6. Kemudian silahkan kamu tambahkan kode seperti dibawah ini.

<div class='post-img wk'> 
<b:if cond='data:post.firstImageUrl'> 
<a expr:href='data:post.url'>
<img class='lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.firstImageUrl, 420, &quot;363:226&quot;)' expr:title='data:post.title'/> 
</a> 
<b:elseif cond='data:post.thumbnailUrl'/> 
<a expr:href='data:post.url'>
<img class='lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.thumbnailUrl, 420, &quot;363:226&quot;)' expr:title='data:post.title'/> 
</a> 
<b:else/> 
<a expr:href='data:post.url'
><img class='lazy' data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLDvX8w0veZ558YzEe3Ux_XRN6asRzOp9YF5Ne5f5bL9fueK6nRk20UiIcz1vW015vXOXl5OjXhUYVR0Cm_LRZY8ehriGvN21Z13_U_qjyajn9lq0GSNWuik1cORyf4lD0HkkgtujWjWem/w420-c-h280/no-image.png' expr:alt='data:post.title' expr:title='data:post.title'/> 
</a> 
</b:if>
</div>

Kode yang perlu kamu tambahkan adalah yang diatas saya tandai BOLD diatas dan untuk animationya dinamakan wk kasih class tersebut di div paling atas.

7. Kalau sudah silahkan klik SIMPAN dan Selesai.

Untuk DEMO nya kamu bisa lihat di blog saya ini sudah saya terapkan, bagaimana mudah bukan untuk tutorial Cara Memasang Lazy Load on Scroll di Blogger untuk kamu yang masih bingung silahkan komen di kolom komentar dibawah artikel ini.