How This Work?
We're made this Infinite Scrolling Effect with the help of JQuery and some JavaScript files. When you can go your blog home page then you will see the minimum posts on your same page and as you scroll down with the help of your mouse, automatically more will loaded with the Dashing Loading Style. This will help to your visitors get even more posts and articles instantly and your visitors served the posts better. I will replaced this Jquery with older and newer pages links with the dashing styles. This effect was built with the Pure JQuery and JavaScript. If you've enabled the JavaScript option in your browser then it will appear on your homepage otherwise not.
But This Effect has some disadvantages to make your blogger blog bad. As I tell you in above paragraph that I was made this effect with the help of JavaScript and Jquery so there are many visitors of your blogs who disable the JavaScript in their browser for the faster internet surfing. He/she will be disabled the JavaScript of their browser they then he/she will be not able to see this effect and your blogger blog not working with this effect only disabled javasript browsers. This effect support only JavaScript Enabled browsers If you was disabled your javascript then you will be enabled it from your browsers settings.
How To Install This Effect In Blogger Blogs?
After gaining some knowledge about this infinite scrolling effect I was already developed the code so you no need to make your code. Now let's time to add this in your blogger blog it is so simple to implement this in blogger blog. Just follow below steps.
- Go To Blogger Dashboard>>Template>>Edit HTML
- Find the below tag Using (Ctrl+F)
</head>
- Paste the Following Code above the </head>
<b:if cond='data:blog.pageType == "index"'>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>
<script src='http://next-blogger-tricks.googlecode.com/svn/trunk/Infite%20Scrolling%20by
%20NextBloggerTricks.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://lh5.googleusercontent.com/-PEv8OFUamwc/U8k_KPDDO9I/AAAAAAAAAkA/YU4P7JtibQ4/h120/loading-blue.gif'
});
</script>
</b:if>
- Replace the Red highlighted link with any .gif Loading Image links. Copy the Loading GIF Images URL from the following.
- Click On "Save Template"!
Ajax Loading GIF Images
I have some ajax loading animated loading gif images choose one of the following and replace the red highlighted image link with your chooses image.
Facebook Styles
https://lh4.googleusercontent.com/-lHlQW6jV550/U8lDMZcxhcI/AAAAAAAAAkM/_6cKBFiFHSw/h120/Facebook+Style.gifBlue Loading Style
https://lh5.googleusercontent.com/-SVqx6fnNIsE/U8lDoDwnBjI/AAAAAAAAAkU/ebf5zSDOcug/h120/loading-blue.gifHorizontal Loading Style
https://lh6.googleusercontent.com/-r43q1bdPEL4/U8lEIpD2c5I/AAAAAAAAAkg/qM4pTDvfMgA/h31/hori.gifRounding Arrows Style
https://lh6.googleusercontent.com/-r43q1bdPEL4/U8lEIpD2c5I/AAAAAAAAAkg/qM4pTDvfMgA/h31/hori.gifGreen Border
https://lh4.googleusercontent.com/-izthMBEVv_Q/U8lFCivcv1I/AAAAAAAAAkw/JAL_IZxkEIA/h120/loading2-green.gifFinal Words
So friends this is our today's and most viewed post of our site this is a best method to improve your template professionalism and more attractive I hope you're successfully add this effect in your blogger blog if not? you're facing problems or getting error during this process so leave comments for solutions and don't forget to like our Facebook page and also share this tutorial with your friends on social networking sites.
Happy Blogging!
Blogging is the best option to share your experiences and your knowledge to people. If you are providing unique and informative information to your users then your user share your content on their social networks that a good reward for your work.
ReplyDeleteSoftware Development Milwaukee