구글 블로그 Label DropDown Menu 만들기

http://creatorhong.blogspot.kr/search/label/blogspot?updated-max=2014-03-22T23:58:0%2B09:00&max-results=1&pgno=1

[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 가 위젯 생성 시 설정한 제목 입니다.)

view plainprint?

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

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

view plainprint?

1. <b:widget id='Label1' locked='false' title='Labels' type='Label'>  
2. <b:includable id='main'>  
3. <b:if cond='data:title'>  
4. <h2><data:title/></h2>  
5. </b:if>  
6. <div class='widget-content'>  
7. <select onchange='location=this.options[this.selectedIndex].value;' style='width:100%'>  
8. <option>Click to choose a label</option>  
9. <b:loop values='data:labels' var='label'>  
10. <option expr:value='data:label.url'><data:label.name/>  
11. (<data:label.count/>)  
12. </option>  
13. </b:loop>  
14. </select>  
15. <b:include name='quickedit'/>  
16. </div>  
17. </b:includable>  
18. </b:widget>  

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

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