본문 바로가기

각종 IT 정보/블로그 Tip/Tech

깔끔한 블로그 이동 버튼

깔끔한 블로그 이동 버튼

 

이웃 블로그에 갔다가 깔끔한 블로그 이동 버튼이 있어서 이바구 블로그에 적용해 봤습니다.

오른쪽 사이드바 옆에 있는 요(↓) 버튼입니다.

 

메뉴IE에서의 블로그 이동 버튼

 

이것이 크롬이나 화이어폭스에서는 아래와 같이 둥글게 보입니다.

 

블로그 이동 버튼크롬, 화이어폭스에서 이렇게 보입니다

 

블로그 상, 하단으로 이동하는 버튼은 이바구 블로그의 왼쪽에도 있지만

아무래도 오른쪽에 있는 것이 활용도가 높을 것 같아 그 동안 이동을 고민하고 있었습니다.

그런데 좋은 소스를 구해 이런 고민을 덜 수 있게 되었네요.

 

주목해 볼 것은 오른쪽 메뉴  버튼 중 '댓글쓰기' 메뉴입니다.

'댓글쓰기'를 클릭하면 막바로 댓글쓰기란으로 이동하게 됩니다.

한번 해 보세요^^*

 

메뉴는 필요에 따라 적당한 것을 차차 추가하도록 하겠습니다.

 

 

 

이번에 사용된 블로그 이동버튼 소스는

'pəlp/님 블로그[링크]에서 가져 왔습니다.

 

공개스킨에 포함된 것인데 저는 오른쪽 메뉴만 가지고 왔습니다.

 

블로그 스킨깔끔한 스킨

 

블로그 스킨이 색상도 알록달록하고 메뉴도 슬라이딩이 되서 활용도가 좋을 것 같습니다.

스킨 필요하신 분 'pəlp/님 블로그[링크]에 가 보세요.

 

오른쪽 메뉴는 공개된 소스이고 나중에 원본이 사라질 것을 대비해 아래에 적어 둡니다.

복잡한 것 없이 아래 소스를 복사해 그냥 붙여 넣기만 하시면 됩니다.

 

** Html 부분 **

 

<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="#atc_btm">글끝으로</a>
<a class="side_button darkblue_button" href="#cmt_apply">댓글쓰기</a>
<a class="side_button purple_button" href="#cmt_start">댓글보기</a>
<a class="side_button black_button" href="RSS 주소" onclick="window.open(this.href); return false">RSS FEED</a>
</div>

** CSS 부분 **

/* 사이드바 */
.side_button{position:fixed;top:235px;right:0;width:65px;height:30px;background:#FBC700;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} .darkblue_button{position:fixed;top:340px;background:#5122B4}
.purple_button{position:fixed;top:375px;background:purple} .black_button{position:fixed;top:410px;background:#000}

 

※ '댓글쓰기'와 '댓글보기'는 댓글창을 펼쳐 놓았을 때 적용됩니다.

 

스킨과 소스 필요한 분은 아래로 가세요.

 

▶ 'pəlp/님 블로그 바로가기

 

이상 이바구의 블로그 이동버튼 소개였습니다.