블로거에 게시물 무한스크롤을 추가하는 방법

트위터나 페이스북에서 게시글을 아래로 읽어나가다 보면 화면이 끝나는 지점에서 이전의 게시글이 자동으로 보여지는 것을 볼 수 있다. 이 같은 기능이 무한스크롤링이다.

무한스크롤링은 홈페이지 게시판의 페이지기능을 대체 한 것으로 처음 접하는 경우 참신하다고 느끼게 된다. 현재 블로거의 동적뷰 템플릿에서 기본 적용이 되는 무한스크롤링 기능을 일반 커스텀 템플릿에서 적용하는 방법을 소개한다.

manki's weblog를 방문하면 무한스크롤 기능을 위한 자바스크립트 소스를 공유하고 있다. 게시자인 MUTHU KANNAN이 지속적으로 버전업을 하고 있다.

사용방법은 그리 어렵지 않다. HTML/JavaScript 위젯을 추가하고 내용에 아래 스크립트를 붙여넣는다. 제목은 가급적 비워둔다.

---

HTML/JavaScript 위젯으로 추가하는 방법

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"/>
<script src="//m-misc.appspot.com/js/blogger-infinite-scrolling.js" type="text/javascript"/>

템플릿에 추가하는 방법

<script type='text/javascript'>  
//<![CDATA[
(function(a){function h(){g||(g=!0,d?(b.find("a").hide(),b.find("img").show(),a.ajax(d,{dataType:"html"}).done(function(c){var c=a("<div></div>").append(c.replace(j,"")),e=c.find("a.blog-pager-older-link");e?d=e.attr("href"):(d="",b.hide());c=c.find(i).children();a(i).append(c);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();b.find("img").hide();b.find("a").show();g=!1})):b.hide())}function k(){var a=Math.max(f.height(),l.height(),document.documentElement.clientHeight),b=f.scrollTop()+f.height();150>a-b&&h()}var d="",b=null,i="div.blog-posts",g=!1,f=a(window),l=a(document),j=/<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 c=a('<a href="javascript:;">Load more posts</a>');c.click(h);var e=a('<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVRNbhPR_HXfLcxyLMTLDSOK_HV0QsDbhMHaK50zDp6kPe8tekGrxpW3q6MsBldiwls8MQ9oV6_DICUk8_iWiftd491fGm0LVNRqlAcYD8L_BLL9LdWkXdJi56lSAGuTDiBBD4S4PTtdUd/s32/ajax-loader.gif" style="display: none;">');f.scroll(k);b=a('<div style="text-align: center; font-size: 150%;"></div>');b.append(c);b.append(e);b.insertBefore(a("#blog-pager"));a("#blog-pager").hide()}})})(jQuery);
//]]>
</script>