반응형
티스토리 블로그 초간단 퀵메뉴 달기
티스토리 블로그의 기능에는 퀵메뉴기능이 없습니다.
많은 분들도 이점이 아쉽다고들 하시는데요.
그래서 위의 그림처럼 왼쪽에 퀵메뉴를 달아보았습니다.
퀵메뉴의 활용도는 매우 다양하죠.
응용을 어떻게 하는가에 따라 광고도 넣을 수 있고 카테고리를 넣을 수도 있고...
활용방법은 무궁무진 합니다.
이번에 작업한 퀵메뉴는 위의 그림처럼 위치하고 페이지의 스크롤을 내려도 항상 저위치에 고정되어 사용자에게 계속 보이도록 하는 퀵메뉴입니다.
스크롤을 따라 움직이는 퀵메뉴라고도 말할 수 있겠습니다.
아주 간단한 작업이니 혹시라도 필요한 내용이신 분들은 잘 봐두셨다나 나중에 활용해 보세요.^^
관리자페이지에서 스킨 → HTML/CSS 편집 → skin.html 부분에 다음의 소스를 작성합니다.
[소스 다운로드]
퀵메뉴 소스.txt소스를 작성할 위치는 <body> 태그 안에 넣습니다.
저는 포스트시작과 같은 위치를 맞추기 위하여 <!-- 태그 --> 소스 바로 아래에 작성하였습니다.
작성할 위치는 각자 여기저기 넣어보신 후 원하시는 위치에 작성하시면 되겠죠?
그리고 빨간 글씨로 된 부분에 넣고자하는 퀵메뉴의 내용을 넣으시면 끝입니다.
너무 쉽죠?!
퀵메뉴를 달기 위해 저도 많은 글을 찾아봤는데요.
<head> </head> 사이에 스크립트를 넣는 방법도 있고 이것저것 여러방법이
있지만 간단하게 <div> 태그를 써서 레이어의 개념으로 쉽게 위치시키는 방
법이 가장 간단하면서 활용하기도 쉬울것 같았습니다.
그럼 위의 소스를 간단하게 살펴보도록 하겠습니다.
1. position:fixed → 고정시킨다는 뜻이죠. 위치고정이라기보다는 화면고정입니다.
2. width:132px → 퀵메뉴의 가로 넓이 입니다.
3. left:50% → 화면절반의 왼쪽이란 뜻입니다.기준이 되는것이죠. 왼쪽에 객체가 위치하게 됩니다.
4. margin-left:-620px → 정확한 위치를 정합니다. '-'는 왼쪽, 부호 않붙히면 오른쪽입니다.
5. background:#transparent → 객체의 배경색을 정합니다. #transparent는 투명이라는 뜻.
6. padding-top:30px → 객체를 위에서 얼마나 떨어뜨리겠는가를 정합니다.
2. width:132px → 퀵메뉴의 가로 넓이 입니다.
3. left:50% → 화면절반의 왼쪽이란 뜻입니다.기준이 되는것이죠. 왼쪽에 객체가 위치하게 됩니다.
4. margin-left:-620px → 정확한 위치를 정합니다. '-'는 왼쪽, 부호 않붙히면 오른쪽입니다.
5. background:#transparent → 객체의 배경색을 정합니다. #transparent는 투명이라는 뜻.
6. padding-top:30px → 객체를 위에서 얼마나 떨어뜨리겠는가를 정합니다.
위에서 객체라함은 퀵메뉴가 되겠죠.
설명에 다소 어패가 있을수 있지만 이런 뜻이구나 하는 정도로 설명해봤습니다.
활용만 잘하면 되는거 아니겠습니까?ㅋ
퀵메뉴를 만들고 4번과 5번으로 위치를 조정하시면 되겠습니다.
이것으로 간단하게 퀵메뉴를 설치해 보았습니다.
반응형
'블로그' 카테고리의 다른 글
| 블로그에 유투브 동영상 올리기 (유투브에 동영상 올리는 방법) (0) | 2011.04.17 |
|---|---|
| 티스토리 댓글 이미지 배경넣기 (jpg, gif) (0) | 2011.04.12 |
| 티스토리 인용구 아이콘 이미지 바꾸기 (0) | 2010.08.19 |
| 스크롤 압박! 되돌아갈 Top 버튼 적용하기 (0) | 2010.07.26 |
| 티스토리 Iife in mono 스킨_사이드바 카테고리 펼치기 (0) | 2010.07.22 |
댓글