구글 블로그 이전, 다음 링크 만드는 방법

구글 블로그 이전, 다음 링크 만드는 방법에 대해 알아보아요! 구글 블로그에서 이전, 다음에 a 태그 및 href 어트리뷰트를 설정하고 난 다음, 다음의 자바 스크립트 코드를 통해 링크를 꾸밀 수 있습니다.

<script type='text/javascript'> 
//<![CDATA[ 
  (function($){    
      var newerLink = $('a.newer-link'); 
      var olderLink = $('a.older-link');
      $.get(newerLink.attr('href'), function (data1) { 
        var thumb=$(data1).find('.post-entry img:first').length>=1?"<img src='"+$(data1).find('.post-entry img:first').attr('src').replace(/s\B\d{2,4}/,'s' + 120)+"' class='pager-thumb'/>":"";
        newerLink.html(thumb+'<div>다음&#10084;&#65039; <span>'+$(data1).find('.post .entry-title').text()+'</span></div>');    
      },"html"); 
      $.get(olderLink.attr('href'), function (data2) { 
        var thumb2=$(data2).find('.post-entry img:first').length>=1?"<img src='"+$(data2).find('.post-entry img:first').attr('src').replace(/s\B\d{2,4}/,'s' + 120)+"' class='pager-thumb'/>":"";
        olderLink.html(thumb2+'<div>이전&#10084;&#65039; <span>'+$(data2).find('.post .entry-title').text()+'</span></div>');    
      },"html"); 
  })(jQuery); 
//]]> 
</script>
  • 다음의 내용을 참고하여 수정하셔서 사용하세요.
  • 블로그 제목 클래스는 entry-title로 가정합니다. 해당 제목으로 이전, 다음글의 링크 명칭으로 설정합니다.
  • 블로그의 본문 클래스는 post-entry로 가정합니다.
  • 클래스는 pager-thumb로 추가합니다.
  • <div>이전 및 다음을 지칭하는 단어, <span>제목</span></div> 형식으로 구성합니다.
  • replace(/s\B\d{2,4}/,'s' + 120) 부분은 s로 시작하며 워드 바운드리가 아닌 숫자 2~4자리를 찾아 s120으로 바꿉니다. 제 게시물을 기준으로, 이미지에 있는 s16000이라는 숫자가 s1200으로 변경되는 것으로 보입니다. 해상도를 낮추려는 의도로 보입니다.
댓글 쓰기
가져가실 때, 출처 표시 부탁드려요! 감사합니다. 💗