앞으로 블로그 꾸미기에 도움이 되는 팁과 테크, 혹은 도구 등도 가끔 포스트 하려고 생각 중입니다. 도구라 하면 대표적으로 블로그용 위젯이나 웹서비스 등이 있겠죠. 제가 아는 지식이 일천한 관계로 주로 소개가 될 것입니다.

Drop-down Menu Bar

이번에 소개해 드리는 깔끔한 메뉴 바는 블로그 사이드바에 적용하면 복잡한 사이드바 공간을 획기적으로 줄일 수 있습니다.

아래 예는 사이드바의 링크를 위젯을 이용하여 드롭-다운 메뉴로 바꾼 것입니다. 길게 늘어질 링크 목록이 단 2개의 메뉴 바로 대체되었습니다. 추가와 삭제가 자유로워서 관리도 쉽습니다. 꼭 링크뿐만 아니고, 카테고리 등 활용 방안은 생각하기에 따라 많겠죠.

• 기본값으로 드롭다운 메뉴 바 내의 메뉴를 클릭했을 때 새 창에서 열리게 되어 있지만 현재 창에서 바로 열리도록 하고 싶다면,
  코드 중에 "window.open"이라는 부분을 "window.location.replace"로 대체
  하시면 됩니다. 코드를 복사하여 자신의 블로그 환경에 맞게 수정해서 사용하시면 됩니다.

• 메뉴 바의 가로 폭을 변경하고 싶다면,
  style="width: 160px;"을 찾아서 숫자 160을 여러분의 블로그 사이드바 가로 폭에 맞게 변경
  해 주시면 됩니다. 참고로, 저의 티스토리 블로그 스킨의 가로 폭은 180입니다.

블로그 사이드바용 드롭다운 메뉴 바 코드:
<div class="widget-content"><br /><select onchange="window.open(this.options[this.selectedIndex].value,'_blank')" style="width: 160px;" name="menu" size="1"><option selected="selected" value="0"> This is your Title <br /><option value="http://hotwidgets.blogspot.com">Hot Widgets<option value="http://widgetsforfree.blogspot.com">The Best Widgets<br /><option value="http://jpamorgan.com/">jpamorgan<br /><option value="http://http://http://hotwidgets.blogspot.com/2008/02/hot-blogger-templates.html/">Hot Blogger Templates<br /><option value="http://hotwidgets.blogspot.com/2008/02/gmail-toolbox-60-tools-and-resources.html">Gmail tools and Resources<br /><option value=" http://widgetsforfree.blogspot.com/2008/03/drop-down-menu-bar.html">Get this widget</select></div>



- 출처: Best Widgets for free