Blog Posts Me Awesome ‘Load More’ Button Kaise Add Kare

0

Dosto ek new blogger ke liye ye post bhut he intersting hai. kyuki esa koi blogger nhi hoga jo nhi cahega ki uska blog ek acha designed na ho. esliye aaj ham aapke liye ye ek bhut he bhetreen post lekar aaye hai. dosto aaj ki post ka naam padhkar thoda bhut to aap smajh he gye honge ki aaj ki post ki baare me hai. dosto aaj ham aapko ek awesome loadmore button ke baare me batainge jo ki bhut intersting button hai esko add karne ke baad aap without searching apne more post ko dekh sakte hai.

 



Blog Posts Me Awesome ‘Load More’ Button Add Kare?

Sabse phele neeche diye gye dono codes me se jo aapko pasand aaye us ko copy kar le.

#1 Code

es code ko add karne ke baad aapke blog ke hompage par loadmore buttn add ho jayega. jis par click karne par without searching aapki older posts khul jayinge.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'/>
 <b:if cond='data:blog.pageType != "static_page"'>
 <b:if cond='data:blog.pageType != "item"'>
 <script type='text/javascript'>
 //<![CDATA[
 !function(a){function b(){h||(h=!0,d?(f.find("a").hide(),f.find("img").show(),a.ajax(d,{dataType:"html"}).done(function(b){var b=a("<div>
 </div>
 ").append(b.replace(k,"")),c=b.find("a.blog-pager-older-link");c?d=c.attr("href"):(d="",f.hide());b=b.find(g).children();a(g).append(b),window._gaq&&window._gaq.push(["_trackPageview",d]);window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go();window.disqus_shortname&&a.getScript("http://"+window.disqus_shortname+".disqus.com/blogger_index.js");window.FB&&window.FB.XFBML&&window.FB.XFBML.parse&&window.FB.XFBML.parse();f.find("img").hide();f.find("a").show();h=!1})):f.hide())}function c(){var a=Math.max(i.height(),j.height(),document.documentElement.clientHeight),c=i.scrollTop()+i.height();0>a-c&&b()}var d="",f=null,g="div.blog-posts",h=!1,i=a(window),j=a(document),k=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;a(document).ready(function(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(d=a("a.blog-pager-older-link").attr("href"))){var g=a('<a href="javascript:;" >LOAD MORE POSTS</a>');g.click(b);i.scroll(c);f=a('<div class="load-more">
 </div>
 ');f.append(g);f.append(e);f.insertBefore(a("#blog-pager"));a("#blog-pager").hide()}})}(jQuery);//]]>
 </script>
 <style type="text/css">
 .load-more{display:block;text-align:center;margin:20px auto;}.load-more a,.load-more a:hover{text-decoration:none;font:bold 11px Open Sans, sans-serif;letter-spacing:1px;padding:10px 20px;background:#000000;color:#ffffff;}
 </style>
 </b:if>
 </b:if>

#2 Code

es code ko add karne ke baad aapke blog ke hompage par loadmore buttn add nhi hoga. bulki without button srolldown karne par automatic  older post khul jayinge.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'/>
 <b:if cond='data:blog.pageType != "static_page"'>
 <b:if cond='data:blog.pageType != "item"'>
 <script type='text/javascript'>
 //<![CDATA[
 !function(a){function b(){h||(h=!0,d?(f.find("a").hide(),f.find("img").show(),a.ajax(d,{dataType:"html"}).done(function(b){var b=a("<div>
 </div>
 ").append(b.replace(k,"")),c=b.find("a.blog-pager-older-link");c?d=c.attr("href"):(d="",f.hide());b=b.find(g).children();a(g).append(b),window._gaq&&window._gaq.push(["_trackPageview",d]);window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go();window.disqus_shortname&&a.getScript("http://"+window.disqus_shortname+".disqus.com/blogger_index.js");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();f.find("img").hide();f.find("a").show();h=!1})):f.hide())}function c(){var a=Math.max(i.height(),j.height(),document.documentElement.clientHeight),c=i.scrollTop()+i.height();150>a-c&&b()}var d="",f=null,g="div.blog-posts",h=!1,i=a(window),j=a(document),k=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;a(document).ready(function(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(d=a("a.blog-pager-older-link").attr("href"))){var g=a('<a href="javascript:;" >LOAD MORE POSTS</a>');g.click(b);i.scroll(c);f=a('<div class="load-more">
 </div>
 ');f.append(g);f.append(e);f.insertBefore(a("#blog-pager"));a("#blog-pager").hide()}})}(jQuery);
 //]]>
 </script>
 </b:if></b:if>
code ko copy karne ke baad apne blog ke edit html me jaker ctrl + F dbaker </head> search kare.
search karne ke baad copy kiye hue code ko </head> ke upar paste kar de.
Now All Done! ab aapka kaam ho chuka. u can check ur blog. & happy blogging! 
agar aapko en steps me koi problem aa rhi hai, to neeche comment me puch sakte hai. & don’t forgot to share this article on social media.

 

Thanks for Reading!  😎 


LEAVE A REPLY

Please enter your comment!
Please enter your name here