깔끔한 블로그 이동 버튼
깔끔한 블로그 이동 버튼
이웃 블로그에 갔다가 깔끔한 블로그 이동 버튼이 있어서 이바구 블로그에 적용해 봤습니다.
오른쪽 사이드바 옆에 있는 요(↓) 버튼입니다.
이것이 크롬이나 화이어폭스에서는 아래와 같이 둥글게 보입니다.
블로그 상, 하단으로 이동하는 버튼은 이바구 블로그의 왼쪽에도 있지만
아무래도 오른쪽에 있는 것이 활용도가 높을 것 같아 그 동안 이동을 고민하고 있었습니다.
그런데 좋은 소스를 구해 이런 고민을 덜 수 있게 되었네요.
주목해 볼 것은 오른쪽 메뉴 버튼 중 '댓글쓰기' 메뉴입니다.
'댓글쓰기'를 클릭하면 막바로 댓글쓰기란으로 이동하게 됩니다.
한번 해 보세요^^*
메뉴는 필요에 따라 적당한 것을 차차 추가하도록 하겠습니다.
이번에 사용된 블로그 이동버튼 소스는
'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}
※ '댓글쓰기'와 '댓글보기'는 댓글창을 펼쳐 놓았을 때 적용됩니다.
스킨과 소스 필요한 분은 아래로 가세요.
이상 이바구의 블로그 이동버튼 소개였습니다.
와우 청말 괜찮은데요... 고민한번 해봐야겠어요
오호.. 좋은 소스 공유해주셔서 감사합니다^^
너무 잘 보고 갑니닷..!!
소스 원저작자는 따로 있습니다.
너무 예쁜데요...한번 생각을 해봐야겠습니다...ㅎㅎ
코드만 넣으면 되요.
깔끔하네요. 댓글쓰기 버튼이 마음에 들어요!
댓글창을 찾기 어려워하는 분들이 있어서...
저도 찾고 있던 메뉴였습니다.
상당히 깔끔하고 눈에 들어오네요^^
오늘도 활짝웃는 즐거운 하루 되세요^^
깔끔한 이동버튼 공유해주셔서 감사합니다^^
참고하겠습니닷..!!
사용해 보세요.
무료입니다.
매력적이네요~ ^^
잘 보고 갑니다~
그렇죠?
잘 보구 갈께요 ㅎㅎ
멋진 오늘이 되셔요!!
방문 감사합니다.
좋은 정보 감사합니다~
즐건 하루 되시길 바래요~
저도 한번 해보고 싶군요.ㅎ
깔끔하니이쁜거 같애요.ㅎ
아래 소스로 적용해 보세요.
오~~정말 편리하네요!!
많이 활용될 듯 하네요.
와 좋은 정보입니다^^
한번 적용해 보세요.
전 맨 아래로, 댓글쓰기, 댓글보기, RSS 적용이 안되네요. 펄프님 글을 보니 id를 맞춰줘야한다는데 그게 뭔지요?
태그에 대한 이해가 좀 부족한 것 같네요.
저도 css에 대하여 잘 모르지만 간단하게 말씀드리자면
Style.CSS문서에서 id를 지정하고 skin.html에서 그것을 불러오는 방식입니다.
id는 위 css태그만 잘 입력하시면 이상없이 구동됩니다.
말씀해주신대로 했더니 다 되고요. 하나 '맨 아래'가 "#header"로 님의 스킨이 되어있는것이 맞나요?
덕분에 요리조리 만지다 해결했습니다. 첨에 하루정도 헤맸는데, 금방 주신 답변으로 안되는것 다 해결했음을 알립니다. 감사합니다. 휴 잘몰라 무작정 따라하기로 배우다 보니 안되는거 턱 막힐때가 힘드네요.
아 실수입니다.
'맨 아래'는 "#footer"로 되어 있습니다.
님의 블로그에 답변 남기려고 했더니 차단되었다고 하네요.ㅠㅠ
그래서 제 블로그에 답변 남깁니다.
님의 블로그에서 안되는 이유는 아래와 같습니다.
스킨마다 코드가 다르기 때문에
님의 스킨 CSS문서에서 댓글쓰기, 댓글보기로 지정된 부분을 찾아보세요.
저의 스킨은 '맨 아래'는 "#header"로 댓글쓰기는 "#comment"로 댓글보기는 마땅히 지정된 것이 없어서 역시 "#comment"로 했습니다.
맨 아래 Feed 주소는 회원가입하시고
"http://feeds.feedburner.com/님의 feed 아이디"를 하시면 됩니다.
http://898989.tistory.com/
버튼이 너무 이뻐서 적용시키려고 하는데 잘 되지 않네요 ㅠ.ㅠ
버튼은 생겻는데 작동이 되지 않습니다.
혹시나해서 다른스킨에서 사용해본 결과 아주 잘되는데
지금 사용하는 스킨에선 작동이 안되네요..div id 값을 href #에 맞춰서 해봐도 움직이질 안아요.. 무슨 문제일까요...
그렇다면 다른 소스와 충돌 현상은 아닌지 모르겠네요.