How to Add JQuery Load More Posts OR Infinite Scrolling to Blogger

<span style="font-family: inherit;">Technology is running with rocket's speed and also technology is increasing in the world of web that why we can add as much as new features in the blog be'coz blogging is so much flexible than a website. So, we can add many new and professional features in our blog and same like it "There is an another feature named as <b><span style="color: #0b5394;">LOAD MORE POSTS</span></b>. Today you will get to know that how can we add that <b><span style="color: #0b5394;">LOAD MORE POSTS</span></b> or <b><span style="color: #0b5394;">INFINITE POSTS SCROLLING</span></b>. This is very simple and very easy to install but this effect made by jQuery.</span><br /> <span style="font-family: inherit;"><br /></span> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUTIBm3tDzEuy-px6KGxV5u7khgujGbCFPXrsSe2c9Tc-uN1afEMBvanxaQf1F7_Flz4xAB7tTQIwiPNwLRZsjFVHt3QRH9Kn6pzQoqnaBbRwuHl8V6tl-1cWaEjsK1nMcF1EYYG9tuQcw/s1600/How+to+Add+Load+More+Posts+OR+Infinite+Scrolling+to+Blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUTIBm3tDzEuy-px6KGxV5u7khgujGbCFPXrsSe2c9Tc-uN1afEMBvanxaQf1F7_Flz4xAB7tTQIwiPNwLRZsjFVHt3QRH9Kn6pzQoqnaBbRwuHl8V6tl-1cWaEjsK1nMcF1EYYG9tuQcw/s640/How+to+Add+Load+More+Posts+OR+Infinite+Scrolling+to+Blogger.jpg" width="640" /></a></div> <span style="font-family: inherit;"><br /></span> <b><span style="color: #0b5394;">Step 1 :</span></b> Now let's start adding it... <br /> <br /> <br /> <div> <div style="text-align: right;"> <div style="text-align: left;"> <b><span style="color: #0b5394;">Step 2:</span></b> Login to Your Blogger Account.Go to your <span style="color: #0b5394;"><b>Blogger Dashboard></b><b style="background-color: white;">Template</b>> <b><span style="background-color: white;">Edit HTML</span></b>> <b>Proceed</b>.</span></div> <div style="text-align: left;"> <span style="color: #0b5394;"><br /></span></div> </div> <div style="text-align: right;"> <div style="text-align: left;"> <b><span style="color: #0b5394;">Step 3:</span></b> Find [by pressing <kbd style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid gray; box-shadow: rgb(238, 238, 238) 1px 0px 1px 0px, rgb(204, 204, 204) 0px 2px 0px 2px, rgb(68, 68, 68) 0px 2px 0px 3px; font-size: 1.2em; margin: 2px 3px; padding: 1px 5px;">Ctrl</kbd><span style="font-family: Georgia, serif; font-size: 13.63636302947998px;"> + </span><kbd style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid gray; box-shadow: rgb(238, 238, 238) 1px 0px 1px 0px, rgb(204, 204, 204) 0px 2px 0px 2px, rgb(68, 68, 68) 0px 2px 0px 3px; font-size: 1.2em; margin: 2px 3px; padding: 1px 5px;">F</kbd> ] this code in the template:</div> <blockquote class="tr_bq" style="text-align: left;"> <span style="font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;"></head></span></span></blockquote> <div style="text-align: left;"> <b><span style="color: #0b5394;">Step 4:</span></b><span style="font-family: inherit;"> <span style="font-size: medium; text-align: right;">Paste below code before </head></span></span></div> <blockquote class="tr_bq" style="text-align: left;"> <span style="font-family: "Courier New",Courier,monospace;"><b:if cond='data:blog.pageType == "index"'><br /> <script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/><br /> <script src='https://googledrive.com/host/0Bxsq9VDr3zyFMjNlYjhNeWlza1U' type='text/javascript'/><br /> <script type='text/javascript'><br /> jQuery.ias({<br />     container : '.blog-posts',<br />     item: '.post-outer',<br />     pagination: '#blog-pager',<br />     next: '#blog-pager-older-link a',<br />     loader: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-cSjtHWjiGGDAOoVrLrV1XhzYSpjUXedqBnpSCed9BMlseQaN94ZoXNS3QNf8gLwD1K9Cz73cuigdjLoB5UBGo48CQgG7ROI656LRHIqacYpXwppmiJTy_ieY3kSShHQkexer2o4bkPRg/s1600/wgloading.gif'<br /> });<br />   </script><br /> </b:if></span></blockquote> <br /> <div style="text-align: left;"> <b><span style="color: #0b5394;">Step 5:</span></b> <span style="font-family: inherit;">You have Done. <span style="text-align: right;">Finally <b><span style="color: #0b5394;">Save Your Template.</span></b></span> </span></div> <div style="text-align: left;"> <span style="font-family: inherit;"><br /></span></div> <div style="text-align: center;"> <span style="font-family: inherit;">Load More Post widget simply made  by using the jQuery and this can install very easily but adding the some simple codes, but as we said this widget made by jQuery you it can affect your template some where like javascript could be affect by this jQuery codes but don't worry it will not affect your other important plugins. So go and add this.</span></div> </div> </div>

How to Add JQuery Load More Posts OR Infinite Scrolling to Blogger

Technology is running with rocket's speed and also technology is increasing in the world of web that why we can add as much as new fea...

Read more »