As we've previously discussed about the Appearance of blogger blog which means in the blogging competition are very huge program to prove your blog is more attractive and more beautiful better that others. Recent, I shared the
Flat 3D Colorful Cloud labels Widget For Blogger with the complete guide for pro and newbie both types of bloggers. Today I'm going to sharing a tutorial for your blogger blog appearance and more attraction. that is
How To Add Infinite Scrolling Effect In Blogger Blogs. This Effect make your blogger blog more beautiful and more professional. Basically This Effect was developed for Facebook And
WordPress blogs templates, In
Facebook when you can open your home page of your Facebook account then you can scrolling to read the updates continuously then you will seen in bottom of page an little cute loading gif image this is very cool and more attractive effect but some bloggers want to add this in their blogger blog. But Today we can also use in Blogger blogs templates. This effect shows only on your blogger blog
Homepage. When any one visit your blogger blog homepage there he/she will see the minimum and after the loading see maximum posts, as he scrolls down then automatically or animation, Load More post with animated and dashing style. So let's me explain that how it work on Blogger Templates. You can see demo of this infinite scrolling effect in blogger through the clicking the below button.
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.gif
Blue Loading Style
https://lh5.googleusercontent.com/-SVqx6fnNIsE/U8lDoDwnBjI/AAAAAAAAAkU/ebf5zSDOcug/h120/loading-blue.gif
Horizontal Loading Style
https://lh6.googleusercontent.com/-r43q1bdPEL4/U8lEIpD2c5I/AAAAAAAAAkg/qM4pTDvfMgA/h31/hori.gif
Rounding Arrows Style
https://lh6.googleusercontent.com/-r43q1bdPEL4/U8lEIpD2c5I/AAAAAAAAAkg/qM4pTDvfMgA/h31/hori.gif
Green Border
https://lh4.googleusercontent.com/-izthMBEVv_Q/U8lFCivcv1I/AAAAAAAAAkw/JAL_IZxkEIA/h120/loading2-green.gif
Final 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!
By adding instagram widget in blogger blog, you can unleash a new visual aspect of that site and allow visitors to go beyond just words on page, with the convenience to carry the application around on your smartphone whenever you go, you can take a picture, apply filters and upload that content to your profile. From your profile a widget specially developed for your blog and website. Also these widget are helps you to gain more visitors from your instagram profile.
