상세 컨텐츠

본문 제목

티스토리 블로그에 위로가기,뒤로가기,댓글쓰기등 기능아이콘 만들기

▶ 똑똑한 블로그/블로그(Blog)

by 빨간꿈 reddreams 2013. 4. 28. 20:35

본문

반응형


티스토리 블로그에 위로가기,뒤로가기,댓글쓰기등 기능아이콘 만들기





블로그에 게시글이 많아질수록, 포스팅이 길어질수록 블로그 이용과 관련된 편의기능이 절실해집니다. 단순히 인터넷 창의 앞으로가기, 뒤로가기, F5버튼 등으로 컨트롤이 가능합니다만, 이러한 주요기능들을 블로그 화면에 아예 생성해버리면 방문자도 관리자도 블로그를 이용함에 있어서 조금은 편리하지 않을까요? 오늘은 아래 그림처럼 티스토리 블로그 화면 우측으로 이쁜 기능아이콘을 넣는 법을 알아보도록 하겠습니다. 


 





본인 블로그에 적용된 위 기능아이콘을 그대로 적용한다고 했을때는 copy&paste 만으로 30초만에 적용하실 수 있으며 한 10분만 아래 태그들을 분석하신다면 단시간내 원하는 디자인,색상,텍스트 변경, 버튼 추가등을 하실 수 있을 것 입니다. 

  


skin.html 과 style.css에 아래 텍스트만 넣어주시면 끝납니다. 




Skin.html 부분 


- 이 항목에서는 각각의 아이콘별 노출되는 텍스트와 하이퍼링크 기능을 세팅합니다. 

- 위로가기, 아래로, 댓글쓰기, 새로고침 전부 일반 태그단축키, 치환자로 사용합니다.

- div id 하위로 각 아이콘별로 id 를 생성해놓고 해당 id는 css에서 설정된 값으로 불러옵니다.

 


<div id="side_fixed_button">

<a class="side_button" href="/">홈으로</a>

<a class="side_button green_button" href="#header">▲위로</a>

<a class="side_button blue_button" href="#footer">▼아래로</a>

<a class="side_button pink_button" href="#commentview">♥댓글쓰기</a>

<a class="side_button darkblue_button" href="javascript:location.reload()">새로고침</a>

<a class="side_button black_button" href="http://reddreams.tistory.com/rss" onclick="window.open(this.href); return false">RSS FEED</a>

</div>




# 블로그에 적용할 때 <a> 와 </a>사이의 글을 원하는 텍스트로 바꿔주시고, href= 항목의 주소를 본인 주소+/rss로 변경해주시면 10초만에 위 기능을 적용하실 수 있습니다. 



Style.css 부분


- css쪽에는 말그대로 해당 버튼의 고정된 위치와 색상,두께등을 세팅합니다. 

- html쪽에 보시면 버튼별 색상이 id로 세팅된것을 확인하실 수 있을 것 입니다. id별로 본인이 원하는 세팅값을 적용하시면 됩니다. 


/* 우측 사이드바 아이콘 */

.side_button{position:fixed;top:235px;right:0;width:65px;height:30px;background:red;border-radius:3px 0 0 15px;-moz-border-radius:3px 0 0 15px;-webkit-border-radius:3px 0 0 15px;-text-align:left;text-transform:uppercase;font-size:.9em;line-height:30px;color:#fff;padding-left:10px;z-index:0;-moz-background-clip:border;-webkit-background-clip:border-box;background-clip:border-box;-moz-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out}

.side_button:link,.side_button:visited,.side_button:hover,.side_button:active,.side_button:focus{color:#fff;text-decoration:none}

.side_button:hover{width:80px;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-webkit-transition:all 0.2s ease-out;transition:all 0.2s ease-out}

.red_button{position:fixed;top:200px;background:#D52100} 

.green_button{position:fixed;top:270px;background:#598B32}

.blue_button{position:fixed;top:305px;background:#0292C0} 

.pink_button{position:fixed;top:340px;background:#cd853f}

.darkblue_button{position:fixed;top:375px;background:#5122B4}

.black_button{position:fixed;top:410px;background:black} 



html에 대한 간단한 지식이 있으시다면 색상은 물론, 사이즈, 위치, 항목삭제/추가 등 자유롭게 조작하실 수 있을 것 입니다. 이쁜 블로그 꾸미세요~^^






반응형

관련글 더보기

댓글 영역

  • 프로필 사진
    2013.05.21 20:32 신고
    이거 직접 다 쳐야하나욤 ㅠㅠ
    • 프로필 사진
      2013.05.21 20:42 신고
      오옷...마우스우클릭방지를 걸어놨는데 이런 문제점이 있었네요.지금 바로 해제했습니다^^ 유용하게 사용해주세요!
  • 프로필 사진
    2013.05.21 20:56 신고
    ㅠㅠ 바로 적용해보았는데 정확히 나타나긴하는데 위로 아래로 댓글쓰기 버튼이 눌러도 작동이 안되네욤 ㅠ

    글씨도 저렇게 깔끔하지 않구욤 ㅠ 왜그런거졍 ㅠ
    • 프로필 사진
      2013.05.21 21:56 신고
      위로 치환자 #header
      아래로 치환자 #footer
      댓글쓰는항목 위치 치환자 #commentview

      이 치환자들이 html에 있는지 ctrl+f로 검색한번 해보셔요^^
      href 링크로 위 명령어를 불러오는데 html에 위 명령어가
      없으면 당연히 아무곳으로 가지도 못할겁니다.
  • 프로필 사진
    2013.05.21 22:00 신고
    ㅠㅠ 네 없어욤 ㅠ 없다면 어디에 어떻게 추카해야하나욤 ㅠ
    • 프로필 사진
      2013.05.21 22:48 신고
      <div id="footer"> = sidebar 하단 또는 copyright 아래
      <div id="header"> = menutop 하단 또는 head 아래
      <div id="commentview"> = commentWrite 하단

      일단 기본적으로 검색이 되는 영역을 지정해드렸으니
      넣어보신 후 이동이 된다면 위아래 원하시는 부분으로
      하나씩 넣어서 맞춰보시기 바랍니다.
  • 프로필 사진
    2013.05.22 01:41 신고
    우와 덕분에 적용했습니다 정말 감사합니다~~!!!
  • 프로필 사진
    2013.06.16 23:07 신고
    좋은 정보 감사합니다..덧글쓰기가 됐다안됐다하길래 빼버렸네요 ㅎㅎ 그래도 나머지는 잘되네요
    좀더 알게되면 덧글쓰기도 다시 시도해봐야겠습니다~ㅎㅎ
    • 프로필 사진
      2013.06.17 00:24 신고
      ㅎㅎ 사시 덧글쓰기 이게 덧글쓰는게 아니라 그 위치만 지정을 해주는 거라서 댓글이 많지 않으면 하단가기랑 동일해도 될정도랍니다. ㅎㅎㅎ
  • 프로필 사진
    2013.07.05 14:05 신고
    rss 주소를 치환자 [샵샵_rss_url_샵샵]으로 바꾸면 다른 블로거가 주소를 수정하지 않고 바로 사용할 수 있어요.
  • 프로필 사진
    2013.10.12 11:56 신고
    감사합니다...^^
  • 프로필 사진
    2013.12.08 19:46 신고
    적용하니 바로 나타나는데, 단적비님처럼 버튼적용이 안되네요...
    <div id="header">
    <div id="footer">

    위로 치환자 #header
    아래로 치환자 #footer
    다 있는데도 말이죠.. 스킨의 문제로 작동이 안될 수도 있는건가요..
    • 프로필 사진
      2013.12.09 00:00 신고
      기본적으로 div 값이 있다면 스킨과 무관하게 적용되어야 하는게 맞습니다. 블로그에 방문해보니 href 값이 #header_top , #header_bottom 으로 되어있습니다. #header 또는 #footer 로 적용해주시면 정상작동할 것입니다^^
  • 프로필 사진
    2013.12.11 21:00 신고
    아무리 해봐도.. 작동이 안되네요 ㅠ.ㅠ;
    크롬에선 꿈쩍도 안하고, 익스플로러에선 버튼이 위에서 아래로 내려오는 현상이 나타나요..
    어떻게 해결할 수 있는 방법이 없을까요.. 너무이쁜데.. 꼭 적용하고싶은데 말이죠..
    href 값을 div id값하고 똑같이 해봤는데도 적용이 안되네요..

    혹시나해서 다른스킨에서 사용해 봤는데 거기선 잘 되더라구요.
    • 프로필 사진
      2013.12.12 01:09 신고
      이번엔 링크는 올바르게 적용되어 있으며 클릭시 액션은 발생하는 듯 하는데 이동이 안되네요. 개발자도 아니고 스크립트를 보기 전까지는 본인 역시 추가로 도움을 드릴 수 있는 부분이 없을 듯 합니다.
      검색에서 <div id="header"> 이 내용이 제대로 검색이 되시나요?
  • 프로필 사진
    2013.12.12 22:44 신고
    아 !! 감사합니다 ^^

    문제를 해결한것 같아요.

    skin.html엔 아무 문제가 없었고

    style.css에서 문제가 있었네요.

    css부분에 이 부분만 지워주니깐 잘 작동하네요 ^^

    /* 2. 기본 링크 */
    a { color : #777; text-decoration: none; }
    a:hover { color : #0066cc; text-decoration: none; }
    a:active{
    position: relative;
    top: 1px;
    }

    이 css는 지우면 안되는 소스인가요?..

    해결되서 너무 기쁘네요 ^^ 감사합니다.
    • 프로필 사진
      2013.12.16 03:46 신고
      오옷.. 해결이 되셨다니 다행입니다.
      위 css를 보니 블로그에서 생성된 링크에 효과를 적용하는 css입니다. 마우스를 올리면 색이 어떻게 변하고, 효과가 어떻게 나오는지 하는 것으로 보통 앞단에 어떤 영역을 콘트롤 할지 텍스트가 나오는데 없는 걸로 봐서 기본적인 스킨의 설정값인듯 합니다. 아무래도 어딘가에 적용되는 듯 하니 일단 내용은 잘 백업해주셨다가 하나둘 테스트해보고 이상없는지 확인해주시기 바랍니다~
  • 프로필 사진
    2014.05.19 17:34 신고
    좋은정보
    감사합니다. ^_^
  • 프로필 사진
    2015.07.05 07:47
    비밀댓글입니다