이제 블로그에 내용도 조금 있으니 꾸며 보겠습니다.
| 1. 가입, 블로그 생성, 변경, 삭제 2. 글 쓰기/수정/삭제 3. 블로그 꾸미기 (Navbar) 4. 블로그 스팟의 기능들 + α |
먼저 블로그 스킨(템플릿)을 변경하기에 앞서, Navbar 라는 것에 대해서 알아보려고 합니다. 자칫 스킨을 잘못 변경하면 Navbar가 영영 사라져 버릴 수 있거든요~ 아래와 같이 블로그 상단에 띠 모양으로 되어 있는 것이 Navbar 입니다.
사용자들마다 Navbar에 대해서 생각하는 것이 다를 수 있습니다. "있는 게 좋아서 꾸미고 싶다."는 분도 있을 것이고, "없는 게 좋다."는 분도 있을 것이고, "필요 할 때만 나타나면 좋겠다."는 분도 있을 것입니다. 여기에서는 자신이 원하는 대로 사용할수 있도록 여러 가지 설정 방법을 소개하려 합니다.
1. Navbar 꾸미기
"대시보드 > 수정할 블로그 > 레이아웃 > 페이지 요소"로 찾아들어 갑니다. Drag & Drop 방식으로 원하는 기능(가젯)들을 넣고 빼고 움직일 수 있는 화면입니다. "저장"버튼 바로 아래에 Navbar 페이지 요소가 있습니다. Navbar 수정을 클릭합니다.
그러면, 아래와 같은 창이 나타나서 Navbar 의 색상을 변경할 수 있습니다. 자신의 블로그 스킨(템플릿)에 어울리는 Navbar를 구성해서 저장하도록 합니다.
2. Navbar 감추기
하지만 아무리 어울리는 색상을 찾았다 하더라고 자신의 블로그와 어울리지 않을 수 있습니다. 이럴 때에는 수동으로 설정을 해서 Navbar 를 감추어 줍니다. 약간의 html 을 손보아야 하기 때문에 익숙하지 않은 경우 실수할 수 있습니다. 실수를 복원하기 위해 일단 현재 스킨(템플릿)을 모두 백업받아 놓습니다. "레이아웃 > HTML편집"으로 찾아가서 "전체 템플릿 다운로드"를 클릭해 백업을 받습니다.
그리고 나서 템플릿을 수정해 줍니다.
/* Hide Navbar by me! */
#navbar-iframe {display:none !important;}
위의 코드를 아래 부분에 붙여 넣습니다.
/* Variable definitions
====================
중간 생략
*/
/* 이 부분 */
body {
background: $bgColor;
즉, 아래와 같이 역상으로 된 부분을 입력하는 것입니다. 그리고 나서 "템플릿 저장"을 꾹 눌러주면 수정됩니다.
자, 이렇게 사라졌습니다.
3. Navbar 보이기
그런데 Navbar 를 없애면 로그인하기 약간 불편합니다. 그래서 다시 보이고 싶을 때에는 다시 템플릿 코드를 수정해 줍니다. Navbar를 감출 때와 반대로 아래 코드를 찾아서 삭제한 후 "템플릿 저장"을 누르면 다시 Navbar가 살아납니다.
/* Hide Navbar by mamom */
#navbar-iframe {display:none !important;}
4. 필요할 때만 Navbar 보이기
어느 방법도 맘에 들지 않으면, 마지막으로 필요할 때만 보이게 하는 방법이 있습니다. 이 방법을 적용하면 평상시에는 감추어져 있다가 페이지 상단에 마우스를 가져다 대면 Navbar가 나타납니다. 현재 나온 기술로는 아래와 같이 세 가지 정도가 있습니다. 원하는 방법을 적용하면 될 듯 합니다.
4.1 투명도 설정하기
블로거 Navbar 자동감추기 Auto-Hide Blogger Navbar As Windows Taskbar에 소개된 방법입니다. 위 링크로 가보면 Navbar가 자동으로 감추어 지도록 설정되어 있으니 확인해 볼 수 있습니다. "2. Navbar 감추기"에서 넣었던 코드를 지우고, 그 자리에 아래 코드를 넣으면 됩니다.
/* Hide Navbar by me! */
/* 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)}
단, 이 코드는 IE6이나 IE7에서는 동작하지 않는다는 단점이 있습니다. 해결점은 없는 것으로 나타났다고 합니다.
4.2 크기 설정하기
Navbar 숨기기 버전 2에 소개된 방법입니다. 웹 표준을 지키지 않는 IE의 제한점을 역으로 이용해서 만든 방법입니다. "2. Navbar 감추기"에서 넣었던 코드를 지우고, 그 자리에 아래 코드를 넣으면 됩니다.
/* Hide Navbar by me! */
#navbar-iframe {height:5px;}
/* IE7, IE8, IE6 */
#navbar-iframe {height/*\**/: 30px\9;}
#navbar-iframe:hover {height:40px; !important;}
단, IE 에서는 늘 Navbar가 나타나고, 다른 브라우저에서는 화면이 아래로 밀려 내려가는 단점이 있습니다.
4.3 크기 설정 애니메이션 하기
CSS로 쉽게 animation을. (in 사파리) 참고해 제가 만든 방법입니다.(sample) 위에서 화면이 아래로 밀려 내려가는 단점을 수정/보완해서 만들었습니다. http://bitnada.blogspot.com/ 에 적용되어 있으니 확인할 수 있습니다. "2. Navbar 감추기"에서 넣었던 코드를 지우고, 그 자리에 아래 코드를 넣으면 됩니다.
/* Hide Navbar by me! */
/* Navbar show-hide code powered by mamom */
#navbar {height: 30px;}
#navbar-iframe {
height: 4px;
-webkit-transition: height 0.2s linear;
}
/* IE7, IE8, IE6 */
#navbar-iframe {height/*\**/: 30px\9;}
/* Other Browsers */
#navbar-iframe:hover {height: 30px;}
단, 애니메이션이 지원되지 않는 브라우저에서는 스르르 나타나지 않고, 팍! 나타난다는 단점이 있지요~ 그래도 제일 나은 것 같습니다. ㅎㅎ (제가 만들었으니~)
그리고 Navbar 사용 방법도 좀 알아보면 좋겠지요~ 사용법은 자습^^ 이제 Navbar를 알았으니 다음에는 블로그를 진짜로 꾸미는 방법에 대해서 알아보도록 하겠습니다.
'재능 찾기 > 컴퓨터 팁' 카테고리의 다른 글
| 블로그 스팟을 써보자 (꾸미기) - 첫 화면에 보일 글 개수 (0) | 2010.01.06 |
|---|---|
| 블로그 스팟을 써보자 (꾸미기) - 템플릿(스킨) (6) | 2010.01.06 |
| 블로그 스팟을 써보자 (글쓰기) (5) | 2010.01.04 |
| 블로그 스팟을 써보자 (블로그 생성, 삭제, 변경) (2) | 2009.12.31 |
| 외장하드 500G 로 노트북 백업~ (0) | 2009.10.08 |
