Безкрайно зареждане на публикациите на главната страница на блога

Здравейте приятели. Един от елементите на уеб дизайна може да бъде зареждането на допълнителни публикации на главната страница на блога. Със сигурност сте виждали такъв ефект на някои сайтове, където на главната страницата се показват определен брой публикации, а в нейната долна част има опция да се показват и зареждат повече. Така известното LOAD MORE POSTS.

За Load More Posts

Така новите страници ще се зареждат безкрайно. Изглежда, че страницата е няма край и читателят може да превърта колкото му е необходимо.
За подобряване на навигацията в блога тази функция е прекрасна. Да приемем, че нямате страница със съдържание (карта на блога) или потребителят е просто твърде "мързелив", за да кликва върху връзки към предишни и следващи страници. Тогава една малка връзка с предложение да се показват повече и още публикации ще му позволи спокойно да се запознае с вашите материали. Те ще се зареждат, зареждат и зареждат...
Отново повтарям, че това е само на главната страница. Този вид навигация може да се види в Twitter и Facebook.
Надявам се, че обясних ясно за какво става дума, но за повече нагледност, погледнете тук. Само имайте предвид, че на главната страница се показват само 4 публикации, а връзката LOAD MORE POSTS е по-долу. Кликнете върху нея.
Да създадете безкрайно скролиране ( превъртане, зареждане ) на публикациите си в Blogger е лесно.

Код

<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>

Редактиране на кода

Този код използва jquery библиотека и нейния скрипт е в началото му. Ако вече имате инсталирана библиотеката в кода на блога си, можете да изтриете нейния скрипт, който е първи ред от предложения код.

Инсталиране

➤Отивате в раздел "Тема"➔ редактиране на HTML кода ➔ намирате затварящия таг </ body>;

➤Непосредствено над него инсталирайте кода;

➤Запаметете промяната;

➤Проверете го веднага на главната страница на блога си;

➤Маркираният текст на английски език в кода можете да замените с текст на български;


Това е един лесен начин да приложите ефекта от безкрайното зареждане на публикации в Blogger.

Нека имаме топлина, успехи и настроение. Ще се видим скоро.

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

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: