구글 블로그 이전, 다음 링크 만드는 방법에 대해 알아보아요! 구글 블로그에서 이전, 다음에 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>다음❤️ <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>이전❤️ <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으로 변경되는 것으로 보입니다. 해상도를 낮추려는 의도로 보입니다.