반응형

블로그 사이드바 위젯


스토리 블로그의 사이드바에 위젯을 달 경우, 위젯의 폭이 제각각이어서 정렬에 신경을 쓰는 블로거들의 경우 신경이 쓰이는 면이 있습니다.


이럴 경우에는 박스 안에 위젯을 넣는 형태로 좀 더 깔끔한 정렬이 가능한데요. 이 방식은 비슷한 종류의 위젯을 모아서 분류하는 용도로도 사용이 가능하기에 블로그의 사이드 바를 정리하는데도 적합한 방법인 듯 합니다. 옆의 그림은 제 블로그에서 사용하는 사이드 메뉴로 세 가지 위젯을 하나의 박스 안에 정렬한 형태이구요.


태그의 구성은 다음과 같습니다.


<div class="boxTopR">

  <div class="boxTop-left"></div>

  <div class="boxTop-mid"></div>

  <div class="boxTop-right"></div>

</div>

<div class="boxMidR">

  <div>

    <ul>

      <s_link_rep>

        <li>위젯소스코드 1</li>

        <li>위젯소스코드 2</li>

        <li>위젯소스코드 3</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>


위의 태그에 있는 '위젯소스코드'란에 해당 위젯의 소스코드를 입력하면 됩니다. 위젯의 소스코드는 위젯뱅크에서 HTML 퍼가기 등으로 가져가실 수 있구요. 혹시나 HTML 퍼가기가 안되는 위젯의 경우는 자신의 블로그에 일단 설정한 다음, 웹 브라우저 상에서 마우스 우클릭 후 소스보기를 통해 해당 코드를 찾아내야 합니다. 조금 귀찮은 부분일 수도 있겠습니다만, 차분히 잘 살펴보면 쉽게 발견이 가능합니다. 위젯소스코드는 <script>태그로 작성되어집니다. 예를 들면 다음과 같습니다.

한 RSS 위젯소스코드:
<script src="http://widgetprovider.daum.net/view?url=http://widgetcfs1.daum.net/xml/15/widget/2008/10/08/11/57/48ec219fd28f1.xml&up_DAUM_WIDGETBANK_RSS_URL=http%3A%2F%2Felros.tistory.com%2Frss&up_pref_banner_color=%23&up_pref_banner_type=9&up_pref_RSS_URL=DAUM_WIDGETBANK_RSS_URL&&width=166&height=60&widgetId=128&scrap=1" type="text/javascript"></script>

다음 View 랭킹 위젯소스코드:
<script src="http://widgetprovider.daum.net/view?url=http://widgetcfs1.daum.net/xml/15/widget/2009/07/22/17/20/4a66cbbacfa56.xml&scrap=1&widgetId=434&title=Daum+view+%EB%9E%AD%ED%82%B9%EC%9C%84%EC%A0%AF&height=155&up_DAUM_WIDGETBANK_BLOG_URL=http%3A%2F%2Felros.tistory.com&up_init_pan=1&width=166&border=simple&" type="text/javascript"></script>

티스토리 달력 위젯소스코드:
<script src="http://widgetprovider.daum.net/view?url=http://widgetcfs1.daum.net/xml/5/widget/2009/01/12/18/12/496b09693008c.xml&up_contents=random&&width=166&height=220&widgetId=245&scrap=1" type="text/javascript"></script>

태그를 작성한 다음, 블로그의 'admin'으로 들어가 '스킨' 메뉴의 '사이드바 설정'으로 들어갑니다. 메모장 등에 미리 작성한 다음, 저장해 놓는 것도 백업의 한 방법이겠네요. 아니면 블로그에 메모 형태로 포스팅하셔도 될 듯 합니다. 

블로그 사이드바 설정

위의 그림과 같이 사이드바 설저에서 'HTML 배너출력' 모듈을 사이드바에 추가합니다. 출력된 HTML 배너출력 모듈에 위치한 편집 버튼을 누르면 배너 이름과 HTML 태그를 입력할 수 있는 별도의 창이 나타납니다. 작성한 태그를 이 창에 붙여넣기 한 후, 설정을 저장하면 사이드 바에 원하는 형태로 위젯이 생성된 것을 볼 수가 있습니다.

대단한 팁은 아니지만, 자신의 블로그를 좀 더 깔끔하게 꾸미고 싶을 때 적합한 팁 중 하나가 아닐까 합니다.

반응형

+ Recent posts