Ringankan blog dengan jQuery Lazy Load

Lazy Loader adalah plugin jQuery di mana efek lazy load akan menangguhkan proses loading bagi image yang terdapat pada blog. Efek Lazy load hanya akan berfungsi apabila page di scroll. Image sesudah page yang di scroll akan terlihat dengan menggunakan efek jQuery Lazy Load. Untuk melihat Demo, silahkan klik di sini.

Lazy Load membantu meringankan blog dengan mengurangkan tempoh masa proses loading page pada sesebuah blog terutama pada blog yang banyak menampilkan image gambar ataupun image yang berukuran besar.

Untuk memasang jQuery Lazy Load di blogspot, ikut beberapa langkah di bawah.

Langkah 1

Login Blogger Dashboard --> Design --> Add A Gadget --> HTML/Javascript.

Copy dan paste kode di bawah pada content HTML/Javascript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type='text/javascript' src='https://sites.google.com/site/jquery01/jquery.lazyload.mini.js?ver=1.5.0'></script>
<script type="text/javascript">
jQuery(document).ready(function($){
if (navigator.platform == "iPad") return;
jQuery("img").lazyload({
effect:"fadeIn",
placeholder: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGRgUHIRgODoK_zdU_lON0SZH1hgzPt8vEvm85nEo2oOaBNwCevpOMvgJFibqxqazE8Ds_mnoo2Mmi_RqfEH_t-75-ZtsRIF2nRzU-X5-HBNQJyoYkLJ-fWQRLtOZXratyJU6ug5dcuBM/s1600/grey.gif"
});
});
</script>

Terakhir, klik save

Pesan:
1.Jika tidak ada apapun efek terjadi setelah kode di Save, silahkan paste kode tersebut sebelum atau di atas kode </ body> pada script template.

2.Jika tidak ada seberang perubahan setelah kode di paste di atas atau sebelum kode </ body>, silahkan paste kode tersebut sebelum atau di atas kode </ head>

Cara Membuat efek bayang-bayang pada gambar

google indonesia

Untuk membuat efek bayang-bayang pada bagian kanan dan bawah gambar seperti yang Anda dapat lihat pada gambar di atas, hanya perlu mengikuti beberapa langkah di bawah ini:

pesan: Silahkan save dulu script template Anda sebelum melakukan editting.

Langkah 1

Login blog => Dashboard => Layout => Edit HTML. Selanjutnya centang Expand Widget Templates

Langkah 2

Tekan Ctrl + F dan ketik kode .Post img { dan seterusnya tekan enter.

Langkah 3

Salin kode di bawah dan pastekan di bawah kode .Post img { (lihat langkah 2)

background: url(http://i30.tinypic.com/1qsh1h.jpg) no-repeat right bottom;
padding: 5px 10px 10px 5px;
border: 0px;

Contoh:

.post img {
background: url(http://i30.tinypic.com/1qsh1h.jpg) no-repeat right bottom;
padding: 5px 10px 10px 5px;
border: 0px;