티스토리 사이드바 구글 애드센스, 위젯, 가젯, 태그 항목 정리하기


  • 티스토리 사이드바 구글 애드센스와 위젯, 가젯, 태그 항목 정리하기

    머니야 머니야님의 게시물 http://moneyamoneya.tistory.com/159 를 참고로 하였습니다.
    저같은 경우는 머니야 머니야 님의 팁을 알기 전에는 태그 입력기 안에 테이블 태그를 써서... 정리를 했었습니다만
    그것 역시도 그닥 보기에는 안좋습니다.  뭔가 어색하기도 하고 이질감도 느껴지고..
    너저분하게 삐뚤빼뚤한것들을 그나마 테이블에 넣어놔도.. 역시나 보기가 안좋았습니다.
    그러나 머니야님의 게시물을 보고 나서 나름대로 만족스러운 결과를 얻어서 참 뿌듯했습니다.

    어쨋든 깔끔하게 정리할 수 있는 기본적인 스크립트와 사용 방법은 머니야 님의 글을 일단 보시고 오세요.
    이 글에서는 추가적인 팁만 몇개 알려드립니다.

    큰 틀은 기본 사이드바와 모양이 똑같은 박스를 하나 더 만들어서 그 안에 태그나 위젯 등을 집어넣는다는 것입니다.
    다만 아래 스크립트처럼 들어갈 위젯이나 태그 스크립트 외에 위 아래로 더 무언가가 붙는다는 거죠.

<div class="boxTopR"><div class="boxTop-left"></div><div class="boxTop-mid"></div><div class="boxTop-right"></div></div>
     <div class="boxMidR">
      <div id="link">
       <h3 class="stitle">링크</h3>
       <ul>
        <s_link_rep>
                                  <li>
                          들어갈 태그나 스크립트, 내용
                           </li>
        </s_link_rep>
       </ul>
      </div>
     </div>
     <div class="boxBtmR"><div class="boxBtm-left"></div><div class="boxBtm-mid"></div><div class="boxBtm-right"></div></div>

  • 사이드바 수정하기 TIP 1 :  
    저 태그들은 스킨마다 조금씩 다른데, 각각 다른 스킨에서도 쉽게 박스 스크립트 찾는 팁입니다.

    스킨 ㅡ> HTML/CSS 수정하기 들어가셔서 HTML 창에서 <s_sidebar_element> 이 항목으로 찾기 하시면 금방 찾습니다.
    아래 스샷의 스크립트처럼 <s_sidebar_element> 와 </s_sidebar_element> 사이의 것들이
    사이드바의 한 박스를 구성하는 스크립트 입니다.
    2proo, Blog, blog skin, blog tip, Gadget, It, tistory, Widget, 블로그, 블로그 관리하기, 블로그 팁, 사이드바, 사이드바 가젯, 사이드바 가젯 정리, 사이드바 박스, 사이드바 변경, 사이드바 수정, 사이드바 수정하기, 사이드바 스킨수정, 사이드바 위젯, 사이드바 위젯 정리, 사이드바 정리, 스킨, 스킨수정, 위젯 정리, 티스토리 스킨, 플러그인 정리

    사이드바 박스 스크립트 소스


  • 사이드바 수정하기 TIP 2 : 위의 회색박스 안의 스크립트 중에  <h3 class="stitle">링크</h3>
    이 부분을 다른것으로 수정하거나
    아예 삭제해버리면 박스를 색다르게 꾸밀수 있습니다.
    태그를 삭제해 버리면 제 블로그의 오른쪽 사이드바 처럼 제목 없는 박스를 만들 수도 있습니다. 머리가 없죠...
    구글 애드센스의 경우 My Link, My Favorite site, 링크, 즐겨찾기 등의 항목을 쓰면 약관을 어기는 것이라 박스에 넣고 쓰려면 지워놓고 써야합니다.. 링크라는 단어 말고도 취향대로 다른 말들을 써 넣어서 수정하셔도 됩니다.
    사이드바 박스 수정사이드바 박스 수정 정리사이드바 박스 수정 정리


  • 사이드바 수정하기 TIP 3 : 사이드바의 위쪽 박스와 아래쪽 박스의 간격을 좁히는 팁입니다.
    기본적인 사이드바 박스는 간격이 좁은데, 위젯이나 다른 태그들을 테그박스 같은곳에 넣어서 사이드바를 쓸 경우에
    조금 더 벌어지게 되어있습니다. 이것 역시 스킨 ㅡ> HTML/CSS 에 가서 CSS 부분을 수정해야합니다.
    사이드바 박스 수정 팁

    위 스샷의 가장 밑부분에 보면 padding-bottom: 7px; 의 숫자가 7 인데, 이 스킨 만드신 분이  다른 위젯이나 태그를 쓸 경우
    구별하기 위해 따로 간격을 더 벌려놓은거 같습니다. 저 숫자를 0 으로 해놓으면 아래 이미지처럼 간격이 보통 박스들처럼
    좁아집니다. 아래 스샷에서 왼쪽이 7일때.. 오른쪽이 0 일때 입니다.

    사이드바 간격 조절 전 모습

    수정 전

    사이드바 간격 조절 후 모습

    수정 후


    간격 조절을 한것과 안한것이 차이가 조금 있지요.

    이상으로 조그만 팁 3가지를 소개했습니다.
    머니야님이 큰거 한방 때리시고 제가.. 사족을 다는거 같지만서도.. 혹 필요하신 분이 있을지도 몰라서.. 남겨봅니다.

BLOG Story 다른 글

댓글 14

    • 비우수 블로그에 와주셔서 감사합니다. (__);;
      머니야님 블로그에 가끔 가는데 어제 폭탄 맞으셧더군요. 부럽...
      머니야님 덕분에 배우는것들이 엄청나게 많습니다!!

    • ? 전 단 누구한명이라도 차단한 적이 없어요..... 뭔가 잘못된거 아니구요? 이런 내용은 첨접하는데요?

    • 억... 되네요!!!
      좋은 도메인 찾아내기 글에 덧글 남기려고 했었는데 ㅠㅠ
      안되더라구요.
      간혹 티스토리에서 그런 오류가 있다고도 하더라구요.
      그건줄 알았는데 그 글에만 그랬나봐요 ㅎㄷㄷㄷ

      딴글에도 테스트 해볼껄 ㅠㅠ 죄송해요~~~~ 헷

    • 좋은 정보 감사합니다. 그런데 한가지 궁금한 것이 있습니다. TIP2에서 말씀하신 부분을 삭제했더니 MY LINK가 사라지기는 했습니다. 그런데 그 공간이 그대로 남아 있네요. 이 공간은 줄일 수 없나요?

    • 방금 해봤는데 제 블로그 스킨에서는 <h3 class="stitle">링크</h3>
      이 부분 지우면 공간과 글씨가 같이 사라져요.
      같은 스킨인데 왜 그러지.
      혹시 구글광고 여백아닌가요?

      아니면 태그입력기 모듈이나 HTML배너출력 모듈이 아닌... 링크 모듈 자체를 수정하신건..?

*

*

이전 글

다음 글