Wednesday 28 May 2014

How To Add Infinite Scrolling Effect In Blogger

Recently, I shared the drop down navigation menu and a little tip about adding ALT and Title Tags in images and here today I'm going to show you that how can we add an infinite scrolling effect in blogger. This effect makes our blog more professional and cute to look. Basically, This was developed for WordPress themes, but we can also use it in Blogger Templates. This effect appears on only homepage. When someone will land on the homepage, there he will see the minimum posts, as he scrolls down then automatically, more posts load with dashing style. So first let me explain that how it works and how the developers has built this effect.

Infinite Scrolling Effect

After installing this on your blog, when you will land on the homepage, first you will see the minimum posts on homepage which you've set. As you scroll down, automatically more posts will load with loading effect. This will help the readers to get even more content instantly and your readers will be served better. It is built with pure JavaScript and JQuery. Actually, This JQuery replaces the older and newer page navigation links with the effect and if you've installed this effect then those page navigation will not appear on the homepage only. This may not work in your template if you've not implemented auto post thumbnail with the read more button script.

SEE DEMO

Disadvantage Of This Plugin

As I told you that this built with pure JQuery and JavaScript so there are many peoples who disable the JavaScript in their browsers just to load pages faster. Those people disable JavaScript in their browser due to lazy operator system or even to get internet surfing speed higher. So if someone comes to your blog with JavaScript disabled in the browser, then he will be unable to see that effect and your blog will not work properly on his system. But mostly people don't disable JavaScript and now it depends on you that you should implement this in your blog or not.

How To Implement?

Installing this plugin in your blog is really left hand work. It is already built so you don't need to develop the code. So just follow the below given tips to get it in your blog.

Go To Blogger >> Template >> Backup Your Template
Click Edit HTML >> Find For </head>
Paste The Following Code Above </head>

<b:if cond='data:blog.pageType == "index"'>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>
<script src='https://bloggeryard.googlecode.com/svn/trunk/Infinite%20Scroll%20Plugin.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.ias({
container : '.blog-posts',
item: '.post-outer',
pagination: '#blog-pager',
next: '#blog-pager-older-link a',
loader: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqhB4zU4I0jhSSjhGw5Ta1zMRHYsQW-B_Sh-FkKnOVIzfHSFS6P1_qpEZp1m4TfXsYczHAjHx6V1dy5SbzCijwptk1WwOaYxZ6q8i3gUaoxc6LJL_DuiIF5HJI_CNZzaD6Oowh7EGT1KC4/s1600/loading.gif'
});
</script>
</b:if>

Replace The Highlighted Link With Any Loading Image. Copy The Loading GIF Image URL From The Following.
Hit "Save Template!".

AJAX Loader GIF Images

Below I've listed some loading images. Just copy their URL and replace it with the yellow highlighted code.

Round Loader

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqP1ijXwwGSibTaebS28ceWgdIr5JRsRRzWIraBTYqRrso3BqHbCWZqRuyTFIKiUftL3h_MWRJ1G8eRDIfEymhfNuDjSML6-DfhL5uTs1ZMqivQu8RwWvSP4-egnyvQuCPnI8AU5yK0gRq/s1600/Round+Loader.gif

Rounding Arrows

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR6jFHXcZpayeWFu78iZIicCamhYnuWEya4jnrK8G2ioRo-PjlEARttG9O0Y75f43_i4xqWlhBnMiXSWVz2bWDJm24z9l5rybgL-OK0bk1LcpiP-63T4RthETKaqiWA0Gvmg8aKuzz-Q4a/s1600/arrow+loader.gif

Silver Arrows Circle

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiYXn74hTU5DHV7lFR0w3djVHeCQ1BDr9xJ4kCp3rQ6al8f2FbPRf9UikfBnwozi-WFJynL2UnQVdZuKrvJWrIcSbVNPPgwtlAD2KJP3X7Wz6FnFfkt-AxG_TlEAKMHB-bbNLGM4tRkF-5/s1600/silver+arrows+circle.gif

Cool Blue Rouding Arrow

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggh1yBbnRKMDaJYyfbQAwo3xB-6OHgXTMu6ZkgLXJ91YkDDPyXMz6YiKaZ-UYgMNZ9LFLqY7Mo9ZkgkpovzWD244UFcfzF1gEeY73WyuNVw2Uxaq1uuPHyK6FqwTeLbs9er5_fHP1pKumI/s1600/blue.gif

Red Loader

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfuIhkDk34TkqYIsF4V_wqx_UDQNSzssdnyWBPU8Mct6i5BAnGvP6YcUIOVoTPJkgs93mOkVsbwcES3F0E6NrX3NydErHAt70phbMdiwcBip9e2E4BOnRC2RlSlFIuCM31xND9_jjZHNKu/s1600/red+loader.gif

Border Loader

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI3DRbZ9Fcwn5SF1XOakpdIh56jGL685YYTQcTkiku5tQlEwcg8fwwr4lyQqA34IPBIojFrhRu0K7JZHc4KOME7U3UshGlJtoKZAS4k6YEsLZmlQGpLllhO4ctrFpiyP0q9TE7oQ8s8UUK/s1600/border+loader.gif

Final Words

So friends this was the infinite scrolling effect which I've shared today. I hope you've liked it and also the loading images. If you're facing problem in implementing this in your blog then feel free to ask in the comments area. Stay in touch with us for more impressive content and please subscribe us to receive email updates. Take a lot of care of you and your family. Happy Blogging!

Picture Tutorials $ Free Software