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.
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/AVvXsEiRDIH0eHqTUzJ-My3Aj4imwvYOZr8_ZEfq0gHaOUbS6HIkhoVt9aoBU2vyw3dz4o-tKyJPpdBZ63yuS6DFTyIIxq7Yu52eXyLAqt0vvGhadUEC6ZLJwNhF4LUaYGxvdrwRj_aJ_29rlrfz/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/AVvXsEh80yoH1H7hgm-6O7jc849ddwq1PVDyYL5oEXAUUoELoFUQUdmpcNM1w-CsPzh2jQAgerHcDG-v-_lj2Ts1VQmnBbW0kv1OXQNSVhizMdjqezfpQYFEzmi1LuvXJTlwk6-nmxWnDimNRW8h/s1600/Round+Loader.gif
Rounding Arrows
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqXAz9l3RCahXpsowlXTJv8UcUUvVZbPcx_Swprfxq0vBTlisqebk04gg2LAPr4UsI5fGfXZubDzIcZWJde3LrWaMmxJt3VNVWXCRj5S97hV9qwxO9cqJ0ZWtztOgXhVsVs4FdXDAotKDw/s1600/arrow+loader.gif
Silver Arrows Circle
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3vu0lYvmcKvsM9-JkMy691mHQ92mWNeBH-iZcruJ_zDmcgEMKo8NjtBzVU8v9c9IikD71m89PROk1zTroWoQG7rHUX1oTo6FGmDHmDha9vEJETd9XXcyfX1vEtxmI0cJPwqtOxMPIsgrA/s1600/silver+arrows+circle.gif
Cool Blue Rouding Arrow
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz9t-Czr4zV0LV0T6CyORzUY9kMPEW9l8rrrlUYMk_BUng_GiYV8ag152Z15JRYH0j6VmTOr0DIZr6q7OYCo2Q2Z_gw9E9iafUk5fjkv70WrU5B4PRLDytqzVD040fVmbH2CzbciLHX0ui/s1600/blue.gif
Red Loader
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8SJjK3lescg1dIYqnHB9euddntN6Ug_cUXN8NgX2BI72Rd_TmsMrwbGLedXKaD4iiB3oFvGAlvEZKawrJBsc4IvtlTX28HcSDr4OYaSiRmqai1qpTIBeT9duvYVheE_zE3RFz_FCLDzIm/s1600/red+loader.gif
Border Loader
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivJNhnS8GaOxl75e29lGprlBGftMtToOyOSKj6mciWJPTg1A53QQP0fmU38twzIGanzk49_qStYQDPaEM7T637rmJxONOtDnkHXNZ9Rj67GPrEHWkqZgWujh5Uf17lHxrW6USPbWJ1gJWU/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!
Get Free UpDates ?
If yes, Then enter your email below to get
more such great articles in your inbox
Powered By HAmza Gujjar Get Free !
Posts
0 comments:
Post a Comment