[Blogspot] Label DropDown Menu 만들기

Blogspot 에서 제공하는 Label Widget를 DropDown Menu 로 바꿔주는 방법이 있네요.

출처 : http://www.bloggersentral.com/2010/05/create-dropdown-menu-for-labels-widget.html

출처에도 보시면 잘 설명되어 있지만 다시 한번 정리해 봅니다.

우선 해당 기능을 구현하기 전에 Blogspot에 Label Widget를 설치하셔야 합니다.
설치 안하신 분들은 '레이아웃 > 가젯추가 > 태그' 를 통해 Label Widget를 설치해 주시면 됩니다.
(old UI : 디자인 > 가젯추가 > 태그)

이후부터는 아래 순서대로 진행해 주시면 됩니다.

1. 템플릿 > HTML 편집 > 계속 으로 들어갑니다. (old UI : 디자인 > HTML 편집)
2. 템플릿의 내용을 백업해 둡니다. (나중에 잘 못 된 것이 있으면 복원이 필요할 수 있습니다.)
3. '가젯코드 펼쳐서 보여주기' 를 체크하지 않고 진행합니다.
4. Label Widget 를 찾습니다. 아래 코드를 찾으시면 됩니다.
id와 title은 다를 수 있습니다.(title 가 위젯 생성 시 설정한 제목 입니다.)

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

5. 위의 내용을 아래와 같이 수정합니다.

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<select onchange='location=this.options[this.selectedIndex].value;' style='width:100%'>
<option>Click to choose a label</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

• 넓이를 수정하고 싶으시면 7번째 줄에 'width:100%'의 %값 혹은 pixel(px)값으로 수정해 주시면 됩니다.
• DropDown Menu 에 들어가는 글자는 8번째 줄 'Click to choose a label' 의 내용을 수정해 주시면 됩니다.
• 11번째 줄은 각 Label 의 숫자를 보여줍니다. 해당 수를 보고싶지 않으신 분은 해당 내용을 지워주시면 됩니다.

6. 템플릿 저장 을 통해 내용을 저장합니다.

즐거운 블로깅 되세요 ^^