• top,다음뷰,구독 버튼을 해상도에 관계 없이 블로그 좌우에 고정 설치하기
    Life/knowledge 2013. 9. 26.

    블로그를 운영하게되면 자연스럽게 html을 배우게 되며 세련되고 편한 디자인이 만들어진다. 오늘 설명하려는 것은 top 버튼을 해상도에 상관없이 본문 사이드에 원하는 위치에 고정시킬 수 있는 방법이다. top 버튼은 물론 구독과 추천버튼등 설치가 가능하게 되며 배우게 되면 다양하게 적용할 수 있다는 것을 알 수 있다. 오른쪽 하단에 있는 세팍타크로 공과 top 버튼이 적용된 예로 티스토리 블로그 기준이다.




    첫째, 이미지를 준비하여 파일 업로드를 한다. 

    둘째, html 소스를 html/css 편집에서 코드를 넣는다.

    셋째, 파일 업로드된 이미지 주소와 링크 주소 연결하고 위치 설정값을 조절하여 원하는 위치를 찾는다.



    어떻게 하는 방법을 알면 아주 간단하다. 제일 먼저 <head> </head> 사이에 아래 코드를 넣는다.


    <head> 

    <script>

      function floating_close(divid) {

                 var strObj = document.getElementById(divid);

                 strObj.style.display = "none";

       }

      </script>


      </head>


    다음 순서는 <body> </body>에서 본문에 해당하는(

    블로그를 운영하게되면 자연스럽게 html을 배우게 되며 세련되고 편한 디자인이 만들어진다. 오늘 설명하려는 것은 top 버튼을 해상도에 상관없이 본문 사이드에 원하는 위치에 고정시킬 수 있는 방법이다. top 버튼은 물론 구독과 추천버튼등 설치가 가능하게 되며 배우게 되면 다양하게 적용할 수 있다는 것을 알 수 있다. 오른쪽 하단에 있는 세팍타크로 공과 top 버튼이 적용된 예로 티스토리 블로그 기준이다.




    첫째, 이미지를 준비하여 파일 업로드를 한다. 

    둘째, html 소스를 html/css 편집에서 코드를 넣는다.

    셋째, 파일 업로드된 이미지 주소와 링크 주소 연결하고 위치 설정값을 조절하여 원하는 위치를 찾는다.



    어떻게 하는 방법을 알면 아주 간단하다. 제일 먼저 <head> </head> 사이에 아래 코드를 넣는다.


    <head> 

    <script>

      function floating_close(divid) {

                 var strObj = document.getElementById(divid);

                 strObj.style.display = "none";

       }

      </script>


      </head>


    다음 순서는 <body> </body>에서 본문에 해당하는() "article" 아래에 코드를 넣는다.


      <div class="fixed-top" >

      <div id="fixed-top">

       <table border="0" cellpadding="10" cellspacing="0" bgcolor="#000000">

        <tr>

         <td align="center" >

          <a href="http://koreatakraw.com/" title="메인화면"><img src="./images/takrawball01.jpg" title="메인화면"></a>

          </td>

        </tr>

        <tr>

       <td align="center" ><a href="#" title="Go toTop"><img src="./images/top3.png" title="Go to Top"></a></td>

      </tr>

     </table>

    </div></div>


    마지막은 styl. css 편집에서 아래 코드를 넣으면 끝이다. 원하는 위치를 조정하면서 본문에 맞는 위치를 찾는다.


    .fixed-top

       {position:fixed;bottom:4px; top:auto;margin-left: 690px;}

    * html .fixed-top   

       {position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+50));}


    티스토리 블로그를 운영하는데 추천, 구독, top버튼을 좌우에 설치하고 싶은 분에게 유용한 팁이 될 것이다. html 편집에서 더 응용한다면 다음 뷰 추천, 구독 버튼등 링크 소스를 넣기만 하면 쉽게 완성할 수 있다. 블로그 스킨을 수정하는 방법은 다양하게 알려져 있지만 자세히 보면 고수들의 소개하는 방법들을 찾아 볼 수 있다. 같은 원리를 구현하는 방법이지만 보다 쉽고 편리한 방법을 알기까지는 오랜 시간이 걸리는 것은 다른 일과 마찬가지인 것 같다.


    [관련글]

    ▶ 티스토리 '카테고리 다른 글' 디자인 변경 완벽 해부

    ▶ 블로그 '지식'은 공유할 수 있으나 '경험'은 어렵다.

    ▶ 애드센스 수익 확인 어플, 실시간 스마트폰 볼 수 있다.

    ▶ 블로그 방문자수 늘리는 방법, 이미지 파일 이름 저장 할 때 꼭!

    ▶ 티스토리 스킨 html 편집시 꼭 필요한 단축키

    ▶ 우수블로그 vs 인기블로그 vs 파워블로그 개념



    ) "article" 아래에 코드를 넣는다.


      <div class="fixed-top" >

      <div id="fixed-top">

       <table border="0" cellpadding="10" cellspacing="0" bgcolor="#000000">

        <tr>

         <td align="center" >

          <a href="http://koreatakraw.com/" title="메인화면"><img src="./images/takrawball01.jpg" title="메인화면"></a>

          </td>

        </tr>

        <tr>

       <td align="center" ><a href="#" title="Go toTop"><img src="./images/top3.png" title="Go to Top"></a></td>

      </tr>

     </table>

    </div></div>


    마지막은 styl. css 편집에서 아래 코드를 넣으면 끝이다. 원하는 위치를 조정하면서 본문에 맞는 위치를 찾는다.


    .fixed-top

       {position:fixed;bottom:4px; top:auto;margin-left: 690px;}

    * html .fixed-top   

       {position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+50));}


    티스토리 블로그를 운영하는데 추천, 구독, top버튼을 좌우에 설치하고 싶은 분에게 유용한 팁이 될 것이다. html 편집에서 더 응용한다면 다음 뷰 추천, 구독 버튼등 링크 소스를 넣기만 하면 쉽게 완성할 수 있다. 블로그 스킨을 수정하는 방법은 다양하게 알려져 있지만 자세히 보면 고수들의 소개하는 방법들을 찾아 볼 수 있다. 같은 원리를 구현하는 방법이지만 보다 쉽고 편리한 방법을 알기까지는 오랜 시간이 걸리는 것은 다른 일과 마찬가지인 것 같다.


    [관련글]

    ▶ 티스토리 '카테고리 다른 글' 디자인 변경 완벽 해부

    ▶ 블로그 '지식'은 공유할 수 있으나 '경험'은 어렵다.

    ▶ 애드센스 수익 확인 어플, 실시간 스마트폰 볼 수 있다.

    ▶ 블로그 방문자수 늘리는 방법, 이미지 파일 이름 저장 할 때 꼭!

    ▶ 티스토리 스킨 html 편집시 꼭 필요한 단축키

    ▶ 우수블로그 vs 인기블로그 vs 파워블로그 개념




    댓글
    로그인 유지가 안 돼서 댓글 쓰기가 안 된다면 [여기]를 클릭하여 작성하면 됩니다.

ⓒ 2024. 세팍타크로 라이프 All Rights Reserved.

티스토리툴바