Tutorial : Ringankan Blog dengan Lazyload Image Script

Thursday, November 28, 2013

Morning peeps! Macam dah lama pulak Fiza tak buat tutorial kan.Banyak permintaan yang Fiza tak dapat tunaikan.Maaflah tak sempat Fiza nak buat tutorial yang korang request tu.Agak takde mase nak buat tutor lagi lagi yang ada print screen tu.Tapi kalau ada yang simple Fiza terus bagi tau korang je,ada yang Fiza dah reply kan.

Tapi tutorial ni hanya copy paste  dan telah diubah suai cara Fiza. Share untuk korang guna jugak.Semua ada masalah blog berat,lambat loading kan.Fiza pun mengalami masalah yang sama. Itupun setelah bermacam macam widget Fiza buang. Fiza detect satu satu widget yang berat. Yang berat tu Fiza buang terus. Tak de la semak sangat kan. Selain buang widget tak penting, template blog kena friendly users jugak. Kalau blog yang jenis banyak gambar tu elok sangatlah guna lazyload script.

Apa itu Lazyload script ni? Lazyload script ni akan mengurangkan loading images dalam blog korang .Image akan loading bila korang scroll ke bawah dahulu.Baru full image keluar. Automatically,ini akan mengurangkan loading blog.Blog akan jadi lebih cepat loading sebab image akan loading bila scroll je .Menarik kan?. Dah ada solutionnya apa tunggu lagi.Jom tambahkan Lazyload script ni dalam blog.

1. Log in account Blogger
1. Automatically akan ke window dashboard >> Template >> Edit HTML
2. Cari code </head> [untuk memudahkan pencarian tekan cltrl+F serentak dan masukkan code </head> didalam search box]
3. Copy kod ni dan pastekan sebelum kod </head> yang korang cari tadi .
<script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script> <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script> <script type="text/javascript" charset="utf-8"> var $j = jQuery.noConflict(); $j(function() { if (navigator.platform == "iPad" || navigator.platform == "iPhone") return; $j("img").lazyload({ placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif", effect: "fadeIn", }); }); </script>
4. Preview template.
5. Kalau nampak perubahan kelajuan loading blog,save.

Okay,simple je kan. Jangan lupa apply masuk dalam blog korang ye..Takde la jenuh nak tunggu blog loading.Blog akan jadi mesra alam gitu.

credit to : Blogger afiqahadzan & source
15 comments on "Tutorial : Ringankan Blog dengan Lazyload Image Script"
  1. WAH...bagus nie fiza...takdelah orang terus tekan pangkah kalau lambat sangat nak loading blog kita kan...

    ReplyDelete
  2. ala...tak jumpa kod head,kalau header ada..huhu

    ReplyDelete
  3. wah, terima kasih... inila yang saya cari-cari selama ini... nak sebut/google tak tau panggil apa.. hehe.. thanks fiza.. menjadi..

    ReplyDelete
  4. ok nanti try. lama tak kelebek koding..

    stg silap nayaaa..huhu

    ReplyDelete
  5. nice sharing.. tapi tak pandai nk ubah2 ni.. huhu

    ReplyDelete
  6. thnx tw share fiza. nanti hana nak try. hik2.

    ReplyDelete
  7. haa bagus ni fiza.. kdg2 loading lama sgt2

    ReplyDelete

Terima kasih atas komen yang diberikan.

Auto Post Signature

Auto Post  Signature