Sunday, December 3, 2006

블로거 Navbar 자동감추기 Auto-Hide Blogger Navbar As Windows Taskbar

Original Source: Bloggeratto: Blogger v3.0: Hovering Peek-A-Boo Blogger Navbar [via Stubborn Fanatic]

블로거를 사용하는 블로그는 화면상단에 Navbar가 표시되는데, 이를 윈도즈의 작업표시줄처럼 자동으로 감추거나 보이게 할 수 있는 블로거 핵(Hack)으로 다음과 같은 순서로 템플릿을 수정하면 되고, 원문에 있는 그림을 참고하면 이해가 쉽다.
  1. 블로그 대시보드 -> 레이아웃 -> 템플릿 -> HTML 편집으로 이동
  2. 아래의 코드를 복사하여 템플릿 body 전에 집어넣는다.
    /* Hovering Peek-A-Boo Blogger Navbar */
    #navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
    #navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
  3. 저장하고 블로그보기를 하여 Navbar가 자동감추기가 되었는지 확인한다.

이 핵을 사용하면 블로거에서 기본으로 제공하는 Nabvar를 지우지 않아도 되고, 블로그를 깔끔하게 보이게 할 수 있다. 또한 Navbar 검색창으로 내 블로그안의 글을 검색할 수 있으므로 별도로 검색창을 사이드바에 달지 않아도 된다.

위에 기술한 Navbar 자동 감추기는 Blogger in Beta에만 적용되며, Blogger in Beta 이전 블로그는 Hovering Peek-A-Boo Blogger Navbar를 참고하여 수정하면 된다.

Update: Auto-hide Navbar is invisible but active in IE6 or IE7.
Auto-hide Nabar는 IE6 및 IE7에서는 보이지는 않지만 동작은 한다. Nabar가 보이지는 않지만 로그인 박스 근처에 마우스를 갖다 대면 마우스 커서가 반응을 보이고, 로그인을 하면 된다. 이 사실은 요 며칠 IE에서 사용하면서 알게되었는데, 원문에도 이 문제는 기술되어 있고, 해결점은 현재까지 없다. (2006.12.07)

8 comments:

  1. 기능 훔쳐가겠습니다.후훗 이런 좋은 방법이..
    베타판으로 넘어오면서 링크부분이 html로 수정되지 않고 기능을 불러오게되면서 타겟값을 줄수없게 되었던데
    이부분은 어떻게 안되려나요?
    저는 이 링크 부분이 셀프값으로 바뀌면 화가 나더라구요 제 블로그는 남겨두고 새창띄우기로 하고싶은데 말이죠..
    외국애들이 인터넷이 컨사양이딸려서 새창띄우기를 자제하는걸까요?

    ReplyDelete
  2. 말씀하신 것이 링크를 '새창으로 띄우기'를 말씀하시는 것인지요?
    이 문제는 블로거 사이에서 화두가 된 적이 있는데, 구글이나 올블로그 검색에서 '새창띄우기'로 검색을 해 보시면, 많은 분들이 이 문제를 회자했던 적이 있답니다.

    잠정적인 결론은 "새창에서 띄울까, 그냥 볼까는 유저에게 맡기자" 입니다.

    파이어폭스에서는 마우스를 링크에 놓고 가운데볼을 꾹누르면 새탭으로 창이 뜨거나, 확장기능인 Tab Mix Plus를 설치하여 링크만 누르면 새탭으로 뜨겠끔 조정할 수 있답니다.

    아래 일몰님의 글을 읽어 보시길 권합니다.
    새창띄우기 vs 같은 페이지

    그리고 훔져가겠다고 하지 않으셔도 됩니다. 저도 다른 분들이 자유롭게 사용하라고 공개한 것을 값없이 가져다가 사용하고 있답니다. ^^

    ie7.0에서는 navbar가 보이지는 않는데, 로그인 부분에 마우스를 누르면 로그인 창이 뜨더라구요. 뭐가 문제인지는 물어 보지 마세요. ㅡ.ㅡa;;;

    ReplyDelete
  3. looking good, thanks for the link, and yes, the windows task bar was the inspiration of it.

    ReplyDelete
  4. avatar,

    Thanks for visit my blog in person. I appreciate your blogger hack.

    ReplyDelete
  5. 저도 테스트함 해봐야겠네요.. 잘보고 갑니다....

    ReplyDelete
  6. Wise View님. 파이어폭스에서는 잘 됩니다. IE에서는 보이지 않는 것이지 작동은 합니다. ^^

    ReplyDelete
  7. 필요한 기능들을 이리저리 찾아 다니다 여기가지 왔네요. 들러보다가 좋은 기능들을 가져 갑니다. 감사합니다.

    ReplyDelete
  8. 나무사이님. 네 잘 사용하세요. 저도 여러 블로그에서 보고 가져와서 겂없이 쓰고 있답니다.

    ReplyDelete