There are also a couple of issues about server requests which makes our blog load lazily. Your site’s load time may hurt you visitors however, to decrease server requests in your Blogger blog we use some plugins or javascript. But before I began to show what plugins can help our blog to load faster. When visitors first land on your blog there may be a number of images which need to be processed. This could take just a couple seconds or even 8-10 extra seconds for the request to finish. Waiting around for that long can get tiresome and you’ll lose people’s interest rather quickly. I have noticed the longest waiting times for blog posts often contain image galleries. These galleries may hold website design showcases, or any page/article with lots of images. If your readers have speedy Internet access this probably won’t become much of a burden. But is the risky burden even worthwhile? I feel these instances are great examples for when lazy loading could honestly benefit the readers. All images on the page will be held with placeholders until the user scrolls down further and hits each image in succession. There are often people who complain about this feature but I don’t see any problems. Personally I’ve never been annoyed by the effect and it actually seems like a wise method for reducing server loads. If you want see lazy loading effect more than 1 you need clear your browser cache and shift-reload to test again on demo page.
Live Preview
Add Load Lazy Plugin To Your Blogger Blog
Note:- Practically everyone has JavaScript enabled. However there are cases when you want to show the real images even if request come from client which does not support JavaScript. Google crawlers are one good candidate. Google crawlers do not execute JavaScript but also seem to ignore noscript content. To degrade gracefully when JavaScript is not enabled you can include the real image tag inside <noscript> block. More Documentation This is only for advance user.(Not A Beginner)
It improves your website’s performance by loading your website images lazily. This includes:
1. Post images
2. Post Thumbnails
3. Gravatar images and
4. iframe content
These images will loaded only when your visitors scroll closer to them.
Plugin has been tested with Safari 5.1, Safari 6, Chrome 20, Firefox 12 on OSX and Chrome 20, IE 8 and IE 9 on Windows and Safari 5.1 on iOS 5 both iPhone and iPad.
1. Go to your Blogger Dashboard>> Template>> Edit Html
2. and find the following code
</head>
3. paste following code before/above “</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 : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMO_eynt3sTu3mDw9A-OQL6qQQ_ZdAQqTXUyEk45CtPwIPSrPcj8mWZMliYGskeRq1HQ1oKEg5hOFnlg-_d-H93mWM8SloxLGxp8PUrA8qS91UDnwBvbTdNPblPM53YKKuPcI6okyEXjQ/s1600/grey.gif",threshold : 200});
});
</script>
Credit
A Plugin Created by Mika Tuupola. We are thank full to mika for this great effort. This plugin very useful for Image Gallery and also for your portfolio websites.
Attention
The number of internet users are turning into publishers at a fastest rate, therefore you must be careful when applying a tutorial to your blog and extra careful when the tutorial talks of Jquery and SEO. I am observing baseless SEO tips coming from new bloggers that causes more harm to blogs at long term then a short term relief. Almost every new blogger has started sharing his own ideas of SEO and writing codes. This is surely encouraging but on the other side incorrect knowledge has caused several blogs to be hit by Google penalties such as Panda and Penguin.
Need A More Help
Please let me know if you want any help here. I hope this technique would further help developers to create more interesting blogger templates and contribute further to the blogosphere community. I would love to hear your feedback on this. Please let us know of your precious views so that we could improve it further if needed. Thanks for reading our post. and don’t forget to subscribe our blog by using email notification, Facebook page or by following our twitter page. Thanks for reading our post.
There are many of reasons you might want to take a screenshot of your desktop or an scrollable webpage. One of the most common reason is to send the image to tech support company to show a problem you're experiencing. Here's how to take a screenshot on application or scrolling webpage. Last night i am working on a webpage and i need to take a screen shot for whole webpage to showing a offline webpage to my client, after searching i have found to interesting tools for taking a whole web page screen shot. 
Writing headlines for your blog that could hook those readers in an instant is a monumental task. It will determine whether or not you'll make a good impression to your target audience. Thus, creating an appealing one is essential for the sake of your blog's success. Of course, knowing that you need to create a compelling headline and actually doing it are two different things. These seven tips will help you do the latter and hopefully, be able to put them to good use.
Iframes are useful for a wide variety of content and especially for in-site navigation where you can use on to load pages or code snippets dynamically on a page without being an AJAX programmer and without using any javascript. There are many ways this can by helpful when building a website. Iframes are particularly helpful when are using a third party website and you want your website visitors to interact with it without leaving your website.
Cost-effective advertisement channel 
Pinning an image just got easier and more intuitive with this hover button. You may have noticed that some professional photographer website have custom pinterest hover button for their website's professional images, with Word Press it’s quite straightforward, whereas with Blogger it can be much more complicated, mostly for those who are hate modifying the code for their blog template.Now luckily we're excited to tell that pinterest developer team finally made an official image hover pin it button for blogger. The on hover pin it button appear just like the regular pin it button, but it only shows up when a person mouse over an image.The pin it button should disappear again when your mouse-cursor is not on the image anymore.They look great on pages with lots of images and might look and feel better if your design is on the minimal side. Pinterest developer team made it very easy to install on your blogger blog. It only takes one line of code to get the button on mouse over the image. So follow the simple step below.
Laptops are one of the most essential gadgets for businessmen these days. Businessmen carry out their each and every business tasks with the help of laptops alone. Hence they need a good company laptop with which they can work for long periods without any interruption. Laptops need to be maintained properly for good usage. What are the things that we need to keep in mind while using laptop? How to use a laptop smoothly so that it lives longer? Let us see them in detail.
