티스토리에서 인기글 및 관련글 표시하기

 

테터툴즈의 가장 부러운 점은 인기글 및 태그 관련글 플러그인이었다. 내 블로그에서 어떤 글이 사람들에게 많이 익히고, 또 글들이 어떻게 연결되어 있는지를 알 수 있다?! 생각만해도 가슴이 뛰는 일이건만, 티스토리 사용자들은 그저 플러그인이 업데이트 되기를 기다리는 방법밖엔 없었다.

관련 플러그인이 최초로 공개된 시점이 2007년 2월임에도 아직 티스토리 플러그인에 업데이트 되지 않은 점을 볼 때, 티스토리에서는 해당 플러그인을 별로 중요하게 생각하지 않거나, 해당 플러그인이 생각보다 많은 리소스를 잡아 먹어 최적화가 힘든 모양이다.

그러던차에 티스토리 블로그 중에서 최근 인기글을 표시해주는 블로그를 발견! 구글로 찾아보니 아래와 같은 사이트를 찾을 수 있었다.

http://n-3.net/count/

아이디어는 간단한대, 티스토리 DB를 사용할 수 없으니, n-3.net 서버에서 직접 나의 글들에 관한 조회수를 저장하고, 글을 보여줄 때 마다, 최근 인기글을 뽑아주는 개념이다. (무료로 이런 트래픽을 제공해주시는 Sammy님께 감사의 인사를 전하며 ^^)

먼저, 내 블로그의 인기글을 표시하기 위해서는 블로그 카운터를 사용해야 한다.

http://www.n-3.net/blog/sunteq/583

블로그를 카운터를 설치한 다음에는, 아래 링크를 사용하여 인기글 리스트를 사용할 수 있다.

http://www.n-3.net/blog/sunteq/671

그리고 내 블로그에서 태그를 기준으로 관련글을 찾아주면 좋겠지만, 아직까지 티스토리를 위한 이러한 서비스는 없는듯하고, 대신 올블로그의 올블릿을 이용할 수 있다. 올블릿이란 올블로그에 등록된 블로그 중에서 나의 태그와 연관이 있는 글들을 찾아 이어주는 서비스이다.

비록 내 블로그의 포스팅은 아니지만, 나와 같은 태그를 가지고 최근에 다른 블로거들이 생각하는 포스팅을 보는 것도 꽤나 흥미로운 일이다. 최근에 올블릿이 업데이트되면서 아래와 같이 다소 화려하게 바뀌었는데,

 

아무래도 입맛대로 바꾸려면 이전 올블릿 버전으로 설치하는 것이 더 좋을 듯 하다. (참고로 올블릿을 이용하기 위해서는 올블로그에 가입을 해야 하고, 올블로그에서 내 글들을 수집할 때 까지 약간 기다려야 한다)

http://ceo.blogcocktail.com/wp/archives/154/

내 블로그에 인기글과 관련글(올블릿)을 설치한 뒤, 통일감있게 관리하기 위해서는 아래 코드를 참고하기 바란다. 나의 경우에는, table과 fieldset을 사용하여 일관성을 주었다.

<!-- 블로그 인기글 by xlos-->
<table width=100%><tr>
<td width=50%>
<fieldset style="text-align: left; margin: 0; padding: 5px" border="0">
<legend style="margin: 0; padding: 0"><font color=ff6600>☆ 주간 인기글 ☆</font></legend>
<p><style type="text/css">
         .lister ul {list-style:arial; font-size:12px; margin-left:10px; padding:3px;}
         .lister ul li {line-height:16pt;}
         .cnt { font-size:9px } <!--// 조회수관련-->
</style>
<script language='javascript' type='text/javascript'>
        document.write('<script type="text/javascript" charset="utf-8" src="http://n-3.net/count/lister.js.php?id=1062&listmax=5&days=7&wordmax=20"></'+'script>');
</script>
</p></fieldset>       
</td>
<td width=50%>
<fieldset style="text-align: left; margin: 0; padding: 5px" border="0">
<legend style="margin: 0; padding: 0"><font color=ff6600>☆ 월간 인기글 ☆</font></legend>
<p><style type="text/css">
         .lister ul {list-style:arial; font-size:12px; margin-left:10px; padding:3px;}
         .lister ul li {line-height:16pt;}
         .cnt { font-size:9px } <!--// 조회수관련-->
</style>
<script language='javascript' type='text/javascript'>
        document.write('<script type="text/javascript" charset="utf-8" src="http://n-3.net/count/lister.js.php?id=1062&listmax=5&days=30&wordmax=20"></'+'script>');
</script>
</p></fieldset>       
</td>
<tr>
<td>
<fieldset style="text-align: left; margin: 0; padding: 5px" border="0">
<legend style="margin: 0; padding: 0"><font color=ff6600>☆ 랜덤 포스팅 ☆</font></legend>
<p><style type="text/css">
         .lister ul {list-style:arial; font-size:12px; margin-left:10px; padding:3px;}
         .lister ul li {line-height:16pt;}
         .cnt { font-size:9px } <!--// 조회수관련-->
</style>
<script language='javascript' type='text/javascript'>
        document.write('<script type="text/javascript" charset="utf-8" src="http://n-3.net/count/lister.js.php?id=1062&listmax=5&days=-1&wordmax=20"></'+'script>');
</script>
</p></fieldset>       
</td>
<td>
<fieldset style="text-align: left; margin: 0; padding: 5px" border="0">
<legend style="margin: 0; padding: 0"><font color=ff6600>☆ 관련 포스팅 ☆</font></legend>
<p><style type="text/css">
         .lister ul {list-style:arial; font-size:12px; margin-left:10px; padding:3px;}
         .lister ul li {line-height:16pt;}
         .cnt { font-size:9px } <!--// 조회수관련-->
</style>

<!--//Display Allblet 시작//-->
<!--관련글-->                   
<DIV id="/938">
<!--Allblet-->
<script language="JavaScript" src="http://www.allblog.net/Allblet/Libraries/GetReleationPostList.html?http://xlos.tistory.com/938" type="text/javascript"></script>
</div>
<!--관련글-->
<!--//Display Allblet 끝//-->

</p></fieldset>                       

</td>
</tr></table>

<!--블로그 인기글 끝-->

위에서 빨간색 부분은 자기 블로그 정보에 맞게 수정해주어야 한다. 그리고 올블릿에서 글 제목만 표시하기 위해서는 style.css 파일에 아래와 같은 부분을 추가해 주어야 한다.

/*올블릿 관련 by xlos*/
.post-items
{
    margin-top: 0px;
    list-style:arial;
    font-size:12px;
    margin-left:10px;
    padding:3px;
    line-height:16pt;
}
.post-content
{
    display: none;
    width:0;
    height:0;
}
.post-writer
{
    display: none;
    width:0;
    height:0;
}
.post-title
{
    margin-left: 0px;
}