Script / CSS

G1sUtil.js

G1sBlogger.js

G1sNavigationList.js

G1sCode

G1sTagList

Posts List

2012년 6월 6일 수요일

[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. 템플릿 저장 을 통해 내용을 저장합니다.

즐거운 블로깅 되세요 ^^

댓글 13개:

  1. 이거 무지좋치요 덕분에 저두 만들었답니다 감사합니다.
    제가 좋은 소스 발견하면 말씀들릴게요 초보라 저는 잘은 못하지만 제가 외국블로그 무지 다니면서 좋은걸 만이 봅니다.

    답글삭제
  2. 이방법도 참고하세요 본문내용줄이는 내용입니다.점브브레이크를 html에 집어넣는 방식입니다.
    http://blog.hungrytour.net/2012/02/blog-post_9960.html
    이건 혼자 성공했습니다.

    답글삭제
    답글
    1. 많은 참고가 될 듯 하네요.
      일단은 사용할 계획은 없지만 알아두면 좋을 것 같네요. 감사합니다. ^^

      삭제
  3. http://internetricks4u.blogspot.kr/2012/06/finally-i-have-done-with-this-cool.html
    http://www.bloggersentral.com/2012/06/top-5-social-media-strategies-in-2012.html

    2군데는 가볼만합니다.구글 블로그 자유롭게 무지 사용합니다
    포스트 방식도 특이하게 만들어서 올리고 그래요

    답글삭제
    답글
    1. 좋은 블로그 소개 감사합니다. ^^

      삭제
  4. 지원님 지송하지만 익 한개만 설명좀 부탁드립니다.
    http://internetricks4u.blogspot.kr/2012/05/how-to-add-rounded-corner-to-popular.html#more 박스형태로 만든 포스트인데 보기 좋으네요 부탁드리겠습니다
    스킨 찻아서 위에다가 코드 붙였는데 아무 반응이 읍네요...

    답글삭제
    답글
    1. 붙일때 그냥 붙이면 되는게 아니네요.

      링크 주신 코드는 'popular-posts', 혹은 '가장 많이 본 글' 를 꾸며주도록 되어 있는 것입니다. 이 외의 다른 것을 꾸며 줄려면 꾸며주시고자 하는 것의 해당 class를 알아야 합니다.

      우선 바꾸길 원하시는 위젯의 class를 알아야 할 텐데요.
      블로그에서 '오른클릭->페이지 소스보기' 를 하시면 창이 하나 더 뜨면서 엄청 복잡한 코드들이 나올겁니다.
      거기서 원하는 위젯을 찾으셔야 하는데요. 가장 쉬운게 위젯의 제목으로 검색을 하시면 되죠.

      제 블로그에서는 'ctrl + F' 를 이용해 '가장 많이 본 글' 을 검색하시면

      <div class='widget PopularPosts' id='PopularPosts1'>
      <h2>가장 많이 본 글</h2>
      <div class='widget-content popular-posts'>

      이런 식으로 나오네요.
      가장 마지막 <div class='widget-content popular-posts'> 부분의 강조된 class 가 보이시죠?
      '가장 많이 본 글' 내부에는 widget-content 와 popular-posts 두개의 값을 class로 사용하는 개체가 있군요.

      위의 주신 링크의 코드를 적용하면 전 이 부분에 적용이 되는 겁니다.

      마찬가지로 양금일 님이 바꾸기 원하시는 위젯의 클레스를 찾으신 다음에 해당 위젯의 class 값으로 코드를 수정해 주셔야 합니다.

      단 앞에 점(.) 를 빼시면 안되구요.
      일단 더 봐야 겠지만.... 안되시면 댓글 달아주시구요.
      위 링크의 코드를 적용하고 싶으신 블로그와 원하는 가젯을 알려주신다면 더 정확한 설명이 가능할 듯 하네요.

      삭제
  5. 감사합니다.
    덕분에 블로그를 시작할 수 있겠네요~

    답글삭제
  6. 감사합니다 ^^.
    이번에 구글에서 처음 블로그 만드는데 덕분에 카테고리 만들수 있게 됬네요^^~

    답글삭제
    답글
    1. 도움이 되었다면 다행이네요. ^^

      삭제
  7. 안녕하세요~도움을받는중인데 현재 비공개로 작업중이거든요
    업로드 해주신대로 참고해서 해봤는데 카테고리 옆에 올린 갯수가 표시가안되네요 ㅜㅜ

    답글삭제
    답글
    1. 음... 현상을 봐야 왜 그런현상이 발생하는지 알것 같네요;;;;

      삭제