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

Posted at 2012.12.24 21:03 | Posted in 블로그

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

블로그 본문 하단의 추천버튼들을 정리하는 방법은 다양하게 있습니다. 어떤분들은 모든 추천버튼을 버튼으로 만들어 한줄로 정리하시기도 하고, 어떤 분들은 다음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에서 본문 글인 [##_article_rep_desc_##] 바로 밑에 넣으시면 됩니다.


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

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

  1. 이전 댓글 더보기
  2. 어째서 다음뷰 추천버튼이 일시적인 오류라고 자꾸 나오는거죠 ㅠㅠ
    오늘 그거때문에 하루 다지나갔네요 ㅠㅠ
  3. 하단 추천 부분도 열심히 컨닝 중입니다^_^

    너무 이뻐요 블로그...ㅠㅠ
  4. 마루님^^ 하단추천버튼 적용은 대충 했는데 daum view와 mixup 위젯이

    일정기간전에껀 정상 로딩이 되지 않던데 혹시 이유아시는가 해서요....^^

    어제 추천버튼 달기전엔 티스토리 자체 플러그인 썻었어욤..
    • 2011.10.28 13:43 신고 [Edit/Del]
      하단추천버튼 관련 포스팅 이후로 다음과 믹시위젯이 모두 업데이트 된 걸로 알고 있습니다.

      포스팅한지 좀 오래 됐네요^^*
      대략적인 모양을 이해하시고, 다음과 믹시 페이지에서 직접 위젯 소스를 받으시는게 가장 안전한 방법인 것 같습니다.

      그런데...
      위젯 소스 문제라면 되려면 전체가 되거나 전체가 안되어야 할텐데... 일정기간 전꺼가 로딩이 되지 않는다면...

      기본적으로 다음,믹시의 발행은 20개를 기본으로 하고 있습니다.
      처음 다음뷰에 가입하기 전에 40개의 포스팅이 있었다면, 가입후에 앞쪽의 20개는 다음뷰에서 수동으로 불러와야 합니다.
      혹시 이런 경우가 아닌지 확인 해보세요^^;;;
    • 2011.10.28 16:26 신고 [Edit/Del]
      네 답변 감사합니다..^^

      티스토리 플러그인 같은경우는 처음 시작하고

      바로 달았는거라 20개 불러오는곳엔 안걸릴거

      같은데 다음에 문의해놔도 하루지났는데 아직

      답변이없네영...^^ㅋ
  5. 저두 성공했습니다 다음뷰때문에 애먹었네요 ㅎㅎ 이제 좌측에있는곳에 광고를 찾아야할텐데 구글애드센스는 지급보류가걸려서 이런 ㅠㅠ
    다음뷰는 아라님이 상단에 올려주신 텍스트파일에서 다음뷰소스에서 블로그주소만 자기 블로그 주소로 바꾼 후에 플러그인에서 다음뷰를 보이게 설정하고 확인하고 다시 설정을 꺼주시면 완료~~~~
  6. 감사합니다 덕분에 하단을 멋있게 꾸몄습니다 ^^
  7. 덕분에 제 블로그 하단이 럭셔리 해졌어요. 감사합니다. 잘 쓰겠습니다.
    • 2012.03.13 23:49 신고 [Edit/Del]
      유명블로거 썬도그님께서 제 블로그를 방문해 주시다니...
      사진 관심가지면서부터 자주 눈팅하러 갔었는데, 영광입니다.^^*
  8. 죄송하지만,. 저 '본문 하단 추천 버튼 정리' 라 써있는 하늘색 박스 어떻게 하는지 알 수 있을까요 ?? 너무 하고 싶네요. ㅜ
    • 2012.03.19 01:05 신고 [Edit/Del]
      혹시 소제목줄의 하늘색 말씀하시는 건가요^^?
      그냥 테이블로 만들었습니다.

      댓글로 대충 설명드리면...
      테이블을 2행으로 만들고, 첫줄을 2열로 만들어서 한열에만 하늘색 넣고, 두번째줄은 모두 하늘색으로 넣은 겁니다.
      그리고 사이즈 조절한 것이죠.

      쓰고 싶으시면 제 블로그에서 소스 보기 하셔서 해당소스를 그대로 가져다 쓰시면 됩니다.^^*
  9. 감사해요 ^^ 티스토리 시작한지 얼마 안됐는데 정말 많이 찾아 헤맸어요.ㅠ 정말 감사합니당. 포스팅 깔끔하고 친절해서 매우 감동했어요.
  10. 감사합니다. 오늘도 엄청 도움 되었습니다~~
  11. 포스팅 너무 좋네요... 많이 보고 배우겠습니다.^^
  12. 찾던 자료네요 감사합니다. 근데 버튼 아이콘이 안 올라와져 있는데 혹시 어디서 받을수 있을까여? 혹시 아이콘 받을수 있나요? nask20@nate.com 입니다. 메리 크리스마스입니다~
    • 2012.12.24 21:04 신고 [Edit/Del]
      저도 버튼을 따로 가지고 있는 것은 없습니다. 그냥 제 블로그 버튼에서 오른쪽마우스 해서 저장해 쓰시면 될 것 같은데요^^;;;
  13. 정리잘해주셔서 감사드립니다.
    블로그 꾸미는데 도움이 되었네요.
  14. 20프로
    정말 좋네요~깨끗하고 좋습니다~저도 이걸로 사용해야겠어요~감사감사~
  15. 이거 다음뷰버튼 글마다 지정하는거 말구 html들어가서 한번지정해놓으면 자동으로 등록되는더 방법 좀 알려부세요 ㅠ,ㅠ
  16. <object type="application/x-shockwave-flash" data="http://api.v.daum.net/static/recombox1.swf?nurl=요기를 제 블로그 주소 넣는것?/" width="400" height="80">
    <param name="movie" value="http://api.v.daum.net/static/recombox1.swf?nurl=요기를 제 블로그 주소 넣는 것?/" /></object>
    </td>
    </tr>
    <tr>
    <td alig=center>
    저헐게하면 되는거 아닌가요 ㅠㅠ 자꾸 오류 뜨네요 ㅠ.ㅠ
  17. 음음음 다음 뷰는 해결했는데 기카 추천 버튼이 문제네요 아이콘 적용 방법이 ㅠ,ㅠ
    • 2013.03.02 05:42 신고 [Edit/Del]
      연휴라 블로그 들어오지 못했는데, 그동안 해결하셨군요.^^*
      아이콘 이미지가 없다는 말씀이신가요? 아이콘을 올리고 싶긴 한데, 위에서도 밝혔지만 다른분의 글을 보고 나중에 쓴거라 아이콘도 그분이 제작했던 것 같습니다. 아이콘 이미지를 직접 올리기는 뭐하고 그냥 우클릭해서 다운하시는 것은 어떨까요^^;;;
  18. 흠 흠 흠 뷰가 또 일시적인 에러뜨네여 ㅠ.ㅠ
    뭐가 잘 못 된걸까요???
    http://goodjap.tistory.com/ 제블로그 주소입니다
    그리고 아이콘 마우스 우클릭해서 다운 받았는데요 적용하는 방법을 모르겠어요 ㅠㅠ
    • 2013.03.02 21:57 신고 [Edit/Del]
      <object type="application/x-shockwave-flash" data="http://api.v.daum.net/static/recombox1.swf?nurl=http://블로그주소/대괄호##_article_rep_id_##대괄호" width="400" height="80">
      <param name="movie" value="http://api.v.daum.net/static/recombox1.swf?nurl=http://블로그주소/대괄호##_article_rep_id_##대괄호" /></object>

      로 적어 주신 것이 맞나요? 위에 적으신 것에 467로 되어 있어서...

      만약 정상적으로 소스삽입이 되셨다면, 다음뷰의 일시적인 오류일 수 있습니다.

    • 2013.03.02 22:05 신고 [Edit/Del]
      아이콘의 경로는 맞는데 표시되지 않는 것으로 볼때, 원인은 두가지 정도로 볼 수 있을 것 같습니다.
      첫번째는 이미지 업로드가 잘못된 경우,
      두번째는 확인해 본 결과 이미지 파일명에 한글이 들어가 있는 것 같습니다. USR에서 한글은 오류가 발생하기 쉬우니 모두 영어로 바꿔서 사용해 보시기를 권해드립니다.
  19. 블로그주소/대괄호<<<---대괄호가 뭐죠;;;
    • 2013.03.06 01:17 신고 [Edit/Del]
      블로그 보니 버튼 이미지들은 해결하셨네요. 축하드립니다.^^*

      대괄호는 [ ] 를 말합니다. 댓글에도 대괄호를 넣으면 해당 포스트 넘버가 표시되서 한글로 표시한거죠. 위의 소스가 각각의 포스팅 번호에 맞게 다음뷰를 표시해주는 소스입니다.
  20. 비밀댓글입니다
    • 2013.03.27 05:18 신고 [Edit/Del]
      글쎄요. 그렇게만 질문하시면 뭐라 답하기가 어렵네요.
      광고와 메타블로그의 추천과는 소스가 전혀 달라 서로 간섭할 수가 없는데...
      틀은 그대로 유지된채 공백으로 나온다는 말씀이신지, 아니면 틀 자체가 완전히 깨지면서 밀려서 안나온다는 말씀인지 모르겠습니다.
  21. 다음뷰가 안떠요 ㅠ.ㅜ 미치겠네요 지금 몇시간째 씨름중인데;;
    계속 몇번이나 확인을 하고 다시해봐도 일시정인 시스템 오류라고 계속 뜨네요;;