티스토리 플로팅 메뉴 만들기(왼쪽 메뉴, 스크롤 메뉴)

티스토리는 자유로운 HTML/CSS수정으로 다양한 효과와 기능을 추가 할 수 있습니다.

그 중 이번엔 화면상의 스크롤이 이동할때마다 좌측이나 우측에서 따라다니는 메뉴, 

플로팅 메뉴를 만들어 보겠습니다. 다음 사진은 제블로그에서 사용중인 플로팅 메뉴입니다.

소스

플로팅메뉴소스.txt

skin.html

 

저는  위에 플로팅메뉴를 위치했습니다.

style.css

#homeup{
    display:block;
    width: 37px;
    height: 30px;
    background-image:url(./images/arrow-up.png);        
    background-repeat:no-repeat;
}
#homeup:hover{    
    opacity: 0.4;
}
#homedown{
    display:block;
    width: 37px;
    height: 30px;
    background-image:url(./images/arrow-down.png);        
    background-repeat:no-repeat;
}
#homedown:hover{    
    opacity: 0.4;
}

아무곳에나 넣어주시면 되요

플로팅 메뉴 위치

저는 style값을 %로 주었습니다. 저처럼 top:30%, left:3%로 값을 줄시 어떠한 해상도에서도 위에서 30%지점,

왼쪽에서 3%지점에 플로팅메뉴가 위치하게됩니다.  적절한 값을 넣어주어 위치를 지정하시면 되고

%값 대신 px값을 넣어 고정하셔도 됩니다. 플로팅메뉴는 해상도의 영향을 받으므로 다양한 해상도에서

테스트 해보시길 바랍니다.

플로팅메뉴 스타일

border-radius의 경우 곡선 효과를 나타냅니다. 

15px는 왼쪽위, 오른쪽위, 왼쪽하단, 오른쪽하단 모두 15px의 곡선효과를 주는 것이고 만약 오른쪽위,

왼쪽 하단만 15px로 주고싶은경우 border-radius: 0 15px 0; 와 같은 형식으로 주면됩니다.

위로가기, 밑으로 가기 버튼

따라서 저같은경우는 <a name="top"></a>을 header부분에, <a name="bottom"></a>를 footer부분에 각각

넣어주었습니다. top의 경우는 <a href="#"></a>로 지정해줘도 최상위로 이동하므로  name="top"태그를

꼭 안넣어줘도 됩니다. 

a태그 스타일

a태그의 #top과 #footer의 경우 버튼을 누를시

<a name="top"></a>, <a name="footer"></a>가 있는 지점으로 이동하게 됩니다. top의경우는

a태그에 id값을 부여후 style.css에서 background-image를 주고 hover로 마우스커서 위치시 opacity로

불투명 효과를 주었습니다.

다음뷰 위젯

저는 다음뷰의 위젯이 구형인데, 신형위젯을 사용하시고 싶으신분은

 

 

 

위의 소스에서 본인의 블로그가 숫자값을 사용하는 경우를 추가해주시면 되고

entry/블로그 알아보기 이런 한글로 되어있을 경우 를 추가해 주시면됩니다.

의 경우 tistory.com의 형식으로 /를 빼고 입력해야 합니다.

본인의 개별글주소가 숫자인지, 문자인지 확인하는 방법은 관리자 메뉴의 기본 정보 탭에서

확인할 수 있습니다.

메뉴의 경우 다음뷰의 추천이 아닐까 생각해서 다음뷰 추천위젯버튼만 설명

하였습니다. 페이스북의경우 addthis에서 생성해준 소스를 붙여넣기 한것이고 rss의경우 한rss를 사용했습니다.

다른 메뉴를 추가하거나 수정하고 싶으신분은 <div></div>태그 안에 소스를 넣어 추가해주시면 됩니다.

플로팅 메뉴에 광고를 삽입할 경우 제재를 받을수도 있기 때문에 광고 삽입은 안하는것이 좋으며 

다양한 메뉴를 넣어 긴 플로팅 메뉴보단 간단한 공통메뉴만 보여주는것이 좋다고 생각합니다.