구글 블로그 '관련 글', ' 연관 글' 기능 달기 1 - 심플 버전

'관련 게시글'이란? (Related Posts)

각 개별 포스트 페이지 하단 부분에 동일한 카테고리 내에 있는 글을 랜덤으로 제목과 스니펫(본문 미리보기 요약글) 그리고 썸네일(대표 이미지)과 함께 보여줌으로서 방문자가 연관된 게시물을 추가로 접할 수 있게 해주는 기능이다.

구글 블로그에는 워드프레스처럼 관련글이나 연관글 플러그인이 없어서 따로 코드를 수작업으로 넣어줘야 한다.

여기서 소개하려는 것은 글 제목만 나열하는 가장 단순한 버전이다. 만약 썸네일과 스니펫까지 표현하고 싶다면 아래 링크를 참고할 것

구글 블로그 '관련 글', ' 연관 글' 기능 달기 2 - 고급 버전
https://pravda.tistory.com/39

 

단순 관련글 (Simple Related Posts) 기능 추가하기

1. 다음 코드를 </head> 바로 위에 복붙한다.

    <!-- Simple Related Posts Start -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <style type='text/css'>
            #related-posts {
                margin-top: 70px;
                margin-right: 0px;
                margin-bottom: 0px;
                margin-left: 0px;
            }
          
            #related-posts h2 {
                font-size: 23px;
                font-weight: 700;
                color: #000000;
                margin-bottom: 0.75em;
            }

            #related-posts a {
                font-size: 15px;
                color: #878787;
                text-transform: capitalize;
                display: block;
                padding: 1px;
                text-decoration: none;
            }

            #related-posts a:hover {
                color: #b51200;
            }

            #related-posts li {
                padding: 0px;
            }
          
        </style>
        <script type='text/javascript'>
            var relatedpoststitle=&quot;Related Posts&quot;;
        </script>
        <script type='text/javascript'>
            //<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length-1]=relatedTitles[i]}}relatedTitles=tmp2;relatedUrls=tmp}function contains(a,e){for(var j=0;j<a.length;j++){if(a[j]==e){return true}};return false}function printRelatedLabels(currenturl){for(var i=0;i<relatedUrls.length;i++){if(relatedUrls[i]==currenturl){relatedUrls.splice(i,1);relatedTitles.splice(i,1)}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>1){document.write('<h2>'+relatedpoststitle+'</h2>')}document.write('<ul>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</ul>');relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length);}
//]]>
        </script>
    </b:if>
    <!-- Simple Related Posts End -->

<style type='text/css'> ~ </style> 사이에 있는 CSS 코드를 원하는 디자인으로 수정할 수 있다.

2. 다음 코드를 <data:post.body/> 바로 아래에 복붙한다.

    <!-- Simple Related Posts Start -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div id='related-posts'>
        <b:loop values='data:post.labels' var='label'>
          <b:if cond='data:label.isLast != &quot;true&quot;'/>
          <b:if cond='data:blog.pageType == &quot;item&quot;'>
            <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if>
        </b:loop>
            <script type='text/javascript'>
              var maxresults=5;
              removeRelatedDuplicates();
              printRelatedLabels(&quot;<data:post.url/>&quot;);
            </script>
      </div>
    </b:if>
    <!-- Simple Related Posts End -->

3. 진한 빨간색으로 칠해진 maxresults 값을 설정하면 나열되는 관련 글 개수를 조정할 수 있다. 저장 후 코드가 제대로 작동하는지 확인하면 끝이다.

 

2022. 3. 15.

 

https://wlsfl1.blogspot.com/