본문 바로가기
블로그

티스토리 하단 추천 버튼 정리

by e마루 2012. 12. 24.
메타블로그의 추천 버튼을 계속 추가하다 보면 블로그 하단이 너무 길어지는 것을 느끼게 됩니다.
특히, 다음뷰와 믹시를 중요하게 생각하시는 분들은 본문 하단에 두가지 추천업 베너만 설치해도 너무 길어져 공간의 활용도 면에서 좋지 않은 것 같습니다.

블로그 본문 하단의 추천버튼들을 정리하는 방법은 다양하게 있습니다. 어떤분들은 모든 추천버튼을 버튼으로 만들어 한줄로 정리하시기도 하고, 어떤 분들은 다음View만을 중심으로 정리하기도 합니다.


소개해드릴 하단 추천 정리 방법은 다음View와 믹시를 중요시 하는 분들에게 적합한 방법입니다.

직접 만든 소스가 아니고, 다른 분의 소스를 보고 변형했던 것인데...
어느 곳에서 봤는지 기억이 나지 않아 원본 출처를 표기 못했습니다.(아시는 분은 말씀해 주시면 원본출처 표시 하도록 하겠습니다.)

 


  본문 하단 추천 버튼 정리  

전체 소스는 복잡해 보여도 무척 단순하게 제작됩니다. 이해가 쉽도록 먼저 전체 구조를 설명드리겠습니다.

이미지에서 보시는 것 처럼, fieldset으로 테두리를 그리고 "포스팅이 유익~"등의 추천을 유도하는 글을 넣어 주고,
filedset 안에 다시 테이블을 만들어 광고와 추천버튼을 넣는 방식으로 제작되었습니다.

1. 다음과 믹시는 버튼이 필요 없지만, 기타 추천 버튼은 직접 만드시거나 다운받은 후 자신의 티스토리에 파일 업로드 해줍니다.

버튼을 못구하신 분은 제 블로그의 추천버튼을 이용하셔도 되겠죠.

2. 삽입 소스 작성
첨부한 소스에는 제 링크값으로 되어 있습니다. 주소를 본인 링크로 변경하여 사용하시기 바랍니다.

하단 추천 정리.txt


위의 첨부파일을 다운 받아 아래 소스의 빨간색으로 표시된 곳을 본인의 블로그에 맞춰 변경해 주시면 됩니다.
첨부파일에 제 링크값을 그대로 남겨둔 이유는 참고하셔서 변경하기 편하시도록 한 것입니다.

모든 링크값은 각각의 메타사이트에서 직접 만드는 것이 가장 안전하고 확실합니다.

 <!--- 하단 추천 테이블 시작 -->
  <fieldset style="border:5px solid #536DBD;text-align:center;width:740px;height:280px;padding:0;margin:0 auto;position:relative;">
  <legend align=right style="margin:0 100px 0 10px;padding:0 3px; border:1px;color:#415BA9"><strong>포스팅이 유익하셨다면 추천 부탁드립니다. ^^*</strong></legend>
<table width="740" border="0" cellpadding="2" cellspacing="3"  valign="bottom">
   <tr>
         <td width="340" height="250" rowspan="3" align="center">
               <!--  광고 시작 -->
            광고 스크립트(애드센스, 리얼센스, 애드젯 등)
               <!--  광고 끝 -->
         </td>
        <td align=left>
<!-- 다음뷰 추천 위젯 삽입 start-->
다음뷰 추첫 위젯(다음뷰에서 소스를 만들어 삽입하세요)
<!-- 다음뷰 추천 위젯 삽입 start-->
        </td>
  </tr>
   <tr>
  <td alig=center> 
<!--믹시업 추천 위젯 삽입 start -->
믹시업 추천 위젯 소스(믹시업에서 소스를 만들어 삽입하세요)
<!-- 믹시 추천 위젯 삽입 end -->
  </td>
</tr>
<tr><td>
<!-- 한rss RSS피드 -->
<a href="http://www.hanrss.com/add_sub.qst?url=http://블로그 URL/rss" onclick="window.open(this.href); return false" alt="iGoogle or 한RSS로 구독하기" title="한RSS로 구독하기">
<img src="./images/icon_hanrss.png" title="한RSS로구독하기" width="42" height="42" alt="한RSS로 구독하기" /></a>

<!-- Google RSS피드 -->
<a href="http://fusion.google.com/add?feedurl=http://feedburnet 주소" onclick="window.open(this.href); return false" alt="iGoogle or 구글리더로 구독하기" title="iGoogle or 구글리더로 구독하기">
<img src="./images/icon_feedburner.png" title="iGoogle or 구글리더로 구독하기" width="42" height="42" alt="iGoogle or 구글리더로 구독하기" /></a>

<!-- 다음뷰 RSS피드 -->
<a href="http://v.daum.net/user/plus?blogurl=http://블로그 URL" onclick="window.open(this.href); return false" alt="다음뷰로 구독하기" title="다음뷰로 구독하기">
<img src="./images/icon_daumview.png" title="다음뷰로 구독하기" width="42" height="42" alt="다음뷰로 구독하기" /></a>

<!-- mixsh RSS피드 -->
<a href=http://mixsh.com/media/시 이용자번호 onclick="window.open(this.href); return false" alt="믹시로 구독하기" title="믹시로 구독하기">
<img src="./images/icon_mixsh.png" title="믹시로 구독하기" width="42" height="42" alt="믹시로 구독하기" /></a>

<!-- Blogkorea RSS피드 -->
<a href=http://www.blogkorea.net/bnmsvc/user_bloglist.do?userNum=블로그코리아 이용자번호 onclick="window.open(this.href); return false" alt="블로그코리아로 구독하기" title="블로그코리아로 구독하기">
<img src="./images/icon_blogkorea.png" title="블로그코리아로 구독하기" width="42" height="42" alt="블로그코리아로 구독하기" /></a>

<!-- REVU 추가 -->
<a href="http://www.revu.co.kr/MyRevU/이용자 ID" onclick="window.open(this.href); return false" alt="Revu" title="Revu">
<img src="./images/icon_revu.png" title="Revu" width="42" height="42" alt="Revu" /></a>

<!-- 트위터 추가 -->
<a href="http://twitter.com/트위터 ID" onclick="window.open(this.href); return false" alt="트위터" title="트위터">
<img src="./images/icon_twitter.png" title="트위터" width="42" height="42" alt="트위터" /></a>
<!-- 메타사이트 구독버튼 삽입 소스 끝-->
     </td>
    </tr>
</table>
</fieldset>
<!--- 하단 추천 테이블 끝 -->


3. 소스 삽입
소스를 자신의 계정에 맞게 변경한 후, Skin.html에서 본문 글인
메타블로그의 추천 버튼을 계속 추가하다 보면 블로그 하단이 너무 길어지는 것을 느끼게 됩니다.
특히, 다음뷰와 믹시를 중요하게 생각하시는 분들은 본문 하단에 두가지 추천업 베너만 설치해도 너무 길어져 공간의 활용도 면에서 좋지 않은 것 같습니다.

블로그 본문 하단의 추천버튼들을 정리하는 방법은 다양하게 있습니다. 어떤분들은 모든 추천버튼을 버튼으로 만들어 한줄로 정리하시기도 하고, 어떤 분들은 다음View만을 중심으로 정리하기도 합니다.


소개해드릴 하단 추천 정리 방법은 다음View와 믹시를 중요시 하는 분들에게 적합한 방법입니다.

직접 만든 소스가 아니고, 다른 분의 소스를 보고 변형했던 것인데...
어느 곳에서 봤는지 기억이 나지 않아 원본 출처를 표기 못했습니다.(아시는 분은 말씀해 주시면 원본출처 표시 하도록 하겠습니다.)

 


  본문 하단 추천 버튼 정리  

전체 소스는 복잡해 보여도 무척 단순하게 제작됩니다. 이해가 쉽도록 먼저 전체 구조를 설명드리겠습니다.

이미지에서 보시는 것 처럼, fieldset으로 테두리를 그리고 "포스팅이 유익~"등의 추천을 유도하는 글을 넣어 주고,
filedset 안에 다시 테이블을 만들어 광고와 추천버튼을 넣는 방식으로 제작되었습니다.

1. 다음과 믹시는 버튼이 필요 없지만, 기타 추천 버튼은 직접 만드시거나 다운받은 후 자신의 티스토리에 파일 업로드 해줍니다.

버튼을 못구하신 분은 제 블로그의 추천버튼을 이용하셔도 되겠죠.

2. 삽입 소스 작성
첨부한 소스에는 제 링크값으로 되어 있습니다. 주소를 본인 링크로 변경하여 사용하시기 바랍니다.

하단 추천 정리.txt


위의 첨부파일을 다운 받아 아래 소스의 빨간색으로 표시된 곳을 본인의 블로그에 맞춰 변경해 주시면 됩니다.
첨부파일에 제 링크값을 그대로 남겨둔 이유는 참고하셔서 변경하기 편하시도록 한 것입니다.

모든 링크값은 각각의 메타사이트에서 직접 만드는 것이 가장 안전하고 확실합니다.

 <!--- 하단 추천 테이블 시작 -->
  <fieldset style="border:5px solid #536DBD;text-align:center;width:740px;height:280px;padding:0;margin:0 auto;position:relative;">
  <legend align=right style="margin:0 100px 0 10px;padding:0 3px; border:1px;color:#415BA9"><strong>포스팅이 유익하셨다면 추천 부탁드립니다. ^^*</strong></legend>
<table width="740" border="0" cellpadding="2" cellspacing="3"  valign="bottom">
   <tr>
         <td width="340" height="250" rowspan="3" align="center">
               <!--  광고 시작 -->
            광고 스크립트(애드센스, 리얼센스, 애드젯 등)
               <!--  광고 끝 -->
         </td>
        <td align=left>
<!-- 다음뷰 추천 위젯 삽입 start-->
다음뷰 추첫 위젯(다음뷰에서 소스를 만들어 삽입하세요)
<!-- 다음뷰 추천 위젯 삽입 start-->
        </td>
  </tr>
   <tr>
  <td alig=center> 
<!--믹시업 추천 위젯 삽입 start -->
믹시업 추천 위젯 소스(믹시업에서 소스를 만들어 삽입하세요)
<!-- 믹시 추천 위젯 삽입 end -->
  </td>
</tr>
<tr><td>
<!-- 한rss RSS피드 -->
<a href="http://www.hanrss.com/add_sub.qst?url=http://블로그 URL/rss" onclick="window.open(this.href); return false" alt="iGoogle or 한RSS로 구독하기" title="한RSS로 구독하기">
<img src="./images/icon_hanrss.png" title="한RSS로구독하기" width="42" height="42" alt="한RSS로 구독하기" /></a>

<!-- Google RSS피드 -->
<a href="http://fusion.google.com/add?feedurl=http://feedburnet 주소" onclick="window.open(this.href); return false" alt="iGoogle or 구글리더로 구독하기" title="iGoogle or 구글리더로 구독하기">
<img src="./images/icon_feedburner.png" title="iGoogle or 구글리더로 구독하기" width="42" height="42" alt="iGoogle or 구글리더로 구독하기" /></a>

<!-- 다음뷰 RSS피드 -->
<a href="http://v.daum.net/user/plus?blogurl=http://블로그 URL" onclick="window.open(this.href); return false" alt="다음뷰로 구독하기" title="다음뷰로 구독하기">
<img src="./images/icon_daumview.png" title="다음뷰로 구독하기" width="42" height="42" alt="다음뷰로 구독하기" /></a>

<!-- mixsh RSS피드 -->
<a href=http://mixsh.com/media/시 이용자번호 onclick="window.open(this.href); return false" alt="믹시로 구독하기" title="믹시로 구독하기">
<img src="./images/icon_mixsh.png" title="믹시로 구독하기" width="42" height="42" alt="믹시로 구독하기" /></a>

<!-- Blogkorea RSS피드 -->
<a href=http://www.blogkorea.net/bnmsvc/user_bloglist.do?userNum=블로그코리아 이용자번호 onclick="window.open(this.href); return false" alt="블로그코리아로 구독하기" title="블로그코리아로 구독하기">
<img src="./images/icon_blogkorea.png" title="블로그코리아로 구독하기" width="42" height="42" alt="블로그코리아로 구독하기" /></a>

<!-- REVU 추가 -->
<a href="http://www.revu.co.kr/MyRevU/이용자 ID" onclick="window.open(this.href); return false" alt="Revu" title="Revu">
<img src="./images/icon_revu.png" title="Revu" width="42" height="42" alt="Revu" /></a>

<!-- 트위터 추가 -->
<a href="http://twitter.com/트위터 ID" onclick="window.open(this.href); return false" alt="트위터" title="트위터">
<img src="./images/icon_twitter.png" title="트위터" width="42" height="42" alt="트위터" /></a>
<!-- 메타사이트 구독버튼 삽입 소스 끝-->
     </td>
    </tr>
</table>
</fieldset>
<!--- 하단 추천 테이블 끝 -->


3. 소스 삽입
소스를 자신의 계정에 맞게 변경한 후, Skin.html에서 본문 글인 바로 밑에 넣으시면 됩니다.


Ctrl + F로 article_rep을 찾으면 쉽겠죠.
바로 밑에
넣으시면 됩니다.


Ctrl + F로 article_rep을 찾으면 쉽겠죠.