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

경주 왕릉 벌초하는 모습

티스토리에서 블로그를 시작하면서 스킨의 일부를 변경을 했습니다. 메뉴와 링크, 제목색등의 아주 작은 부분인데 묻는 분들이 많이 계시는군요! 사실 대부분의 내용들은 이미 블로그에 올려져 있는데 찾지를 못하는 것이죠! 글을 올린 본인조차도 자신의 글을 쉽사리 찾을 수가 없으니 방문하신 분이야 말하면 입만 아프죠!

검색기능을 이용하면 조금 쉽게 찾을 수는 있겠지만 블로그의 검색기능은 블로그만의 특성을 가지고 있지 않아 글이 많아지게 되면 검색이 쉽지 않습니다. 티스토리에 바라건데 태그로 검색하거나 제목으로 검색하는 등의 기능을 넣어 주시면 좋겠습니다. 검색을 하면 제목부터 본문까지 너무 폭 넓게 검색되어 원하는 내용을 찾기가 쉽지가 않거든요!

필자가 비앤아이 블로그의 기본 스킨에서 변경한 부분은 블로그 상단 메뉴, 사이드바의 제목 및 리스트, 사이드바 배너배치, 마이링크(자주가는곳), 본문의 링크컬러, 댓글창배경, 카테고리 리스트, 블로그 메인등이고 애드센스 배치에 대한 내용입니다.

그러면 Kay~의 블로그 꾸미기에 대해서 하나 하나 링크 또는 설명을 하도록 하겠습니다.

 

블로그 하단 전체 포스트 보기



[AD]    

 

비앤아이 블로그 하단에 보면 전체 포스트 보기라는 것이 있는데 이렇게 티스토리에서 블로그 메인이나 블로그 상.하단을 꾸미는 방법은 태터데스크를 이용하면 아주 편리합니다. 태터데스크를 이용하는 방법은 먼저 티스토리 관리자 페이지에서 "플러그인 설정-태터데스크 플러그인 설정"을 차례대로 선택한 후 "하단"을 선택해줍니다.
그런다음 티스토리 블로그 메인 꾸미기(http://chobo1.tistory.com/15) 를 참조하세요!

 

블로그 상단 메뉴 꾸미기

본 블로그 상단처럼 메뉴를 만들 수가 있습니다. 이 메뉴는 그림을 이용한것 같지만 그림을 이용한것이 아니고 CSS(Cascading Style Sheet)를 이용하여 구현 한것입니다. 그러므로 CSS를 잘 모르면 약간 어려움도 있을 수 있지만 쉽게 따라할 수 있을것입니다. 블로그 메뉴 만들기는  "블로그 메뉴 꾸미기(만들기)를 참조하세요!

 

사이드바 섹션별 제목 변경

우측 그림의 원으로 표시된 부분처럼 사이드바의 섹션별 영역의
제목이나 리스트의 색상이나 글자의 크기를 변경할 수 있습니다.

이 방법은 skin.html을 수정하는 방법으로 아주 쉽게 변경할 수가 있는데 여기서는 제목과 리스트의 글자색을 변경하는 방법에 대해서만
설명을 합니다. 

방법에 대해서는 이미 포스팅을 해놨으므로 참고하시기 바랍니다. 

- 티스토리 사이드바 제목 변경 CSS
- 티스토리 사이드바 리스트 글자색 변경

 

 

사이드바 자주가는곳 (my link)

포털의 블로그에는 이웃블로그라는 것이 있는데 티스토리에는 자주 가는 곳의 링크를 추가하는 기능이 있습니다.
그런데 링크가 많아지게 되면 길게 늘어져서 썩 보기기 좋지 않습니다. 그런 경우 왼쪽 그림처럼 간략하게 하면 보기도 좋고 많은 링크를 추가할 수 있으며 분류를 하여 관리를 할 수가 있습니다. 물론 약간의 귀차니즘을 동반합니다. 

방법은 티스토리 사이드바 링크를 깔끔하게(http://ccoma.tistory.com/420)를 참조하세요!

 

카테고리별 글리스트에 애드센스 삽입하기

카테고리 클릭시 리스트의 위 또는 아래에 애드센스나 애드클릭스등의 광고코드를 삽입하는 방법입니다. 이 방법을 이용하기 위해서는 글의 목록(list)만 나오도록 하는 것이 좋습니다.

카테고리 클릭시 표시하는 방법을 모르는 경우 http://chobo1.tistory.com/17 을 참조하시고~~
카테고리 글 리스트 아래에 광고 넣는 방법은 http://chobo1.tistory.com/31을 참조하시면 됩니다.

 

애드센스 광고 가로로 2개 배치

구글 애드센스 광고를 가로로 2개 배치하는 방법은 아주 쉽습니다. 같은 코드를 두번 붙여넣으면 되니까요!
그런데 스킨이나 로딩속도에 따라서 가로로 표시가 안되고 세로로 표시되는 문제가 있습니다. 이 방법은 애드센스를 가로로 2개 배치하거나 세로로 표시되는 문제를 해결하는 방법입니다.

방법. http://chobo1.tistory.com/45 에 확인하세요!

연관글.
  -  애드센스광고 세로로 표시되는 문제
  -  블로그 댓글창에 배경그림 넣기
  -  티스토리 사이드바에 배너 넣기
  -  블로그 제목, 이미지로 꾸미고 링크걸기
[AD]

댓글을 달아 주세요

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

  1. 이전 댓글 더보기
  2. BlogIcon 뾲덩이 2009.08.17 12:33 신고  댓글주소  수정/삭제  댓글쓰기

    와 감사합니다!
    정말 유용하네요^^
    좋은하루되세요~

  3. BlogIcon 인디아나밥스 2009.08.17 13:42 신고  댓글주소  수정/삭제  댓글쓰기

    앗!! 그동안 케이님께 기술을 다 배웠다고 생각했는데
    아직 제가 모르는 게 더 있군요.^^;

  4. BlogIcon Design_N 2009.08.17 14:22 신고  댓글주소  수정/삭제  댓글쓰기

    오홋! 역시 Kay~ 님의 블로그팁은 쵝오쵝오...ㅎㅎ^^

  5. BlogIcon cooljam 2009.08.17 16:17 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요? 나도 디지털 영화 판매자 <쿨잼> 입니다.
    이제 블로그에서도 위젯 및 링크 등을 통해 합법 다운로드 영화를 판매하실 수 있습니다.

    블로그 방문자 수도 올리고, 판매를 통한 수익창출도 해보시는건 어떠세요?

    현재 아이팟 터치 지급 이벤트도 진행중이랍니다.

    http://www.cooljam.co.kr

  6. BlogIcon 닥터와이 2009.08.17 16:58 신고  댓글주소  수정/삭제  댓글쓰기

    정말 케이님 최고^^ 배워도 배워도 끝이 없군요

  7. BlogIcon 빛이드는창 2009.08.17 17:14  댓글주소  수정/삭제  댓글쓰기

    사이드바 정말 유용한걸요^^??
    이런건 초보자님들에게 정말정말 유용할듯싶네요~

  8. BlogIcon 지구벌레 2009.08.17 18:41 신고  댓글주소  수정/삭제  댓글쓰기

    제게 딱 도움되는 내용이네요.
    조만간 대대적 스킨 작업을 계획중이거든요..물론 아직 까지는 머리속에만...ㅎㅎ
    잘 보고 갑니다..

    • BlogIcon Kay~ 2009.09.20 12:55 신고  댓글주소  수정/삭제

      대대적인 스킨작업이라..
      꽤나 고생하시겠네요! ㅋㅋ
      저도 바꿔야 하는데 엄두가 나지 않습니다.
      시간 내기가 쉽지가 않아서리.. ㅋ

  9. BlogIcon 트레이너"강" 2009.08.17 22:16 신고  댓글주소  수정/삭제  댓글쓰기

    감사합니다. 좋은정보 잘보고 갑니다..^^

  10. BlogIcon 드자이너김군 2009.08.17 22:38 신고  댓글주소  수정/삭제  댓글쓰기

    저도 처음에는 검색에 별로 신경 안썻는데 요즘 블로그들은 정보량이 많아서 웬만한 홈페이지 보다 정보가 많은데 , 검색기능좀 신경써주면 좋겠어요.^^

  11. BlogIcon 넷테나 2009.08.18 02:45 신고  댓글주소  수정/삭제  댓글쓰기

    아.. 이페이지는 북마크를 해놓고 다시 봐야겠습니다.
    감사합니다^^

    • BlogIcon Kay~ 2009.09.20 12:56 신고  댓글주소  수정/삭제

      ^^ 사실 저도 누가 물어보면 찾는데 시간이 너무 걸리더라고요!
      이렇게 모아놓으니까 알려드리기도 편하네요! ㅎㅎ

  12. BlogIcon 천상한별 2009.08.18 08:37  댓글주소  수정/삭제  댓글쓰기

    링크 메뉴가 제일 궁금했는데 ㅎㅎ 감솨합니다

  13. BlogIcon sky~ 2009.08.18 09:50 신고  댓글주소  수정/삭제  댓글쓰기

    이거 완전 종합이네요.. 저도 여기서 다 배웠지만요 ㅎㅎㅎ

    • BlogIcon Kay~ 2009.09.20 12:58 신고  댓글주소  수정/삭제

      ^^ 예.
      사실 자신이 변경한것은 다 아는 내용이라도 나중을 위해서
      정리를 해서 포스팅해놓는것이 좋을것 같아요!

  14. BlogIcon 하결사랑 2009.08.18 16:44 신고  댓글주소  수정/삭제  댓글쓰기

    덕분에 블로그가 점점 깔끔해지고 자리를 잡고 있네요...근데요 한가지만 더 여쭤봐도 될까요?
    메인 화면에서도 카테고리 전체가 보이게 하고 싶은데 자꾸만 큰 카테고리만 보이고 세부 카테고리는 클릭을 해야만 볼수 있네요.
    설정을 다시 해야하는 건지 Html이나 CSS를 수정해야하는건지 간단한것 같은데 영 못찾겠네요...ㅠㅠ
    또 Kay님이 알려주신 소스 써서 테이블 만들어 넣었는데 테이블의 바탕색을 흰색이나 무색으로 설정할 수는 없을까요? 회색으로 나타나 영 어색해서요...^^;;

    • BlogIcon Kay~ 2009.09.20 13:07 신고  댓글주소  수정/삭제

      답변이 매우 늦었네요! ^^
      하위카테고리가 보이게 하기 위해서는 별도의 소스 삽입을 해야 합니다.
      그런 소스가 어딘가에 있을텐데 검색을 해보시고요!

      애드센스 테이블의 색이 회색으로 나오는것은 style.css에 그렇게 정해져서 그럴것입니다.

      style.css에서 .article을 찾아서 아래와 같이 변경해보세요!
      .article table td {padding:2px; background-color:gray; } /* 스킨디자인에따라 색상 변경 */ 와 같은 내용이 있다면
      color:white 로 변경을 해보시고
      없다면
      .article td {background-color:white} 을 추가해보시기 바랍니다.

  15. 2009.09.16 21:45  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  16. BlogIcon ohkiro 2009.10.09 15:26 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 감사히 사용하겠습니다

  17. BlogIcon 낭만인생 2010.01.06 15:46 신고  댓글주소  수정/삭제  댓글쓰기

    넘 좋아요.. 공부 계속합니다.
    추천 팍팍하고 갑니다.

  18. BlogIcon 938호 2010.01.11 10:31 신고  댓글주소  수정/삭제  댓글쓰기

    와 여기 또 알자정보들이 있었네요 ㅎ 랙백이도 하나 보내구, rss구독 신청 하구 갑니다. 좋은 한주 되세요^^

  19. BlogIcon 작은 이야기 2010.02.01 00:36 신고  댓글주소  수정/삭제  댓글쓰기

    잘 보고 갑니다.^^

  20. BlogIcon 홍씨^^ 2010.03.11 14:47 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 글 감사합니다.

  21. BlogIcon -™ 2010.11.08 15:42 신고  댓글주소  수정/삭제  댓글쓰기

    이제 블로그를 막 시작했습니다!

    케이님의 블로그는 하루에 한번씩은 꼭 들어와서 많이 배워갑니다!

    좋은 한주 되세요~!