블로그 하단 "카테고리 다른글" 옆에 광고 넣기

오랜만에 스킨을 아주 조금 만졌습니다. 
블로그 포스트 하단에 있는 "카테고리의 다른글" 옆에 애드센스 광고를 삽입하는 작업이었죠!

바로 요렇게요!

그런데 몇몇 이웃분들께서 카테고리 옆에 광고를 삽입하는 방법을 문의해오셔서
간단하게 방법을 설명하도록 하겠습니다.

이미 많은 분들이 블로그 하단 정리, 광고정리라는 제목으로 해서 방법을 올려놔서
다 알것이라는 예측이었으나 모양이 약간 다르다는 점에서 용기를 가지고 글을 올립니다. ^^

카테고리 옆에 광고글을 삽입하는 방법은 숟가락 하나님의 블로그 하단 정리하기와 위즈군님의 CSS로 티스토리 추천버튼 정렬하기!를 참조하였습니다.

 

이미 알려진 블로그 하단 정리방법들

 

위즈군(http://wiz.pe.kr/544)님 블로그에서 소개

위즈군님 블로그에서 소개

숟가락 하나님 블로그에서 소개(http://spoon1.tistory.com/159)

비슷비슷한데 모두들 추천버튼과 연관된 내용들입니다.

 

'카테고리 다른글' 옆에 광고 또는 배너넣기


이제 본론으로 들어가서 애드센스 광고를 글목록옆으로 넣는 방법을 설명하도록 하겠습니다. 이 방법을 적용하기 위해서는 글목록의 높이와 광고의 높이가 맞아야 보기가 좋습니다. 그래서 몇가지 준비를 해야 합니다.

사전준비 하기

1. 200 x 200 사이즈의 애드센스 광고 준비
2. 티스토리 플러그인 - 카테고리 글 더보기에서 목록 갯수를 6개로 설정

이제 아래와 같은 모양으로 꾸며보도록 하겠습니다.

케이가 꾸민 결과


style.css 수정

style.css의 제일 하단에 아래 소스를 추가합니다.

div.adsense200 {clear:none;width:210px !important;}
div.adsense200 tr {line-height:14px; height:14px;}
div.another_category {display:inline;float:right;clear:both;text-align:left;width:390px !important;overflow:hidden !important; margin-top:0px; border-right:1px solid #c3c9e0;}
div.another_category tr {line-height:20px; height:17px;}

위의 빨강색으로 표시된 line-height:20px 은 카테고리 글목록의 줄간격입니다. 광고와 잘 맞지 않는 경우 적당하게 조절해서 맞추면 됩니다. 소스를 요청하시는 분들이 계서서 소스첨부합니다.

skin.html 수정

skin.html에서 ##_article_rep_desc_## 을 찾아서 그 아래에 애드센스 코드를 삽입하면 됩니다. (아래참조)

<div id="adsense200">
   200 x 200  사이즈의 애드센스 광고 코드를 여기에 삽입 
</div>

끝입니다.

- 티스토리 블로그꾸미기 - 메뉴,사이드바,리스트,애드센스등

댓글을 달아 주세요

댓글창에 배경그림 넣는방법

  1. 이전 댓글 더보기
  2. BlogIcon 엑셀통 2009.10.08 13:25 신고  댓글주소  수정/삭제  댓글쓰기

    블로그 하단정리 땜시로 다시 놀러왔습니다..
    또한번 배우고 가네요..감사..

    • BlogIcon Kay~ 2009.10.10 00:15 신고  댓글주소  수정/삭제

      ㅋ 그동안 나눔행사때문에 시간이 없으셔서 못하시고
      이제서야 시간이 나셨나 보네요!
      수고 많으셨습니다.

  3. BlogIcon 영웅시대 2010.02.05 19:12 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 감사합니다. Kay 님 덕분에 잘 꾸밀수 있었네요^^
    추운 날씨에 건강하세요~

  4. BlogIcon 새삼 2010.02.18 16:25 신고  댓글주소  수정/삭제  댓글쓰기

    아... 이건 어떻게 하는건가 궁금했었는데..^^
    kay~님 덕분에 잘 적용했어요. 감사합니다!!!!!

  5. BlogIcon 유진이의 소통의 공간 2010.02.18 21:38 신고  댓글주소  수정/삭제  댓글쓰기

    와우
    적용 잘하고 갑니다 ㅎ

  6. BlogIcon 그대를사랑합니다 2010.04.06 10:23 신고  댓글주소  수정/삭제  댓글쓰기

    저기요.. 저는 방향을 반대로 넣고 싶은데 가능한가요??

    카테고리의 다른글이 왼쪽, 광고가 오른쪽으로요...

    방법좀..

    • BlogIcon 모피우스 2010.04.29 10:05 신고  댓글주소  수정/삭제

      float; right를 left로 변경하시면 되던걸요.

      글과 광고 간격을 약간 띠울려면...

      margin-top:0px;앞에 margin-right:10px; 붙히고 전체적인 크기 조절하니까 깔끔하게 완성됐습니다.

  7. BlogIcon 이남자 2010.05.14 07:58 신고  댓글주소  수정/삭제  댓글쓰기

    복사를 못하네요 ㅠㅠ힝

  8. BlogIcon 노지 2010.06.01 08:15 신고  댓글주소  수정/삭제  댓글쓰기

    뷰 애드 단다고 급하게 광고 위치 바꾸면서 했습니다.....
    휴 정말 도움이 되었어요~

  9. BlogIcon CallingMan 2010.06.02 23:13 신고  댓글주소  수정/삭제  댓글쓰기

    잘 보고 바로 활용했습니다. 감사합니다. 그런데 광고하고 카테고리사이 갭이 많이 뜨는데 조절할 수 있나요?
    또 제 사이트가 여기 호주에서는 보이는 광고가 싱글과의 만남,세금 환급등 만 자꾸 보이는데 한국에서도 그런가요?

  10. BlogIcon 마이다스의세상 2010.08.21 13:48 신고  댓글주소  수정/삭제  댓글쓰기

    저는 저기에 카우리 광고를 달아볼까 했는데;;
    이상하게 카테고리 다른 글이 줄어들지 않고
    다른글 "밑에" 생기네요? ㅡㅡ;;

  11. BlogIcon 마이다스의세상 2010.08.21 13:52 신고  댓글주소  수정/삭제  댓글쓰기

    아!! 잘되네요^^ 감사합니다요 ㅎㅎ

  12. BlogIcon 자율학습 2010.10.18 03:20 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요~ 블로그 꾸미면서 꼭 해결해야할 문제였는데 많은 도움이 되었습니다. ^^ 감사합니당~
    그런데요..한가지 더 궁금한 점이 생기는게요....
    글제목이 길어지면 줄바꿈되서 2줄로 나오는데..이것을 말줄임표로 되게 할 수는 없을까요?
    이방법 저방법 제가 찾아본 정보들로 해보았는데도..도무지 않되네요;;
    Kay님은 혹시 알고 계신지요~

    암튼....
    한주의 시작 월요일입니다!
    즐거운 한주 보내세요!^^

    • BlogIcon Kay~ 2011.06.07 09:23 신고  댓글주소  수정/삭제

      아.. 제가 답을 드렸는지 모르겠는데 이제야 댓글을.. ㅎㅎ
      카테고리 글을 컷팅해서 보여주는 방식은 잘 모르겠네요~
      자바스크립트를 이용하면 될지도 모르겠지만..
      저도 2줄로 내려오는것땜에 신경쓰이더군요..
      티스토리에서 글자수를 지정하는 기능을 지원해주면 좋은데~ ^^

  13. BlogIcon Y♥ 2010.12.05 13:09 신고  댓글주소  수정/삭제  댓글쓰기

    저는 왜 광고랑 카테고리 글이랑 안붙어잇고 떨어져있을가요???
    key님이 조절하라는 간격을 조절해도 안되네요 ㅠ

  14. BlogIcon 재군™ 2010.12.16 19:48 신고  댓글주소  수정/삭제  댓글쓰기

    어째서 전 똑같이 따라했는데... 안되는걸가요.. 엉엉.. ㅠㅠ

  15. BlogIcon 유턴금지 2011.01.25 18:10 신고  댓글주소  수정/삭제  댓글쓰기

    헛..2009년 9월에 포스팅된 내용인가봐요.
    전 이제 활용하겠습니다. ㅎㅎ
    좋은 정보 감사해요~

  16. BlogIcon 꿍디 2011.06.06 14:49 신고  댓글주소  수정/삭제  댓글쓰기

    소스를 메모장으로 저장해 올려주셨음 좋았을것을...아쉽네요.. 적용해도 안되고 ..

  17. BlogIcon 꿍디 2011.06.07 09:58 신고  댓글주소  수정/삭제  댓글쓰기

    소스 감사합니다!!^^

  18. BlogIcon 오냐오냐귀 2011.07.14 17:28 신고  댓글주소  수정/삭제  댓글쓰기

    오래된 글이지만 혹시나 Kay~님이 볼까하여 글 남깁니다... 요즘 스킨 수정 중이라...
    위의 내용을 적용한 결과... 설치는 되었어나 문제가 발생해 고민입니다.

    첫째, 다음뷰추천버튼과 붙어있어요... 약간은 공간을 두고 싶은데
    둘째, 카테고리 다른글 상자와 애드센스 광고도 붙어 있어요... 요것도 간격을 조금 두고 싶은데

    감사히 잘 적용하고도 2%가 부족해 고민중이네요 ..ㅋㅋ
    어떻게 도움을 받을 수 있을지 모르겠습니다.

  19. BlogIcon 오냐오냐귀 2011.07.15 01:31 신고  댓글주소  수정/삭제  댓글쓰기

    아~ 죄송합니다. 다시 한번 봐 주세요.
    다른 것 수정하다 날아가는 바람에.... 다시 설정해 두었습니다.

  20. BlogIcon Dramatique 2012.04.26 08:15 신고  댓글주소  수정/삭제  댓글쓰기

    질문입니다.
    http://dramatique.tistory.com/1667
    여기를 트랙백 걸어 놓았습니다.

  21. BlogIcon 온화수 2015.02.04 01:13 신고  댓글주소  수정/삭제  댓글쓰기

    고맙습니다~~! 도움이 됐어요.