Навигация. Бутон „Зареждане на още публикации“ и безкрайно превъртане в 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 на индексните страници - начална страница, архив, страници с етикети.

    Важно!


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


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

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




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


    Следвайте Blogzablogove

    OpenCloseComments

    3 Komentar

    • peSho 22 януари 2020 г. в 10:26
      Бързо и лесно!

      *Благодаря ви! :)
      • Пепа 22 януари 2020 г. в 11:04 ?
        Здравейте, peSho, радвам се за вас! Радвам се, че се появихте след празничната пауза. И за това, че съм полезна. Поздрави! А, за малко да забравя, последната ви публикация за Смолян е много интересна.
      • peSho 22 януари 2020 г. в 14:45 ?
        Здравейте!

        Полезна сте както винаги. Дори да не съм го отбелязал с коментар някъде, аз се черпя с не малко неща от тук! Гордо заявявам, че не спирам да се уча от вас.

        Радвам се, че "хвърляте" по едно око на моите публикации.
    Cancel