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(수정본 _ 페이지이동버턴 태그 정리)


2015.09.17 11:34

혼살님의 블로그에 올려진

'티스토리에 Highslide 설치하고 사용하는 방법을 소개합니다.


http://honsal.tistory.com/category/IT/Tistory?page=1

위 주소로 방문하시면 됩니다.





<head></head> 사이에 넣어야 하는 <script> 태그 부분

<!-- Highslide JS -->
 
    <script type="text/javascript" src="./images/highslide-full.js"></script>
    <link rel="stylesheet" type="text/css" href="./images/highslide.css">
    <!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="./images/highslide-ie6.css" />
    <![endif]-->
 
    <script type="text/javascript">
        hs.graphicsDir = './images/';
        hs.align = 'center';
        hs.transitions = ['expand', 'crossfade'];
        hs.fadeInOut = true;
        hs.dimmingOpacity = 0.8;
        hs.outlineType = 'rounded-white';
        hs.captionEval = 'this.thumb.alt';
        hs.marginBottom = 105; // make room for the thumbstrip and the controls
        hs.numberPosition = 'caption';
 
        // Add the slideshow providing the controlbar and the thumbstrip
        hs.addSlideshow({
            //slideshowGroup: 'group1',
            interval: 5000,
            repeat: false,
            useControls: true,
            overlayOptions: {
                className: 'text-controls',
                position: 'bottom center',
                relativeTo: 'viewport',
                offsetY: -60
            },
            thumbstrip: {
                position: 'bottom center',
                mode: 'horizontal',
                relativeTo: 'viewport'
            }
        });
    </script>
    <!-- End Highslide JS -->


2014.06.02 11:33


FastBoot v1.6.1.zip


반응형 스킨입니다.



2013.04.01 11:12

티스토리용 스킨 블랙버전입니다.


주오스킨스로리님의 '피아노블랙'버전(http://juostory.tistory.com/340)을

제 나름대로 수정하여 FOTOZONE 사진겔러리에 적용시켰습니다.


크게 변경된 곳은 없습니다.


오른쪽 하단의 'RETURN TOP' 버턴 밑에 '중간'과 '아래가기' 버턴을 삽입했으며,

logo 이미지는 자신의 블로그 이름에 맞게 수정하시면 됩니다.

수정방법은 압출파일을 풀어 이미지폴더 안에 있는

logo.tif 파일을 열어 수정한 다음 logo.png로 덮어쓰기 저장합니다.


pianoBlack.zip



  
댓글   |
 이전  1   다음 

fotowall :: ncloud RSS Feeds today : 15   yesterday : 9
total : 185,548