Навигация. Бутон „Зареждане на още публикации“ и безкрайно превъртане в Blogger

Здравейте, приятели. Преди почти две години ви запознах с начина, по който да осъществите безкрайно зареждане на публикациите на главната страница на блога си. Днес подхващам отново тази тема, но в друг вариант - бутон „Зареждане на още публикации“ и безкрайно превъртане в Blogger

Вместо да се показват хипервръзките „по-стари - по-нови публикации“ като навигация в края на страницата, можем да направим така, че да се зареждат нови публикации динамично всеки път, когато посетителят ни натисне бутона „Зареждане на още публикации“. Или само като превърта надолу страницата.
Този урок ще ви покаже как да внедрите скрипт за зареждане на нови публикации на базата на Ajax, чрез който ще добавите бутона „Зареждане на още публикации“ или ще се осъществява безкрайно превъртане на страницата, така че посетителите да могат лесно да се движат по нея, без да я презареждат. Един нов вид навигация за вашия блог.

Възможности

Имате две възможности:
➤Да добавите бутон „Зареждане на още публикации“, който посетителят трябва да натисне;


DEMO

Код на превъртане с бутон „Зареждане на още публикации“

<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/AVvXsEiHBfsfmcSkd62RML9jH0x3lTplmTrc2_3Pxz0Npu17qmc3dQGAN0qRTgfxS6v803aICLZiSQnVRJN0MalEt_cklcdqtf9YdwL3T-iIQM6-xjL-f2-tiRJDB5m3EEldn4KmwsPkO9I43Xkk/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>

➤Автоматично зареждане на публикации, при всяко превъртане надолу по страницата;


DEMO

Код за автоматично зареждане на публикации

<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;'>
<style type="text/css">.status-msg-wrap{display:none;}</style>
<script type='text/javascript'>
//<![CDATA[
!function(i){function e(e){i.getScript("http://"+e+".disqus.com/blogger_index.js")}function t(){g||(g=!0,r?(w.find("a").hide(),w.find("img").show(),i.ajax(r,{dataType:"html"}).done(function(t){var n=i("<div></div>").append(t.replace(c,"")),o=n.find("a.blog-pager-older-link"),d=n.find(s).children();i(s).append(d),window._gaq&&window._gaq.push(["_trackPageview",r]),window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go(),window.disqus_shortname&&e(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(),o?r=o.attr("href"):(r="",w.hide()),w.find("img").hide(),w.find("a").show(),g=!1})):w.hide())}function n(){return Math.max(p.height(),l.height(),document.documentElement.clientHeight)}function o(){n()-(p.scrollTop()+p.height())<150&&t()}function d(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(r=i("a.blog-pager-older-link").attr("href"))){var e=i('<a href="javascript:;">Load more posts</a>');e.click(t);var n=i('<img src="'+a+'" style="display: none;">');p.scroll(o),(w=i('<div style="text-align: center; font-size: 150%;"></div>')).append(e),w.append(n),w.insertBefore(i("#blog-pager")),i("#blog-pager").hide()}}var a="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHBfsfmcSkd62RML9jH0x3lTplmTrc2_3Pxz0Npu17qmc3dQGAN0qRTgfxS6v803aICLZiSQnVRJN0MalEt_cklcdqtf9YdwL3T-iIQM6-xjL-f2-tiRJDB5m3EEldn4KmwsPkO9I43Xkk/s1600/loader.gif",r="",w=null,s="div.blog-posts",g=!1,p=i(window),l=i(document),c=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;i(document).ready(d)}(jQuery);
//]]>
</script>
</b:if></b:if>

Инсталиране 

И двата кода се вписват в кода на темата преди реда </body>. Как намерите този ред, вече знаете.

Важно!

На това място в темата впишете само един от двата кода, според вашия избор на вариант.

След като бъде приложен в темата скриптът за „Зареждане на още публикации“ или безкрайно превъртане работи за всички публикации в Blogger на индексните страници - начална страница, архив, страници с етикети.

Важно!

Този скрипт не може да се добавя в отделни публикации.

Е, вече имате съвременна навигация във вашия блог.
За въпроси моля, в коментарите. А може и на тази страница.
Ще съм благодарна да оцените моя труд. Моля, гласувайте за блога ми на:

Или подкрепете моя проект

Здраве за всички вас! Не забравяйте да правите добро на други хора!


Следвайте Blogzablogove