깔끔한 블로그 이동 버튼

깔끔한 블로그 이동 버튼

 

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

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

 

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/님 블로그 바로가기☞

 

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

 

 

저작자표시비영리변경금지

• 카카오스토리
• 트위터
• 페이스북