2014년 8월 25일 월요일

구글 블로그 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 가 위젯 생성 시 설정한 제목 입니다.)
  1. 'Label1' locked='false' title='Labels' type='Label'/>  
5. 위의 내용을 아래와 같이 수정합니다.
  1. 'Label1' locked='false' title='Labels' type='Label'>  
  2. 'main'>  
  3. if cond='data:title'>  
  4.   
  5. if>  
  6. class='widget-content'>  
  7. 'location=this.options[this.selectedIndex].value;' style='width:100%'>  
  8.   
  9. 'data:labels' var='label'>  
  10. 'data:label.url'>  
  11. ()  
  12.   
  13.   
  14.   
  15. 'quickedit'/>  
  
  •   
  •   
    • 넓이를 수정하고 싶으시면 7번째 줄에 'width:100%'의 %값 혹은 pixel(px)값으로 수정해 주시면 됩니다.
    • DropDown Menu 에 들어가는 글자는 8번째 줄 'Click to choose a label' 의 내용을 수정해 주시면 됩니다.
    • 11번째 줄은 각 Label 의 숫자를 보여줍니다. 해당 수를 보고싶지 않으신 분은 해당 내용을 지워주시면 됩니다.

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

    댓글 없음:

    댓글 쓰기