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

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

블로그에 게시글이 많아질수록, 포스팅이 길어질수록 블로그 이용과 관련된 편의기능이 절실해집니다. 단순히 인터넷 창의 앞으로가기, 뒤로가기, 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에 대한 간단한 지식이 있으시다면 색상은 물론, 사이즈, 위치, 항목삭제/추가 등 자유롭게 조작하실 수 있을 것 입니다. 이쁜 블로그 꾸미세요~^^