Cara Memasang Lazy Load Image On Scroll Di Blog Dengan Mudah

Hallo sahabat blogger pada kesempatan kali ini saya akan berbagi tutorial Cara Memasang Lazy Load Image On Scroll Di Blog Dengan Mudah.

Maksud dari On Scroll ialah ketika pengunjung mengunjungi blog kalian dan harus meng-scroll dulu supaya gambar di homepage kalian bisa muncul.

Jadi Lazy Load Image On Scroll ialah jika kalian masuk ke sebuah web atau blog yang sudah menerapkan cara ini kalian bisa lihat pada bagian gambar homepagenya tidak akan muncul kecuali kalian sudah melakukan aksi atau gerak pada web atau blog tersebut dengan melakukan Scroll ke bawah, maka gambar tersebut akan terlihat atau muncul.

Dengan cara ini gambar tidak akan di muat atau load jika dari pengunjung tidak melakukan aksi atau gerak.

Untuk cara memasangnya pun cukup gampang, kalian hanya menambahkan beberapa kode saja ke dalam template kalian seperti CSS dan Javascript. dengan menggunakan kode tersebut sudah pasti tidak akan memberatkan loading blog kalian saat di muat.

Nah jika kalian penasaran dan ingin memasang Lazy Load Image On Scroll di blog kalian, kalian bisa ikuti langkahnya di bawah ini.

Cara Terbaru Memasang Lazy Load Image On Scroll Di Blog Dengan Mudah

Buka Blog kalian.
Pilih Tema lalu pilih Edit HTML.
Cari kode ]]></b:skin> lalu pastekan kode di bawah ini tepat di atas 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;}}

Salin kode di bawah ini dan letakan tepat di atas 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>

Untuk menampilakn Lazy Load tersebut, silahkan kalian cari kode yang mirip dengan kode di bawah 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/AVvXsEiAsplPzY7J1V5BEPz4u_UDfOYU_s2mpt3MEB2InPyAWttlW463rbIGRw0KQIXWOHQuEa946RGizRwEGBckih6KlBIKukw0biiTi2sqyS7vFuv2ITEtnXMnqDNUeYk5D8KZ1arpUEDInD9r/w420-c-h280/no-image.png' expr:alt='data:post.title' expr:title='data:post.title'/> 
</a> 
</b:if>
</div>

Jika sudah ketemu hapus kode tersebut ganti dengan kode di bawah 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/AVvXsEiAsplPzY7J1V5BEPz4u_UDfOYU_s2mpt3MEB2InPyAWttlW463rbIGRw0KQIXWOHQuEa946RGizRwEGBckih6KlBIKukw0biiTi2sqyS7vFuv2ITEtnXMnqDNUeYk5D8KZ1arpUEDInD9r/w420-c-h280/no-image.png' expr:alt='data:post.title' expr:title='data:post.title'/> 
</a> 
</b:if>
</div>

Atau kalian bisa menambahkan kode seperti di bawah ini tanpa menghapus kode tersebut.

<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/AVvXsEiAsplPzY7J1V5BEPz4u_UDfOYU_s2mpt3MEB2InPyAWttlW463rbIGRw0KQIXWOHQuEa946RGizRwEGBckih6KlBIKukw0biiTi2sqyS7vFuv2ITEtnXMnqDNUeYk5D8KZ1arpUEDInD9r/w420-c-h280/no-image.png' expr:alt='data:post.title' expr:title='data:post.title'/> 
</a> 
</b:if>
</div>

Kode yang perlu kalian tambahkan ialah kode yang saya tandai dengan warna Merah, dan untuk kode WK ialah kode Animationnya.

Simpan template kalian.

Bagaimana sangat mudah bukan untuk tutorial tentang Cara Terbaru Memasang Lazy Load Image On Scroll Di Blog Dengan Mudah, jika kalian mempunyai pertanyaan seputar postingan di atas silahkan kalian bertanya melalui kolom komentar di bawah ini. Terimakasih sudah berkunjung dan semoga bermanfaat buat kalian semua.

Baca juga :

Go to Link

Telat Ngoding

Cara Memasang Lazy Load Image On Scroll Di Blog Dengan Mudah

Cara Terbaru Memasang Lazy Load Image On Scroll Di Blog Dengan Mudah

About the Author

Posting Komentar

Menjelajahi Pengalaman Hidup Modern di Apartemen West Vista Puri

Template Blogger Plus UI 2.6.3 Pengganti Median UI

7 Tips Sebelum Anda Berwisata ke Puncak Bogor!

Tips Hemat Biaya Sewa Kantor di Pinggiran Jakarta

Menavigasi Pasar Forex dengan Broker FBS: Panduan Praktis

Telat Ngoding