[블로그] 구글 블로거에 관련 글 보여주기를 달아보자. (Related article)

구글 블로거에 관련 글 보여주기를 추가하는 방법입니다.

블로그 새단장을 준비하며, 예전에 짜 두었던 관련 글 보여주기 소스를 좀 개선했습니다.
내 블로그에서 같은 태그가 달린 글을 검색해서 관련 글로 보여줘요.
관련글 보여주기를 달기 위해선 템플릿(스킨)을 수정해야 합니다.
구글 블로거에 관련 글 보여주기를 달고 싶은 분은, 마음껏 가져다 쓰세요.:D

Head 태그 안에 다음 코드를 추가 해 줍니다.(구글 API키 필요)

<script src='http://www.google.com/jsapi?key=MYAPIKEY' type='text/javascript'/>

스타일 시트에 다음 코드를 추가 해 줍니다.

#related-side{display:none;visibility:hidden;} #related-posts{padding:15px;}

구글 블로거 템플릿에서 <data:post.body/>를 검색해서, <data:post.body/> 아래에 다음 코드를 추가해 줍니다.

<aside id="related-side">
<br/>
<h4><data:post.title/> 관련 글</h4>
<div id='related-posts'/>
</aside>
<script type='text/javascript'>
// 구글 블로거용 관련글 검색 모듈 by 月風(http://dorajistyle.pe.kr)
google.load(&quot;gdata&quot;, &quot;1.x&quot;, { packages : [&quot;blogger&quot;] });
    function getRelated() {
    function eliminateDuplicates(arr) {var i,j=0,len=arr.length,out="",obj={};for (i=0;i&lt;len;i++) {obj[arr[i]]=0;}for (i in obj) {if(j>=9)break; out+=i;j++;}return out;}   
    var relPostArray = new Array();
    var funcvar1=0;    var bloggerService = new google.gdata.blogger.BloggerService(&#39;dorajistylerelatedposts&#39;);
    var handleQueryResults = function(resultsFeedRoot) {   
    var blogFeed = resultsFeedRoot.feed;var html,postTitle,entryUri;var postEntries = blogFeed.getEntries();for (var i = 0; postEntry = postEntries[i]; i++) {var postTitle=postEntry.getTitle().getText(),entryUri=postEntry.getHtmlLink().getHref();if(title==postTitle) continue;var html= &#39;&lt;li&gt;&lt;a rel=\&#39;bookmark\&#39; title=\&#39;&#39;+ postTitle + &#39;\&#39; href=\&#39;&#39;+entryUri+&#39;\&#39;&gt;&#39;+ postTitle + &#39;&lt;/a&gt;&lt;/li&gt;&#39;;
    relPostArray.push(html);}   
    funcvar1++;    if (funcvar1 == filtArray.length) {var urlfinal=eliminateDuplicates(relPostArray);if(urlfinal.length>0){var aside=document.getElementById(&quot;related-side&quot;);aside.style.display=&#39;block&#39;;aside.style.visibility=&#39;visible&#39;;var elem=document.getElementById(&quot;related-posts&quot;);var content=&#39;&lt;ul&gt;&#39;;content+=urlfinal;content+=&#39;&lt;/ul&gt;&#39;;
    elem.innerHtml=&#39;&lt;ul&gt;&#39;;elem.innerHTML=urlfinal;elem.innerHtml+=&#39;&lt;/ul&gt;&#39;;elem.innerHtml+=content;}}
    };       
    var handleError = function(error) {};
    var tagString=&#39;&#39;;
    var labelArray = new Array();<b:loop values='data:post.labels' var='label'>
    tagString+=&quot;<data:label.name/>&quot;;
    tagString+=&#39;,&#39;
    </b:loop>       
    tagString=tagString.substring(0,tagString.length-1);
    var filtArray = tagString.split(&#39;,&#39;);var title =&#39;<data:post.title/>&#39;;
    var feedUri,query;    for (var i = 0; i &lt; filtArray.length; i++){feedUri = &#39;/feeds/posts/default/-/&#39; + filtArray[i]; query = new google.gdata.blogger.BlogPostQuery(feedUri);    bloggerService.getBlogPostFeed(query, handleQueryResults, handleError);}
    }   
    google.setOnLoadCallback(getRelated);
</script>

구글 블로거용 관련글 보여주기 모듈로, 블로그 방문자들에게 편의를 제공하세요.:D



by


Tags : , , , , , , ,

  • 재미있게 읽으셨나요?
    방랑자의 이야기.
    월풍도원에선 기부를 받습니다.