티스토리 툴바



티스토리 블로그 하단 추천버튼과 광고 정리하기.

오랫동안 블로그를 하지 못해 낫설어진 블로그를 왕창 정리하기로 했다.
일단 스킨부터 모두 바꾸고.....

블로그를 정리하다 보니 포스팅 밑부분의 추천버튼과 광고를 간단하고 보기 좋게 바꾸는 방법을 어디에선가 본 기억이 나서 이번기회에 한번 정리해 보고자 했다.

블로그 추천버튼 정리하기를 검색하던중 위즈님의 블로그에 아주 좋은 자료가 있어 감히 따라하기로 했다.

(요기에서 참조 하였음 ↓ ) 
http://wiz.pe.kr/trackback/544

일단,

다음뷰와 믹시버튼이 가로로 길게 두게 위아래로 나오고 광고는 저 아래에 멀리 떨어져 있어 일단 보기에도 혼잡하고 광고 클릭율도 저조한것 같아 지금처럼 아래 그림과 같이 정리하기로 했다.




왼쪽에 광고 + 오른쪽에 추천뷰를 달고, 그 아래에 다른글 목록을 넣기로 했다.

일단 위즈님의 설명대로 따라가서 해보니....물론 위즈님의 설명을 참조로 변형을 주었다.
위즈님은 왼쪽에 광고가 없이 위의 모양과는 약간 다른 형태로 꾸미고 있다.


(위즈님의 모양대로 하고 싶으신 분은 아래대로 그냥 똑같이 하면 될듯하다)


일단 나는 하단의 모양에 변형을 주기로 했으니....

관리자 모드의 스킨 > css 에서...

css의 하단에 위를 참조해서 입력해 주고, HTML 에 구글 애드센스를 달았다.

그런데 많은 분들이 오류가 생겼던 현상이 나에게도 똑같이 나타났었다.




구글 애드센스가 저 아래에서 따로 놀고 있는 것이다 !!

하여튼 결과적으로 사이즈와 방법을 열심히 바꾸고 하던중에....


이렇게 변형이 되었다. (완성 !!)

CSS 하단에 이렇게 붙여 넣으면 된다...

div.boxad {clear:none;width:200px !important;}
div.boxad tr {line-height:15px;height:15px;}
div.blogger-news-widget {display:inline;float:right;clear:both;text-align:left;width:400px !important;overflow:hidden !important;margin-top:10px;border-right:1px solid #c3c9e0;}
div.mixup_widget {display:inline;float:right;clear:both;width:400px !important;}
div.another_category {display:inline;float:right;clear:both;text-align:left;width:600px !important;overflow:hidden !important;margin-top:10px;border-right:1px solid #c3c9e0;}div.another_category tr {line-height:15px;height:15px;}


1. 내 블로그는 가로 사이가 700으로 되어 있기 때문에 일단 view 버튼은 400 으로 했고 구글애드센스는 200으로 헸다.

2. 가장 문제가 되었던 "다른글 보기"는 600 으로 바꾸며 오른쪽으로 그냥 밀어 넣는 방법으로 변형을 주었다.


그리고 구글 애드센스는 HTML 로 가서...

  ##_article_rep_desc_##
  를 찾아 그 아래에...

<div id="boxad">   를 먼저 입력해주고,

구글 애드센스 200 * 200 짜리 태그를 붙였다.



하여튼 약간 비정상적이지만 어쨌든 나름대로 원하던 방법으로 완성....


결과적으로 도움을 주신 위즈님 (http://wiz.pe.kr/trackback/544)
께도 감사드립니다....




저작자 표시

'old list' 카테고리의 다른 글

공부방 창업 일기  (5) 2009/08/31
투싼 ix 냐 QM5 냐...  (12) 2009/08/28
블로그 하단 정리하기  (12) 2009/08/26
YF소나타 냐 L43 (SM5후속) 이냐??  (2) 2009/08/17
초등학교 꼴찌, 중학교 1등  (8) 2009/08/16
공부잘하던 아이, 왜 갑자기 공부 안하나  (69) 2009/08/16

트랙백 주소 : http://spoon1.tistory.com/trackback/159 관련글 쓰기

  1. Subject : [Blog] 리뉴얼 작업 일기

    Tracked from Aftereffect 영상 e-book 2009/11/01 01:11  삭제

    티스토리를 사용한지 2주가 되었습니다. 기존 스킨은 작은 화면을 쓰시는 분들의 불편함을 해소하려 이틀에 걸쳐 블로그를 리뉴얼 했습니다. 스킨은 PrimeLayer(Green)를 바탕으로 꾸며보았습니다. 제로보드4 시절에 태그 만진이후로 태그를 사용할일이 없어서 어려움을 많이 겪었지만 여러 브로그를 헤메가며 완성했습니다. 그 중 Reignman 님의 블로그 꾸미기 모음집 10가지 팁(http://reignman.tistory.com/32)을 바탕으로..

  2. Subject : [블로그팁] 티스토리 블로그 하단 정리, 추천 버튼 정리, 하단 광고 넣기

    Tracked from 마약간지의 주워 담기 2012/03/15 13:43  삭제

    티스토리에서는 플러그인 설정만으로 다음뷰, 믹시 추천 버튼을 넣을 수 있습니다. 아래와 같은 형태로 넣는것이 가능한데요. 그런데 다른분들의 블로그를 보면 정말 깔끔하게 광고 + 추천뷰..

댓글을 달아 주세요

  1. BlogIcon 드자이너김군 2009/09/16 01:25  댓글주소  수정/삭제  댓글쓰기

    잘보고 활용하였습니다.. 너무 감사 드려요..^^

  2. BlogIcon 임석원林錫原 2009/09/16 11:07  댓글주소  수정/삭제  댓글쓰기

    하단 광고 오류땜에 머리가 아팠는데
    덕분에 해결했어요~
    감사해용~^^

  3. BlogIcon 컴터맨 2009/09/24 19:15  댓글주소  수정/삭제  댓글쓰기

    저도 똑같은 문제때문에 고민했었는데, 덕분에 잘 해결되었습니다. 감사합니다^^;;

    PS: 기왕이면 소스코드를 긁어쓸 수 있도록, 첨부파일로 넣어주시면 다른 분들이 더 고맙게 사용할 수 있을 것 같네요^^;;

    • BlogIcon 숟가락 하나 2009/09/25 23:06  댓글주소  수정/삭제

      제가 만든 소스는 긁을수 있게 되어 있거든요. 그냥 긁어쓰시면 됩니다.

    • BlogIcon 컴터맨 2009/09/26 10:38  댓글주소  수정/삭제

      다시 긁어봤는데, 안 긁어져서요^^;;
      'CSS 하단에 이렇게 붙여 넣으면 된다' 아래에 있는 박스를 긁어보려했는데, 안긁어지네요...

      혹시, 스푼님께서 관리자 로그인 하신 상태에서 긁어보신게 아닐까...싶네요...

      PS: 도움을 받는 주제에 자꾸 요청을 하는 것 같네요^^;;

  4. BlogIcon JuneyMedia 2009/11/01 01:15  댓글주소  수정/삭제  댓글쓰기

    스푼님덕에 한방해결 감사합니다. 트랙백도 하나 걸고 갑니다 ^^

  5. BlogIcon 빠까닷컴 2010/01/10 13:11  댓글주소  수정/삭제  댓글쓰기

    안녕하세요 ~~ ^^
    숟가락하나님의 블로그 글읽는 재미에 2시간이 훌쩍 지나가 버렸네요 ㅎㅎ

    다름이 아니구요, 블로그 하단 정리하는걸 혼자 해보다가 계속해서 오류가 나서요...;;
    지금 30분가량을 헤매고 있는데 구글 이미지 광고가 정렬이 안되네요....

    제가 태그를 잘못한건지.. 아니면 어떠한 문제가 있는지 몰라서 그러는데...
    한번만 훑어봐 주시고 알려주시면 고맙겠습니다. ^^

    • BlogIcon 숟가락 하나 2010/01/15 18:27  댓글주소  수정/삭제

      하단 광고가 안보이네요...잘은 모르지만 태그 입력한 곳이 잘못되었을수 있거나 사이즈 문제일수도 있는데 제가 태그를 볼수 없으니 뭐라 말씀드리기가 어렵네요....

  6. 2010/01/17 00:36  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • BlogIcon 숟가락 하나 2010/01/17 01:42  댓글주소  수정/삭제

      ...저도 전문가가 아니라 잘모르겠는데...
      일단, 화면출력설정에서 본문 가로크기를 700으로 한번 조정 해보시고,

      css 하단 내용을..
      div.boxad {clear:none;width:250px !important;}
      div.boxad tr {line-height:5px;height:5px;}
      div.blogger-news-widget {display:inline;float:right;clear:both;text-align:left;width:400px !important;overflow:hidden !important;margin-top:20px;border-right:1px solid #c3c9e0;}
      div.mixup_widget {display:inline;float:right;clear:both;width:400px !important;}
      div.another_category {display:inline;float:right;clear:both;text-align:left;width:650px !important;overflow:hidden !important;margin-top:25px;border-right:1px solid #c3c9e0;}div.another_category tr {line-height:10px;height:10px;}

      이렇게 고쳐보시면 어떨까요...
      단순하게 생각해보면 아무래도 사이즈 문제인거 같은데..

  7. BlogIcon SOSMikuru 2010/03/27 18:24  댓글주소  수정/삭제  댓글쓰기

    제 블로그 같은 경우는 어떻게 해야 할까요? ;;; 옆에 추천부탁하는 이미지를 넣고 싶은데 말이지요;;;

    님 소스에 이미지 소스만 넣으니깐 완전 엉망 되더라구요