VEzcwOIzJo2ocMRnvNfZmXylSxSqdBdXDBtRZkxw
Bookmark

Cara Memasang Lazy Load Image dan Animasi Slash di Blogger

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
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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSvtYejmXX1NWGIHanSQA5UqYKtUmdxqaqfN8MWJt7bElL0jC7ZSDBAGpVLafOfkL6uiZyAN7St2jMuFRhzNUTLmpIVSz0hqalUrMbTSDluBWWPqPEAVb7Q-6LgeX7TrrpAkY5h3Br4-Jj/w420-c-h280/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.
12 komentar

12 komentar

  • Over Brain
    Over Brain
    Januari 01, 2020
    tutorialnya bagus" mas, kebetulan lagi belajar ngedit template blog juga.
    Mau tanya cara buat tombol share sperti blog igniel gmna ya mas ?
    • Over Brain
      Mr.Tutorial
      Januari 02, 2020
      saya sudah pernh coba membuatnya, tapi masih ada kendala pada sticky nya
    • Over Brain
      Over Brain
      Januari 02, 2020
      iya mas, saya juga belum dapet caranya biar sticky dibawah.
    • Over Brain
      Mr.Tutorial
      Januari 03, 2020
      nah itu juga saya sedang cari masalah dan akar solusinya
    Reply
  • Over Brain
    Over Brain
    Januari 01, 2020
    Komentar ini telah dihapus oleh pengarang.
  • Syahrul Arul
    Syahrul Arul
    Desember 03, 2019
    Akhirnya nemu,, ijin bookmark gan
    • Syahrul Arul
      Kurniawan
      Desember 04, 2019
      Oke gan siap
    Reply
  • Admin
    Admin
    November 15, 2019
    hey bro how to show blogposts (body - boxed style) like serieswans with h1,h2 style
    • Admin
      Kurniawan
      November 15, 2019
      Cek tutorial merubah background sidebar di blog serieswans
    • Admin
      Admin
      November 15, 2019
      Komentar ini telah dihapus oleh pengarang.
    • Admin
      Admin
      November 15, 2019
      Sorry but I'm asking for main post style (ex. ----dashed under h1 heading ) not for sidebar.
    • Admin
      Kurniawan
      November 15, 2019
      Oh itu tinggal tmbahin saja di CSSnya kode border-bottom: 2px dashed #000;
    Reply