Follow us on Google News Follow Now!

Cara Memasang Lazy Load Image On Scroll Di Blog Dengan Mudah

Untuk cara memasangnya pun cukup gampang, kalian hanya menambahkan beberapa kode saja ke dalam template kalian seperti CSS dan Javascript. dengan meng
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

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

Lapakinfo.net

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='//3.bp.blogspot.com/-ltyYh4ysBHI/U04MKlHc6pI/AAAAAAAADQo/PFxXaGZu9PQ/w420-h280-c/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='//3.bp.blogspot.com/-ltyYh4ysBHI/U04MKlHc6pI/AAAAAAAADQo/PFxXaGZu9PQ/w420-h280-c/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='//3.bp.blogspot.com/-ltyYh4ysBHI/U04MKlHc6pI/AAAAAAAADQo/PFxXaGZu9PQ/w420-h280-c/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 :

About the Author

someone who really likes writing articles and various info to you and hopefully useful

Posting Komentar

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.