본문 바로가기
블로그 관련 정보/블로그 꾸미기

카테고리의 다른 글보기 옆에 광고나 기타 넣기

by 가온누리™ 2012.10.04
카테고리의 다른 글보기 옆에 광고나 기타 넣기
광고 차단 플러그인을 꺼 주시면 블로그 운영에 도움이 됩니다. ^^

제가 블로그 운영을 하면서 생각하는 부분이 이용자 환경입니다.

 

홈페이지처럼 방문자가 자유롭게 글을 쓰고 운영에 적극 참여할수는 없지만 글을 읽을때 좀더 편리함을 줄려고 노력합니다.

 

그중에 한 부분이 '카테고리의 다른 글보기'입니다.

 

글을 마지막 까지 읽고 다음 글로 넘어갈때 어떠한 글인지 제목으로 알려주는 기능입니다.

그래서 '카테고리의 다른 글보기'를 블로그 처음부터 사용하고 있는데 제목 끝으로 상당한 공간이 남아있다는게 맘에 안들어 인터넷 검색을 통해 그 부분을 보안해서 사용하는 방법을 알게됬습니다.

 

그래서 이번에 카테고리의 다른 글보기 옆에 남는 공간을 이용해서 광고나 운영자가 보여주고픈 기능을 추가해 보겠습니다.

 

위 박스친 부분입니다.

남는 공간에 광고든 최신글이든 보여준다면 훨씬 효율적이겠지요.

 

한번 시작해 보겠습니다.

 

티스토리 관리 -> 플러그인 설정 -> 꾸미기 -> 카테고리 글 더보기 에서 보여줄 목록갯수를 정하고 '확인'을 눌러줍니다.

 

티스토리 관리 -> HTML/CSS 편집

 

skin.html에서 ##_article_rep_desc_## 을 찾아서 그 아래에 코드를 삽입하면 됩니다.

 

<!-- 카테고리 글 더보기 옆에 광고나 기타 start  -->
 <div id="category" style="margin-top:10px; !important;">
광고나 기타
 </div>
<!-- 카테고리 글 더보기 옆에 광고나 기타 end  -->

광고나 기타 소스를 넣으시고 위 여백조정은 박스친 부분에서 하시면 됩니다.

 

한가지 주의 하실것은 '카테고리 글 더보기'위치 변경등 자잘한 소스 수정을 하셨다면  '##_article_rep_desc_##'바로 아래에 소스를 넣으시면 본문글 아래에 바로 보여 줍니다. 그러니 보여주고자 하는 위치에 넣으시면 됩니다.

 

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

 

/*티스카테고리 다른글 옆에 광고나 기타*/
.another_category{float:left;width:420px}
.another_category tr {line-height:14px; height:24px;}

.another_category td {display:none;}

 

빨간색 표시한 부분은 "카테고리의 다른 글보기" 가로 사이즈를 조정하실수 있습니다.

파란색  표시한 부분은 카테고리 글 더보기 의 칸과칸의 사이를 주정하실수 있습니다.

글 작성 날짜를 보이게 하실려면  .another_category td {display:none;}을 삭제해 주시면 됩니다.

 

위 소스를 style.css 맨 아래 추가 합니다.

 

한가지 주의 하실것은 위 소스에서 적용된 사이즈는 사용자 마다 틀려서 맞지 않습니다.

제 블로그에 맞는 사이즈라서요.

 

기본적으로 본문이 보이는 부분의 전체 사이즈를 알고계셔야 작업이 쉽답니다.

드래그 금지라 소스 입력 힘드시니 첨부한 파일 참고 하세요.

 

style.txt

댓글14

  • Favicon of https://www.ibagu.co.kr BlogIcon 이바구™ - 2013.02.18 21:06 신고

    처음에 헷갈렸는데
    예전에 넣었던 소스를 다 지우고
    이 곳의 소스로 바꿨더니 해결됬네요.
    감사합니다.
    답글

    • 깔끔하게 잘 적용하셨네요.
      html이란게 조금만 꼬여도 이상하게 보여주죠. 잘 해결 하셨다니 다행입니다.

      첫 댓글 봤는데 답글 달 시간이 없어서 퇴근후 확인하니 글이 달라져 있네요.^^

  • Favicon of https://ecad.tistory.com BlogIcon BujaOppa 2014.04.04 16:57 신고

    따라하기도 참 어렵네요.^^
    그대로 한것 같은데 광고가 카테고리의 다른글 옆이 아닌 아래의 중간에 떡하니 자리를 잡고 있네요.^^
    무엇이 잘못 된걸까요?
    답글

    • 사용하시는 스킨에 따라 소스적용이 안되는 경우가 있긴 하더군요.

      일단 카테고리 사이즈를 줄여보세요.
      그래도 그런다면 다른소스를 사용해 보세요

    • Favicon of https://ecad.tistory.com BlogIcon BujaOppa 2014.04.08 16:08 신고

      구글애드센스 말고 다른걸 넣어서 그랬던것 같습니다.
      답변 감사합니다. 그리고 제 블로그에는 댓글 달기가 두개로 나오는데요.^^ 왜 그런지 혹시 아시는지요? ㅠㅠ 초보라...

    • HTML이란게 조금만 어긋나도 잘 안됩니다. 그래서 힘들지요.
      말씀하신댓글달기 두개가 나오는 부분은 블로그 확인했는데 안보이네요.

      수정하신듯.^^

    • Favicon of https://ecad.tistory.com BlogIcon BujaOppa 2014.04.09 11:45 신고

      네 다른 분 도움을 받았습니다.
      블로그 운영 상당히 잘하시네요.^^
      자주 들리겠습니다.~

    • 에구! 칭찬 감사합니다.
      자주뵈요.^^

  • Favicon of https://breadcorps.tistory.com BlogIcon -_________-0 2014.04.22 23:16 신고

    감사합니다~ 어떻게하면 수정을 할 수 있을까~ 매번 고민했는데.. 좋은 정보 잘 얻어갑니다..^^
    답글

  • Favicon of http://kobobo.tistory.com BlogIcon 코보보 2014.07.20 13:56 신고

    궁금했는데 덕분에 해결되었습니다. 감사 합니다.
    답글

  • 임성우 2016.01.29 16:37

    안녕하세요 문의좀 드릴까해서요. 다름이아니라. .another_category 그러니까 님처럼 "왼쪽에 넣고 옆에 광고넣기"
    여기서 말입니다. 광고를 빼고요 카데고리 다른글을 중앙에 배치하고 싶은데 도통 안되네요..
    그러니까 카테고리 다른글을 width=300px해 놓고 광고없이 그냥 중간에 넣고 싶은데
    margin 0 auto; text-aline=center 등 아무리 해봐도 안움직이는데 방법을 모르겠습니다.
    좀 알려주셨으면 좋겠습니다.
    답글

    • 안녕하세요.

      티스토리에서 제공하는 플러그인이고 사이즈 조절이 본문에 맞게 적용되 있는것을 수정해서 사용하는 방법이라 세부적인 정렬에 관한 부분은 저두 잘 모르겠네요. ^^