How To Add Load More Posts Button In Blogger

bySULTAN STUDIO -
0

 Adding a "Load More Posts" button to a Blogger blog involves modifying your template and potentially using some custom code. Here's a step-by-step guide to help you through the process:

Step 1: Backup Your Template

  1. Go to Blogger Dashboard: Log in to your Blogger account and go to the dashboard.
  2. Navigate to Theme: Click on "Theme" from the left sidebar.
  3. Backup Your Theme: Click on the "Backup/Restore" button at the top right corner. Download a backup of your current theme in case anything goes wrong.

Step 2: Add Custom JavaScript and CSS

  1. Go to Theme Code Editor: In the "Theme" section, click on the "Customize" button, then select "Edit HTML" from the drop-down menu.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'/> <b:if cond='data:blog.pageType != &quot;static_page&quot;'><b:if cond='data:blog.pageType != &quot;item&quot;'> <script type='text/javascript'> //<![CDATA[ function resizeThumb(e,n){for(var t=document.getElementById(e).getElementsByTagName("img"),a=0;a<t.length;a++)t[a].src=t[a].src.replace(/\/s72\-c/,"/s"+n+"-c")}window.labelfx=function(){var e=function(e){var n=e||{},t=n.url_blog||window.location.host,a=n.id_labelcontent||"#labelfxn";$.ajax({url:"http://"+t+"/feeds/posts/summary?max-results=0&alt=json-in-script",type:"get",dataType:"jsonp",success:function(e){var n=e.feed.category,t="";if(void 0!==n){t="<ul class='labelx'>";for(var i=0;i<n.length;i++)t+='<li><a href="/search/label/'+encodeURIComponent(n[i].term)+'" target="_blank">'+n[i].term+"</a></li>";t+="</ul>",$(a).html(t)}else $(a).html("<span>No Label!</span>")},error:function(){$(a).html("<strong>Error Loading Feed!</strong>")}})};return function(n){e(n)}}(),resizeThumb("main",250),labelfx(),function(e){function n(n){e.getScript("http://"+n+".disqus.com/blogger_index.js")}function t(){s||(s=!0,o?(r.find("a").hide(),r.find("img").show(),e.ajax(o,{dataType:"html"}).done(function(t){var a=e("<div></div>").append(t.replace(l,"")),i=a.find("a.blog-pager-older-link");i?o=i.attr("href"):(o="",r.hide());var p=a.find(d).children(".date-outer");e(d).append(p),resizeThumb("main",250),window._gaq&&window._gaq.push(["_trackPageview",o]),window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go(),window.disqus_shortname&&n(window.disqus_shortname),window.FB&&window.FB.XFBML&&window.FB.XFBML.parse&&window.FB.XFBML.parse(),window.twttr&&window.twttr.widgets&&window.twttr.widgets.load&&window.twttr.widgets.load(),r.find("img").hide(),r.find("a").show(),s=!1})):r.hide())}function a(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(o=e("a.blog-pager-older-link").attr("href"))){var n=e('<a class="loadpost" href="javascript:;" style="text-decoration:none;font:11px Open Sans, sans-serif;letter-spacing:1px;padding:10px 20px;background:#000000;color:#ffffff;">LOAD MORE POSTS</a>');n.click(t);var a=e('<img src="'+i+'" style="display: none;">');(r=e('<div style="display:block;text-align:center;margin:20px auto;"></div>')).append(n),r.append(a),r.insertBefore(e("#blog-pager")),e("#blog-pager").hide()}}var i="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCK9UnrId7SB3JrfsZsPEK64lNZg9QzZ7fPIXPSFZZAexjVuZuOvqOfJkli4boRz47DFD18PNWBBHnUMVJt6G84aeb4g9WYWfGnFqtzXePzvqnyJOa8lNvJtqSZr4jtwiMnEBvtL4n43jT/s1600/loader.gif",o="",r=null,d="div.blog-posts",s=!1,l=(e(window),e(document),/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi);e(document).ready(a)}(jQuery); //]]></script></b:if></b:if>

  1. Insert CSS for the Button: Find the <head> section of your HTML and add the following CSS 

Step 3: Adjust Your Template

  1. Locate Post Container: Find the section in your HTML where the posts are listed. Look for a <div> or similar element that contains the blog posts and note its class or ID.

  2. Add the Button to Your Template: Ensure that the button is placed where you want it to appear. You might need to adjust the CSS and JavaScript selectors accordingly.

Step 4: Save and Test

  1. Save Your Changes: Click the "Save" button to apply your changes.
  2. Preview Your Blog: Visit your blog and test the "Load More Posts" button to ensure it works as expected.


Notes

  • Pagination Issues: Depending on your theme, you might need to adjust how the pagination is handled. The code provided assumes basic pagination.
  • Cross-Browser Compatibility: Make sure to test the button in different browsers to ensure compatibility.
  • Performance: Adding too many posts on a single page can affect performance, so use this feature judiciously.

By following these steps, you should be able to add a functional "Load More Posts" button to your Blogger blog. If you encounter any specific issues, feel free to ask for further assistance!


Tagged With
  • add load more posts button to blogger
  • add infinte scrolling to blogger
  • add ajax load more post script to blogger
  • add load more posts button to blogger custom template
  • show load more posts button instead of number links in blogger
  • ajax infinite scrolling script for blogger
  • enable infinte scrolling to blogger blog
  • load infinte posts as scroll down for blogger
  • infinte posts loading script for blogger


Tags:
Post a Comment (0)
Previous Post Next Post