TipBoard

떠있는 고정 메뉴 만들기 _ 소스 본문

블로그/스킨

떠있는 고정 메뉴 만들기 _ 소스

제갈선광 2018.10.12 15:46

떠있는 고정 메뉴 만들기 _ 소스


티스토리 블로그에 Float menu(떠다니는 메뉴) 만드는 소스를 소개합니다.


1. 먼저 로그인 후에 스킨편집을 선택한 다음,

   오른쪽 상단의 'html편집' 메뉴를 클릭하여 html 소스창을 엽니다.


2. 열려진 소스창을 스크롤하여 끝까지 가서

   </s_t3>와 </body> 사이에 아래 소스를 붙여넣습니다.


<div class="float_banner2"><!-- 고정배너 -->

<div id='scrollmenu' name="scrolltop">

<div align="center"><a href="javascript://" class="top" onclick="goTop(); return false;"><img src="./images/up.png" onmouseover='this.src="./images/up2.png"' onmouseout='this.src="./images/up.png"' border=0 alt="위로가기"></a></div>


<div align="center"><a href="javascript://" class="bottom" onclick="goBottom(); return false;"><img src="./images/down.png" onmouseover='this.src="./images/down2.png"' onmouseout='this.src="./images/down.png"'border=0 alt="아래가기"></a></div>

</div>

<!--- 스크롤바 제어메뉴 끝 -->

</div>

<!-- 스크롤바 제어메뉴 시작 --->

<script language="JavaScript">

<!--

function goTop(){

window.scrollTo(0,0); //맨위로

}

function goMiddle(){

window.scrollTo(0,500); //중간쯤 위치를 입맛에 맞게 조절하세요.

}

function goBottom(){

var scr = document.body.scrollHeight; //페이지의 길이를 체크

window.scrollTo(0,scr); //맨아래로

}

//-->

</script>



3. 붙여넣기가 끝났으면

   이번엔는 상단의 'html' 다음에 있는 'css' 메뉴를 클릭하여

   'css'편집창을 연 다음에 맨 아래쪽으로 스크롤한 다음에

   다음 소스를 복사해 넣습니다.

 

.float_banner2   {   position:absolute; position:fixed; right:10PX; bottom:35px;    padding:0   }


4. 마지막으로 상단의 'css' 옆에 있는 '파일업로드'를 클릭하여

   아래의 '추가'를 선택한 다음 자신이 미리 준비해 둔 아이콘(화살표 같은 것)을 선택하여

   업로드합니다.


5. 마지막으로, 상단의 '저장' 버턴을 누르고

   블로그를 다시 시작하면 위 그림처럼 메뉴아이콘이 나타날 것입니다.


  3번의 css소스에서

  right 픽셀과 bottom 픽셀의 수치를 바꾸면 아이콘의 위치도 변하게 됩니다.


Good luck....^^

0 Comments
댓글쓰기 폼