NOTICE 
Category (104)
글꼴 (2)
디카 (10)
모니터 (4)
백신 (2)
포토샵 (29)
블로그/스킨 (5)
웹팁 (5)
윈도우즈 (10)
Java (3)
Z_brd (0)
촬영지 (10)
html (2)
기타 (9)
컴퓨터 (10)
FireFox (2)
동영상 (0)

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....^^

2017.05.11 12:38



저의 FotoZone 겔러리 스킨입니다.

이곳저곳에서 담아와 엮어 소스가 누더기 입니다만,

잘 돌아갑니다.


이웃 즐겨찾기는 없습니다.

대신에 자신이 운영하는 다른 블로그나 중요한 사이트는

HTLM 소스보기를 열어 나열된 'Link' 메뉴에 적용시키면 됩니다.


딱히 내세울만 한 것은 없어도,

화면 중앙 양끝에 '이전페이지보기'와 '다음페이지보기' 버턴을 넣어

페이지 넘기기가 수월하다는 것과

오른쪽 하단에 있는 '위, 중간, 아래' 가기 버턴이 있어 스크롤이 엄청 편합니다.


미디어로그에 버그가 발생한 것을 뒤늦게 발견했는데

그 원인을 찾아 수정하지 못하고 있습니다.;;;;


첨부파일 압축풀고 스킨등록하시면 됩니다.

수정과 재배포는 얼마든지 가능하나 제작자 이름은 살려주시기 바랍니다.


Tblack(2017-05-11).zip

Tblack(2017-05-12).zip(수정본 _ 페이지이동버턴 태그 정리)


 이전  1   다음 

fotowall :: ncloud RSS Feeds today : 10   yesterday : 9
total : 185,543