Cara Memasang Lazy Load Image dan Animasi Slash di Blogger

By Kurniawan Updated: 2020-09-17T15:11:39Z 12 ·

Daftar Isi [Tampilkan]

Serieswans | Cara Memasang Lazy Load Image dan Animasi Slash di Blogger - Mengenai masalah Expires Header atau Laverage Browser Caching merupakan sudah menjadi masalah umum bagi para pengguna blogger. karena dalam mengatasi hal tersebut bisa di bilang cukup sulit, meskipun masalahnya bisa kita atasi menggunakan lazy load. Expires Header ini mengenai mengatur cache pada browser. sebelum lanjut ke tutorial pemasangan lazy load image, kita akan membahas terlebih dahulu mengenai cache.

Apa Itu Cache ?

Cache merupakan suatu data yang sifatnya ini sementara atau disebut temporary yang tersimpan pada browser atau sistem penyimpanan perangkat. cache ini berfungsi untuk membuka suatu aplikasi atau halaman website dengan lebih cepat.

Jenis cache pada browser ini disebut dengan Browser cache. dengan adanya browser cache perangkat bisa membuka sebuah halaman website lebih cepat dimana penyimpanan data hanay dilakukan pada kunjungan pertama saja,namun itu juga dalam jangka waktu tertentu.

Cara Memasang Lazy Load Image dan Animasi Slash di Blogger

Pada saat pengunjung membuka blog anda pertama kali, maka browser tersebut akan melakukan beberapa permintaan untuk mendownload semua konten dari blog. pada intinya file yang di download tadi di simpan di cache browser si pengunjung. cara tersebut agar ketika pengunjung blog tersebut balik lagi mengunjungi blog anda, semua file akan di download dan disimpan di cache browser, setelah itu data tersebut akan di panggil jika visitor tersebut mengunjungi lagi blog anda. sehingga tidak memberatkan proses pemuatan halaman blog dan menghemat waktu.

Pada intinya fungsi lazy load ini untuk meningkatkan kecepatan loading blog. anda bisa merasakan efeknya ketika sudah memasang script lazy load image. karena browser tidak perlu request file ke server. waktu lamanya cache itu di simpan di browser bisa anda atur sendiri, file sangat penting di atur cachenya yaitu file Gamber PNG,JPG,GIF,Favicon.ico,CSS. biasanya cara tersebut di lakukan jika anda mempunyai hosting sendiri, karena lebih mudah dan simple. jika di bandingkan dengan Blogger, kita tidak bisa

Kebanyakan para blogger yang mengecek kecepatan situs blog atau websitenya di Gmetrix adalah mengenai masalah Add Expires Header. tapi sekarang anda tidak usah pusing-pusing mencari solusinya, anda bisa menggunakan Script Lazy Load Image pada Blog. dengan mamasang Script lazy load maka Kecepatan loading blog anda akan lebih cepat.

Apa itu Lazy Load Image/Gambar ?

Lazy Load Image merupakan script yang befungsi untuk menunda pemanggilan file sebelum di lakukan selama proses loading blog berlangsung. jadi script tersebut akan melakukan penundaan pemuatan file di blog sebelum anda men-scroll halaman tersebut

.

Script Lazy Load Image ini juga sudah dikombinasikan dengan animasi slash saat penundaan pemuatan file di blog sebelum scroll halaman. oke kita lansung saja ke tutorial memasang lazy load imagenya.

Cara Memasang Lazy Load Image dan Animasi Slash 

1. Pertama, login ke blogger.com dan masuk ke Dashboard Blogger.

2. Pilih Tema => Edit HTML

3. Kemudian cari kode <img> dimana tag tersebut merupakan kode gambar atau thumbnail dari postingan blog dan biasanya setiap blog berbeda kodenya. contoh kodenya seperti ini.

<a expr:href='data:post.url'><img expr:alt='data:post.title' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' expr:data='resizeImage(data:post.thumbnailUrl, 420, &quot;300:200&quot;)' expr:title='data:post.title'/>

Gunakan Tombol Shortcut CTRL + F untuk memudahkan anda mencari kode tersebut.

4. Jika sudah ketemu Tag tersebut, silahkan anda pahami cara mengatur Lazy Load Image ini.

- Silahkan ubah kode expr:src menjadi expr:data-src

- Tambahkan kode class='lazy' pada tag image tersebut.

-  kemudian tambahkan atau ganti pada isi kode expr:data-src dengan kode berikut.

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12P4zwAAAgEBAKrChTYAAAAASUVORK5CYII=

Hasilnya akan seperti ini.

<b:includable id='postthumbnail' var='post'>
  <div class='img-thumbnail'>
  <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;300:200&quot;)' expr:title='data:post.title' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12P4zwAAAgEBAKrChTYAAAAASUVORK5CYII='/>
  </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;300:200&quot;)' expr:title='data:post.title' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12P4zwAAAgEBAKrChTYAAAAASUVORK5CYII='/>
  </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' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12P4zwAAAgEBAKrChTYAAAAASUVORK5CYII='/>
  </a>
  </b:if>
  </div>
</b:includable>

5. Jika anda sudah mengatur lazy load image pada tag, selanjutnya kita pasang script lazy load image, silahkan copy kode di bawah ini dan letakan di atas kode </body>

<script type='text/javascript'>//<![CDATA[
function ignielLazyLoad(){eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\b'+e(c)+'\b','g'),k[c])}}return p}('u B(){Y(v e=o.1r("B"),t=0;t<e.1q;t++)Q(e[t])&&(e[t].N=e[t].1p("1n-N"))}u Q(e){v t=e.1t();Z t.1x>=0&&t.1w>=0&&t.1v<=(y.1u||o.T.1m)&&t.1k<=(y.1c||o.T.1b)}v b=["\r\m\m\D\G\a\f\c\M\n\p\c\a\f\a\k","\h\f","\r\c\c\r\l\A\D\G\a\f\c","\g\h\r\m","\p\l\k\h\g\g","\V\1a\1e\R\h\f\c\a\f\c\M\h\r\m\a\m","\w\p\a\1l\p\c\k\n\l\c","\r","\1f\w\a\k\L\1j\a\g\a\l\c\h\k\W\g\g","\g\a\f\q\c\A","\w\p\a\k\W\q\a\f\c","\c\a\p\c","\m\h\l\w\F\a\f\c\D\g\a\F\a\f\c","\1i\h\m\L","\l\g\n\l\1g","\p\l\k\h\g\g\1h\h\J","\c\h\J","\q\a\c\S\h\w\f\m\n\f\q\R\g\n\a\f\c\1z\a\l\c","\A\k\a\X","\a\1y\a\l","\q\a\c\D\g\a\F\a\f\c\S\L\1F\m","\p\l\k\h\g\g\U\a\n\q\A\c","\n\f\f\a\k\U\a\n\q\A\c","\J\k\a\G\a\f\c\V\a\X\r\w\g\c","\n\c\a\F"];u I(d,j){y[b[0]]?y[b[0]](d,j):y[b[2]](b[1]+d,j)}I(b[3],B),I(b[4],B),o[b[0]](b[5],u(){b[6];Y(v d=o[b[8]](b[7]),j=d[b[9]],s=/1D|1B/i[b[11]](1G[b[10]])?o[b[12]]:o[b[13]],C=u(d,j,s,C){Z(d/=C/2)<1?s/2*d*d*d+j:s/2*((d-=2)*d*d+2)+j};j--;){d[b[1C]](j)[b[0]](b[14],u(d){v j,E=s[b[15]],x=o[b[1A]](/[^#]+$/[b[19]](1H[b[18]])[0])[b[17]]()[b[16]],z=s[b[1d]]-y[b[1s]],O=z>E+x?x:z-E,K=1o,H=u(d){j=j||d;v x=d-j,z=C(x,E,O,K);s[b[15]]=z,K>x&&P(H)};P(H),d[b[1E]]()})}});',62,106,'||||||||||x65|_0x1b5d|x74|_0xdd48x2||x6E|x6C|x6F||_0xdd48x3|x72|x63|x64|x69|document|x73|x67|x61|_0xdd48x4||function|var|x75|_0xdd48x7|window|_0xdd48x8|x68|lazy|_0xdd48x5|x45|_0xdd48x6|x6D|x76|_0xdd48xb|registerListener|x70|_0xdd48xa|x79|x4C|src|_0xdd48x9|requestAnimationFrame|isInViewport|x43|x42|documentElement|x48|x44|x41|x66|for|return|||||||||||x4F|clientWidth|innerWidth|21|x4D|x71|x6B|x54|x62|x53|left|x20|clientHeight|data|900|getAttribute|length|getElementsByClassName|22|getBoundingClientRect|innerHeight|top|right|bottom|x78|x52|20|trident|24|firefox|23|x49|navigator|this'.split('|'),0,{}));} eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\b'+e(c)+'\b','g'),k[c])}}return p}('j 4=["\7\9\9\e\d\a\b\8\i\g\h\8\a\b\a\k","\f\c\7\9","\7\8\8\7\m\l\e\d\a\b\8","\c\b\f\c\7\9"];5[4[0]]?5[4[0]](4[1],6,!1):5[4[2]]?5[4[2]](4[1],6):5[4[3]]=6;5[4[0]]?5[4[0]](4[1],6,!1):5[4[2]]?5[4[2]](4[1],6):5[4[3]]=6;',23,23,'||||_0xdfb4|window|ignielLazyLoad|x61|x74|x64|x65|x6E|x6F|x76|x45|x6C|x69|x73|x4C|var|x72|x68|x63'.split('|'),0,{}));
//]]></script>

6. Kemudian kita tambahkan Animasi Slashnya, dengan menambahkan kode di bawah ini dan letakan di atas kode ]]></b:skin>atau </style>

.lazy {animation: ignielShine 1s linear infinite;-moz-animation: ignielShine 1s linear infinite;-webkit-animation: ignielShine 1s linear infinite;-o-animation: ignielShine 1s linear infinite;background: #f5f5f5 linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,.78) 20%,rgba(255,255,255,0) 30%);background-size: 800px 104px;}
.Night .lazy{background:#252931 linear-gradient(to right,rgba(255,255,255,0) 5%,rgb(49,54,64) 20%,rgba(255,255,255,0) 30%);background-size:800px 104px}
@keyframes ignielShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
@-webkit-keyframes ignielShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
@-moz-keyframes ignielShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
@-webkit-keyframes ignielShine{from{width:0%}to{width:100%}}
@-moz-keyframes ignielShine{from{width:0%}to{width:100%}}
@keyframes ignielShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
@-webkit-keyframes ignielShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
@-moz-keyframes ignielShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
@keyframes ignielZoom{from{width:0%}to{width:100%}}
@-webkit-keyframes ignielShine{from{width:0%}to{width:100%}}
@-moz-keyframes ignielShine{from{width:0%}to{width:100%}}

7. Terakhir simpan Tema dan cek hasilnya.

  Demo

Tag image pada setiap template ada yang sama dan ada yang berbeda, dan jumlah Tagnya juga berbeda. kalo di template saya ini ada 3 Tag image pada thumbnail postingan. anda juga bisa memasang lazy load load image tersebut selain pada thumnail postingan, misalnya anda ingin memasangnya juga di tag image header atau yang lainnya. silahkan sisanya kreasikan sesuai keinginan anda.

Demikian pembahsan kali ini mengenai Cara Memasang Lazy Load Image dan Animasi Slash di Blogger. jika anda rasa artikel ini bermanfaat silahkan bagika ke teman-teman sosial media anda, agar ilmu yang baru saja anda dapatkan, bisa bermanfaat juga untuk orang yang ada di sekitar anda. terima kasih sudah berkunjung.

SHARE Facebook Whatsapp