티스토리 블로그에 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....^^
