Ada banyak faktor kenapa lalu lintas blog kehilangan pengunjung, salah satunya adalah kecepatan loading blog yang memerlukan waktu lama. Hal seperti ini benar-benar akan berdampak buruk buat blog Anda, jadi penting buat Anda untuk memperhatikan beban dari template blog Anda. Salah satu yang membuat blog kita loading lebih lama karena gambar atau photo, lantas apa kita tidak harus menggunakan gambar untuk blog kita? Tentu saja tidak, seharusnya kita harus mengambil suatu langkah tertentu sehingga beban dari blog kita berkurang dan tampil lebih cepat.
Nah, pada posting ini saya akan berbagi satu tips untuk mempercepat loading blog Anda dengan menggunanakan Plugin jQuery Lazy Image Load. Cara kerja plugin ini adalah memperlambat atau menunda loading gambar di blog Anda. Gambar yang muncul hanya pada halaman yang terlihat dan gambar yang lain akan terlihat saat kita mengscroll halaman blog ke bawah. Dengan begitu loading blog akan lebih cepat dan dalam beberapa kasus tertentu dapat membantu mengurangi beban server. Untuk lebih jelasnya silahkan kunjungi
AppelsiiniCara Pemasangan Jquery Lazy Load Plugin
- Login ke Blogger Anda
- Klik Temlate dan pilih Edit HTML
- Cari tag </head> gunakan Ctrl+F untuk mencari
- Selanjutnya salin javascript dibawah ini tepat sebelum tag </head> :
<script type='text/javascript'>//<;
self.loaded = true;
/* Remove image from array so it is not looped next time. */
var temp = $.grep(elements, function(element) {
return ! element.loaded;
});
elements = $(temp);
if (settings.load) {
var elements_left = elements.length;
settings.load.call(self, elements_left, settings);
}
})
.attr("src", $self.data(settings.data_attribute));
}
});
/* When wanted event is triggered load original image */
/* by triggering appear. */
if (0 !== settings.event.indexOf("scroll")) {
$self.bind(settings.event, function(event) {
if (!self.loaded) {
$self.trigger("appear");
}
});
}
});
/* Check if something appears when window is resized. */
$window.bind("resize", function(event) {
update();
});
/* With IOS5 force loading images when navigating with back button. */
/* Non optimal workaround. */
if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) {
$window.bind("pageshow", function(event) {
if (event.originalEvent.persisted) {
elements.each(function() {
$(this).trigger("appear");
});
}
});
}
/* Force initial check if images should appear. */
$(window).load(function() {
update();
});
return this;
};
/* Convenience methods in jQuery namespace. */
/* Use as $.belowthefold(element, {threshold : 100, container : window}) */
$.belowthefold = function(element, settings) {
var fold;
if (settings.container === undefined || settings.container === window) {
fold = $window.height() + $window.scrollTop();
} else {
fold = $(settings.container).offset().top + $(settings.container).height();
}
return fold <= $(element).offset().top - settings.threshold;
};
$.rightoffold = function(element, settings) {
var fold;
if (settings.container === undefined || settings.container === window) {
fold = $window.width() + $window.scrollLeft();
} else {
fold = $(settings.container).offset().left + $(settings.container).width();
}
return fold <= $(element).offset().left - settings.threshold;
};
$.abovethetop = function(element, settings) {
var fold;
if (settings.container === undefined || settings.container === window) {
fold = $window.scrollTop();
} else {
fold = $(settings.container).offset().top;
}
return fold >= $(element).offset().top + settings.threshold + $(element).height();
};
$.leftofbegin = function(element, settings) {
var fold;
if (settings.container === undefined || settings.container === window) {
fold = $window.scrollLeft();
} else {
fold = $(settings.container).offset().left;
}
return fold >= $(element).offset().left + settings.threshold + $(element).width();
};
$.inviewport = function(element, settings) {
return ! $.rightoffold(element, settings) && !$.leftofbegin(element, settings) &&
!$.belowthefold(element, settings) && !$.abovethetop(element, settings);
};
/* Custom selectors for your convenience. */
/* Use as $("img:below-the-fold").something() or */
/* $("img").filter(":below-the-fold").something() which is faster */
$.extend($.expr[':'], {
"below-the-fold": function(a) {
return $.belowthefold(a, {
threshold: 0
});
},
"above-the-top": function(a) {
return ! $.belowthefold(a, {
threshold: 0
});
},
"right-of-screen": function(a) {
return $.rightoffold(a, {
threshold: 0
});
},
"left-of-screen": function(a) {
return ! $.rightoffold(a, {
threshold: 0
});
},
"in-viewport": function(a) {
return $.inviewport(a, {
threshold: 0
});
},
/* Maintain BC for couple of versions. */
"above-the-fold": function(a) {
return ! $.belowthefold(a, {
threshold: 0
});
},
"right-of-fold": function(a) {
return $.rightoffold(a, {
threshold: 0
});
},
"left-of-fold": function(a) {
return ! $.rightoffold(a, {
threshold: 0
});
}
});
//]]>
< /script>
<script charset="utf-8" type="text/javascript ">
$(function() {
$("img ").lazyload({placeholder : "http:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmb7fKZ1NgrX4VWQUVWCT4L7TLUl1WhUbfW5jUxDFcvyhxvjDPsAQfLDnKapFBUzsK6r1gk5Ab2S8MTCfk6AjarHSXmJTcES4TVHW6890LD5HCY4A2Tk0d5BgC-tV_OnxF_EyQZS5CmLY/s1600/grey.gif",threshold : 200});
});
</script>
Dengan menyelesaikan langkah diatas Anda telah berhasil menginstall lazy image load diblog Anda.
http://the-anarchyta.blogspot.com/2014/02/mempercepat-loading-blogger-jquery-lazy.html
Membuat Widget G+ (Google Plus) Melayang Valid HTML5 - Sebenarnya Widget ini sudah banyak yang share dan posting. di googlepun sudah banyak. tapi sekarang saya akan share Share Google Plus G+ yang VALID HTML5. Karena yang saya temukan di luar sana banyak yang tidak VALID HTML5.
