티스토리 블로그에 위로가기,뒤로가기,댓글쓰기등 기능아이콘 만들기
블로그에 게시글이 많아질수록, 포스팅이 길어질수록 블로그 이용과 관련된 편의기능이 절실해집니다. 단순히 인터넷 창의 앞으로가기, 뒤로가기, 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에 대한 간단한 지식이 있으시다면 색상은 물론, 사이즈, 위치, 항목삭제/추가 등 자유롭게 조작하실 수 있을 것 입니다. 이쁜 블로그 꾸미세요~^^
신개념 블로그 제휴마케팅 디비디비딥(dbdbdeep) 시작! (2) | 2013.05.13 |
---|---|
티스토리 블로그에 다음뷰 손가락버튼 고정시키기 (13) | 2013.05.02 |
티스토리 블로그에 위로가기,뒤로가기,댓글쓰기등 기능아이콘 만들기 (21) | 2013.04.28 |
13년 02월 티스토리 초대장 배포합니다![종료] (71) | 2013.02.17 |
티스토리 블로그 링크접기 설정방법 (4) | 2013.02.17 |
티스토리 카운터 today,yesterday노출명 변경 (0) | 2013.02.03 |
댓글 영역
글씨도 저렇게 깔끔하지 않구욤 ㅠ 왜그런거졍 ㅠ
아래로 치환자 #footer
댓글쓰는항목 위치 치환자 #commentview
이 치환자들이 html에 있는지 ctrl+f로 검색한번 해보셔요^^
href 링크로 위 명령어를 불러오는데 html에 위 명령어가
없으면 당연히 아무곳으로 가지도 못할겁니다.
<div id="header"> = menutop 하단 또는 head 아래
<div id="commentview"> = commentWrite 하단
일단 기본적으로 검색이 되는 영역을 지정해드렸으니
넣어보신 후 이동이 된다면 위아래 원하시는 부분으로
하나씩 넣어서 맞춰보시기 바랍니다.
좀더 알게되면 덧글쓰기도 다시 시도해봐야겠습니다~ㅎㅎ
<div id="header">
<div id="footer">
위로 치환자 #header
아래로 치환자 #footer
다 있는데도 말이죠.. 스킨의 문제로 작동이 안될 수도 있는건가요..
크롬에선 꿈쩍도 안하고, 익스플로러에선 버튼이 위에서 아래로 내려오는 현상이 나타나요..
어떻게 해결할 수 있는 방법이 없을까요.. 너무이쁜데.. 꼭 적용하고싶은데 말이죠..
href 값을 div id값하고 똑같이 해봤는데도 적용이 안되네요..
혹시나해서 다른스킨에서 사용해 봤는데 거기선 잘 되더라구요.
검색에서 <div id="header"> 이 내용이 제대로 검색이 되시나요?
문제를 해결한것 같아요.
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는 지우면 안되는 소스인가요?..
해결되서 너무 기쁘네요 ^^ 감사합니다.
위 css를 보니 블로그에서 생성된 링크에 효과를 적용하는 css입니다. 마우스를 올리면 색이 어떻게 변하고, 효과가 어떻게 나오는지 하는 것으로 보통 앞단에 어떤 영역을 콘트롤 할지 텍스트가 나오는데 없는 걸로 봐서 기본적인 스킨의 설정값인듯 합니다. 아무래도 어딘가에 적용되는 듯 하니 일단 내용은 잘 백업해주셨다가 하나둘 테스트해보고 이상없는지 확인해주시기 바랍니다~
감사합니다. ^_^