블로그에 인기글 목록, 추천글 목록 출력하기

블로그에 인기글 목록, 추천글 목록 출력하기

제 블로그 상단에 보면 "비앤아이 블로그 인기글" 목록이 출력이 됩니다.
기존의 글들이 시간이 지남에 따라 묻혀버려서 노출이 되지 않는 문제를 해결하고 ..
방문자들의 체류시간을 좀더 늘리기 위한 수단으로 만들어서 걸어뒀는데..
방법을 묻는 분들이 많더군요~

아주 오래전부터 꾸준하게 올라오는 질문이었고..
답변은 간단하게 설명할 수 있는 내용이 아니라서 포스팅으로 알려드린다고 했는데..
제가 너무 늑장을 부리다 보니.. 이제서야 그 방법을 올리게 되었습니다.
이렇게 늑장포스팅을 하다 보니..
혹자는 제가 알려주기 싫어서 포스팅을 안하는 것으로 생각하는 분들도 있을것 같다는 생각도 드는군요~ ㅎㅎ

 

비앤아이 블로그 인기글 목록이 표시된 모습

 

위 그림에 보면 "비앤아이 블로그 인기글" 목록이 표시됩니다.
클릭을 하면 해당 글로 바로 이동되어 내용을 볼 수가 있습니다.

어떻게 보면 광고인줄 알고 클릭을 안하는 분들도 있을거라는 생각이 들정도로....
광고와 흡사하게 노출이 되고 있습니다.

알림. 본 글의 내용은 티스토리등 javascript를 구현할 수 있는 블로그에 해당하는 내용입니다.

 

인기글, 추천글 노출을 위한 작업단계

뭐.. 거창하진 않지만 잘 모르시는 분들도 있을듯 하여 준비과정을 나열합니다.

• 스킨저장
• 글의 제목, 글의 링크, 댓글수(생략가능)
• 자바스크립트 파일 수정(프로그램에서 사용할 수 있는 형식으로 글리스트 정리)
• 자바스크립트 파일(blogtip.js) 스킨자료실에 업로드
• 스킨(skin.html) 수정 및 적용
• style.css 수정

위 절차대로 하면 비교적 쉽게 구현을 할 수가 있을것입니다.
티스토리에서 글 리스트를 제공해준다면 훨씬 간편하게 구현할 수 있지만..
아직 티스토리에서 각 카테고리별 글 리스트가 제공이 안되는것으로 알고 있습니다.

 

 

블로그 인기글, 추천글 구성과 구현방식

이 인기글, 추천글은 제맘대로 목록입니다. 
방문자들에게 보여주고 싶은 글들을 제가 임의로 선정한것이지요! ㅎㅎ

목록은 아래와 같이 크게 2개로 분류를 했습니다.

블로그로 돈벌기팁 추천글 비앤아이 블로그 인기글

블로그로 돈벌기팁 목록과 블로그관련 글 목록 2개만 리스트를 만들었습니다.
위 2개의 목록은 랜덤하게 노출이 되고 각각의 분류별 리스트역시 랜덤하게 바뀝니다.
골고루 노출을 시키기 위한 방법인데 보고 싶은 글이 2개가 있는 경우 하나의 리스트를 보면 글목록이 바뀌어서 보고 싶었는 글을 찾을 수 없다는 단점도 있습니다. ㅎㅎ
그래서 그러한 불편함을 없애기 위해서 링크 클릭시 새창으로 열리도록 만들었습니다.

정리를 해보면

• 크게 2개로 분류(추천글, 인기글)
• 분류 및 글의 리스트는 랜덤하게 출력
• 클릭시 새창으로 링크
• 글꼴이나 글자크기, 링크된 글자색은 기본적으로 스킨을 따르도록 함
• list의 수정이나 추가, 댓글수 모두 완전 수동
• 자바스크립트(javascript)로 구현

 

1. 노출하고 싶은 글 list 준비하기

스킨 저장을 한 다음에...
본인의 블로그 글중에서 노출을 시키고 싶은 글목록을 준비합니다.
* 별로 노출시킬만 글이 없는분은 제 글을 노출시켜도 됩니다. ^^   (펌을 하라는 의미가 아님)

• 글의 제목, 글의 링크, 댓글수(생략가능)

준비는 위와 같이 글의 제목, 링크, 댓글수를 뽑아놓습니다.
보여주고 싶은 글이 많은 분들은 준비하는데 사람에 따라서 제법 시간이 걸릴수도 있습니다.

티스토리 통계프로그램인 티스탯을 이용하면 좀더 편하게 할 수도 있습니다. 

 

 

2. 자바스크립트 파일 수정

 

 

 

파일을 다운로드합니다.

blogtip.js

 

 

다운로드 받은 blogtip.js 파일의 내용은 아래와 같습니다.

function top8() {

cnt =8;
post = new Array();
bun = new Array();
money = new Array();

// 목록1 - 블로그 인기글 목록
post[0]=new Array("블로그 운영 노하우 - 시작하며</a> (16)","http://ccoma.tistory.com/369");
post[1]=new Array("블로그 운영 노하우 - 검색엔진최적화편(SEO) I</a> (50)","http://ccoma.tistory.com/377");
post[2]=new Array("블로그 운영 노하우 - 검색엔진편(SEO) II</a> (35)","http://ccoma.tistory.com/381");
post[3]=new Array("수익 극대화를 위한 블로그 최적화 노하우","http://ccoma.tistory.com/389");
post[4]=new Array("클릭율을 높이는 컨텐츠 </a> (26)","http://ccoma.tistory.com/435");
post[5]=new Array("블로그, 검색엔진 최적화의 역효과</a> (30)","http://ccoma.tistory.com/408");

// 목록2 - 블로그로 돈벌기팁 목록
money[0]=new Array("구글 애드센스 신청하기</a> (28)","http://ccoma.tistory.com/160");
money[1]=new Array("구글애드센스 광고코드 2개 삽입하기</a> (22)","http://chobo1.tistory.com/45");
money[2]=new Array("애드센스시작부터 수표 받기까지 한눈에 보기</a> (36)","http://ccoma.tistory.com/330");
money[3]=new Array("블로그수익을 향상시키는 광고 배치법</a> (19)","http://ccoma.tistory.com/430");
money[4]=new Array("블로그 수익이 적은 이유 5가지</a> (24)","http://ccoma.tistory.com/427");
money[5]=new Array("짭짤한 제휴마케팅! 그 가능성을 보다</a> (85)","http://ccoma.tistory.com/555");

contents2=head1="";
var i=bun[0]=0;
maximum = post.length; // 배열 선택
top_title = "<font color=#119911>&nbsp;비앤아이 블로그</font> 인기글";
ch = parseInt(Math.random()*2)+1;

if ( ch == 2 ) {
 maximum = money.length;
 top_title = "<font color=tomato>&nbsp;블로그로 돈벌기팁</font> 추천글";
}

contents2  ='<FIElDSET style="text-align:left; margin-top:0px;padding-right:4px">';
contents2 +='<div class="box_title">'+top_title+'</div>';
contents2 +='<TABLE cellSpacing=0 cellPadding=0 width=300 border=0>';
contents2 +='<TBODY>';
contents2 +='<tr><td height=13 style="padding-left:10px;font-size:1px;">&nbsp;</td></tr>'

// random process
while(i < cnt) {  
  bun[i] = parseInt(Math.random()* maximum);
  if (!i) { i++; continue; }
  for(j = 0; j < i; j++) {
      if (bun[i] == bun[j]) {
        bun.pop(); i--;
        break;
      }
  }
  i++;
}

for(i=0;i<cnt;i++){
 if ( ch == 1 ) {
  post_title = post[bun[i]][0];
  post_link  = post[bun[i]][1];
 } else {
  post_title = money[bun[i]][0];
  post_link  = money[bun[i]][1];
  
 }

 contents2 +='<TR><TD class=box_list>'
 contents2 +='<img src=http://cfs.tistory.com/custom/blog/17/174256/skin/images/list_dot.gif align=absmiddle width=2 height=2 border=0> '
 contents2 +='<A href=' + post_link + ' target=_blank>' + post_title
 // if (i < 7 ) { contents2 +='<div class=line_dot>&nbsp;</div>' }
 contents2 +='</TD></TR>'
}
contents2 += '</tbody></table></fieldset>';

document.write(contents2);
} 

* 저만 사용하기 위해서 만든것이라 조금은 불편할 수도 있습니다.

다운로드 받은 파일(blogtip.js)을 메모장으로 오픈한 다음
위 소스중 목록1, 목록2 부분등 빨강색으로 표시한 부분을 수정하면 됩니다.

목록1, 목록2를 보면 아래 같은 소스가 있는데...  
이곳에 준비한 글을 넣으시면 됩니다.
이 부분이 시간이 가장 오래 걸릴것입니다.
엑셀을 이용하면 아주 쉽게 할 수 있는데 엑셀을 모르면 메모장의 바꾸기 기능을 이용하면
일부는 쉽게 수정이 가능할것입니다.

post[0]=new Array("블로그 운영 노하우 - 시작하며</a> (16)","http://ccoma.tistory.com/369");  

위 소스에서 빨강색 글자부분을 수정하면 됩니다.
post[0] 부분은 글의 순번인데 0번부터 적어주는데,,
준비한 글이 30개라면 0~29까지 넘버링을 하면 됩니다.
나머지는 블로그 글의 제목과 링크이므로 자신의 글에 맞게 수정하면 됩니다...
저 댓글 표시하려고 프로그램이 조금 더 복잡해졌는데..
귀찮으면 댓글수는 안 넣어도 됩니다. ㅎㅎ
어렵지 않죠? (글을 쓰는 제가 더 어렵다는.. ㅠㅠ)

+주의. 따옴표(") 없어지지 않게 조심하세요!
블로그 글이 안 보이거나 스킨이 깨져버릴 수 있으니까요!

모두 수정이 되었다면 저장을 합니다.

 

3. 스킨자료실에 업로드

파일을 모두 수정했으면 스킨 자료실에 파일을 업로드 해야 합니다.

"티스토리 관리페이지 - 스킨 - HTML/CSS편집" 을 클릭하여
파일업로드를 클릭한 다음 위에서 저장한 파일을 업로드 합니다.

스킨 자료실에 파일 업로드

 

업로드 후에 파일이 업로드 되었는지 확인합니다.

파일이 업로드 되어 있는지 확인

 

파일을 수정했을때는
다시 업로드 하면 됩니다.

 

4. skin.html  수정 및 적용

 

1. skin.html에 아래의 내용을 추가 합니다.

<script class="javascript" src="./images/blogtip.js"></script>   

아무곳에나 추가해도 되지만 <head>와 </head> 사이에 넣는것이 표준입니다.

 

 

2. 인기글 목록을 노출시킬 위치에 아래의 소스를 삽입

 <script language=javascript>top8()</script>

저의  경우에는 애드센스 옆에 노출이 되도록 했습니다.
애드센스 코드는 대부분 삽입할 줄 알것입니다.

블로그 상단 애드센스 오른쪽에 삽입하기 위해서는 아래와 같이 하면 됩니다.

<div class="article">

<table id="adsense_c" border=0 width=620 cellpadding=0 cellspacing=0><tr>
<td width=310 aligh=left> 
    애드센스 코드
</td>

 <td width=310 valing=top align=right>
       <script language=javascript>top8()</script>
  </td>
</tr></table>

      [ ##_article_rep_desc_## ]

 

5. style.css 수정

이제 마지막 부분입니다.
style.css의 끝에 아래의 내용을 추가합니다.

/* 인기글 리스트 */

.box_list {
             PADDING: 2px 0px 2px 10px;
             font-size:9pt;text-align:left;vertical-align:middle;
             line-height:160%;
}
.box_title {
   margin-left:10px; padding: 7px 0px 5px 0px;
            font-size:9pt;text-align:left;vertical-align:middle;
            line-height:20px; border-bottom:solid 1px #cccccc;
}

위 스타일 소스가 복사가 안될테니 아래 첨부파일을 다운로드하세요!

box_style.txt

 

이제 저장을 한 후에 확인을 해보시기 바랍니다.
잘못된 소스의 삽입으로 블로그가 이상해지면..
저장해놓은 스킨을 다시 적용하면 됩니다.

필요하신분들께 도움이 되었으면 좋겠습니다.