티스토리 게시글에 댓글 개수와 링크 표시하기

워드프레스 정보를 제공하는 블로그 Avada 2017. 10. 23. 06:27 • 댓글:

워드프레스에서는 개별 글에서 제목 아래나 옆에 댓글 개수와 링크가 표시되는 경우가 많습니다. 하지만 티스토리 블로그에서는 글 제목 옆이나 바로 아래에 댓글 개수와 링크를 표시하는 스킨은 거의 없는가 보네요. (어쩌면 제가 찾지 못할 수도 있고요.)

약간의 삽질 끝에 이 티스토리 스킨에 글 제목 옆에 댓글 개수와 링크를 표시했습니다.

티스토리 스킨에 댓글 개수와 링크 표시하기

이 블로그에는 기본 스킨 중 하나인 #1 스킨이 사용되고 있습니다. #1 스킨이 나름대로 깔끔해서 마음에 들지만 조금 부족한 것이 보이네요. 그래서 시간이 날 때마다 조금씩 수정하고 있습니다.

게시글에서 글 제목 옆에 위의 그림과 같이 댓글 개수와 링크를 표시하려면, 먼저 스킨 파일에 다음 링크를 적절한 곳에 추가합니다. 위치는 스킨마다 다릅니다. 짐작되는 곳에 추가하여 댓글 개수가 표시되는지 확인하도록 합니다. 보통 글 제목 옆에다 추가하면 무난할 것입니다.

<span class="comment-count"><a href="#tcommentscount"><s_rp_count></s_rp_count></a></span>

다음으로 다음 html 코드를 댓글 코드 바로 위에 추가하도록 합니다.

<div id="tcommentscount"></div>

이제 CSS 코드를 사용하여 버블(말풍선) 모양의 아이콘을 추가합니다.

저는 How to Add A Comment Count Bubble To Blogger Post Titles(Blogger 포스트 제목에 버블 모양의 댓글 개수를 추가하는 방법)에 소개된 코드를 사용했습니다.

다음과 같은 CSS 코드를 추가하고 스킨에 맞게 적절히 수정하도록 합니다.

.comment-count{
float : right;
width : 48px;
height : 48px;
background : url(http://2.bp.blogspot.com/-7FFIKA34Kvw/T4x9E0RmA0I/AAAAAAAAALI/03AG305CesI/s1600/speech+bubble+green.png);
background-repeat: no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}

원하는 댓글 아이콘으로 URL을 대체하도록 합니다. 저는 다음 모양의 아이콘을 사용했습니다.

이제 댓글 개수가 버블 모양의 아이콘 안에 표시될 것입니다.

만약 위의 댓글 치환자가 작동하지 않으면 다음 글을 참고하여 새로운 치환자로 대체하여 테스트해보시기 바랍니다.

참고: