깔끔한 블로그 이동 버튼

깔끔한 블로그 이동 버튼

깔끔한 블로그 이동 버튼

 

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

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

 

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

 

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

 

 

댓글()
  1. Favicon of http://jongamk.tistory.com BlogIcon 핑구야 날자 2013.02.13 08:07 댓글주소  수정/삭제  댓글쓰기

    와우 청말 괜찮은데요... 고민한번 해봐야겠어요

  2. Favicon of http://life-lineup.tistory.com BlogIcon +요롱이+ 2013.02.13 10:02 신고 댓글주소  수정/삭제  댓글쓰기

    오호.. 좋은 소스 공유해주셔서 감사합니다^^
    너무 잘 보고 갑니닷..!!

  3. 행복박스 2013.02.13 10:21 댓글주소  수정/삭제  댓글쓰기

    너무 예쁜데요...한번 생각을 해봐야겠습니다...ㅎㅎ

  4. Favicon of http://osej.co.kr BlogIcon 어세즈 2013.02.13 10:24 댓글주소  수정/삭제  댓글쓰기

    깔끔하네요. 댓글쓰기 버튼이 마음에 들어요!
    댓글창을 찾기 어려워하는 분들이 있어서...

  5. Favicon of http://joaramission.tistory.com/ BlogIcon 별이 2013.02.13 10:49 댓글주소  수정/삭제  댓글쓰기

    상당히 깔끔하고 눈에 들어오네요^^
    오늘도 활짝웃는 즐거운 하루 되세요^^

  6. Favicon of http://stockm.tistory.com BlogIcon S매니저 2013.02.13 11:09 신고 댓글주소  수정/삭제  댓글쓰기

    깔끔한 이동버튼 공유해주셔서 감사합니다^^
    참고하겠습니닷..!!

  7. Favicon of http://nnkent11.tistory.com BlogIcon NNK의 성공 2013.02.13 11:40 댓글주소  수정/삭제  댓글쓰기

    매력적이네요~ ^^
    잘 보고 갑니다~

  8. Favicon of http://freemarket24.tistory.com BlogIcon 프리마켓24 2013.02.13 12:15 댓글주소  수정/삭제  댓글쓰기

    잘 보구 갈께요 ㅎㅎ
    멋진 오늘이 되셔요!!

  9. Favicon of http://plmoknn.tistory.com BlogIcon 단버리 2013.02.13 15:11 댓글주소  수정/삭제  댓글쓰기

    좋은 정보 감사합니다~
    즐건 하루 되시길 바래요~

  10. Favicon of http://aduyt.tistory.com BlogIcon 어듀이트 2013.02.13 16:30 댓글주소  수정/삭제  댓글쓰기

    저도 한번 해보고 싶군요.ㅎ
    깔끔하니이쁜거 같애요.ㅎ

  11. Favicon of http://insuholic.kr BlogIcon 카탈리아 2013.02.14 00:38 신고 댓글주소  수정/삭제  댓글쓰기

    오~~정말 편리하네요!!

  12. Favicon of http:// www.walkview.co.kr BlogIcon 워크뷰 2013.02.14 06:26 댓글주소  수정/삭제  댓글쓰기

    와 좋은 정보입니다^^

  13. Favicon of http://sooatti.tistory.com BlogIcon 수아띠 2013.05.01 02:28 댓글주소  수정/삭제  댓글쓰기

    전 맨 아래로, 댓글쓰기, 댓글보기, RSS 적용이 안되네요. 펄프님 글을 보니 id를 맞춰줘야한다는데 그게 뭔지요?

    • Favicon of https://www.ibagu.co.kr BlogIcon 이바구™ - 2013.05.01 21:28 신고 댓글주소  수정/삭제

      태그에 대한 이해가 좀 부족한 것 같네요.

      저도 css에 대하여 잘 모르지만 간단하게 말씀드리자면
      Style.CSS문서에서 id를 지정하고 skin.html에서 그것을 불러오는 방식입니다.
      id는 위 css태그만 잘 입력하시면 이상없이 구동됩니다.

    • Favicon of http://sooatti.tistory.com BlogIcon 수아띠 2013.05.01 23:08 댓글주소  수정/삭제

      말씀해주신대로 했더니 다 되고요. 하나 '맨 아래'가 "#header"로 님의 스킨이 되어있는것이 맞나요?

    • Favicon of http://sooatti.tistory.com BlogIcon 수아띠 2013.05.01 23:21 댓글주소  수정/삭제

      덕분에 요리조리 만지다 해결했습니다. 첨에 하루정도 헤맸는데, 금방 주신 답변으로 안되는것 다 해결했음을 알립니다. 감사합니다. 휴 잘몰라 무작정 따라하기로 배우다 보니 안되는거 턱 막힐때가 힘드네요.

    • Favicon of https://www.ibagu.co.kr BlogIcon 이바구™ - 2013.05.02 08:28 신고 댓글주소  수정/삭제

      아 실수입니다.
      '맨 아래'는 "#footer"로 되어 있습니다.

    • Favicon of https://www.ibagu.co.kr BlogIcon 이바구™ - 2013.05.02 08:30 신고 댓글주소  수정/삭제

      님의 블로그에 답변 남기려고 했더니 차단되었다고 하네요.ㅠㅠ
      그래서 제 블로그에 답변 남깁니다.

      님의 블로그에서 안되는 이유는 아래와 같습니다.

      스킨마다 코드가 다르기 때문에
      님의 스킨 CSS문서에서 댓글쓰기, 댓글보기로 지정된 부분을 찾아보세요.

      저의 스킨은 '맨 아래'는 "#header"로 댓글쓰기는 "#comment"로 댓글보기는 마땅히 지정된 것이 없어서 역시 "#comment"로 했습니다.

      맨 아래 Feed 주소는 회원가입하시고
      "http://feeds.feedburner.com/님의 feed 아이디"를 하시면 됩니다.

  14. 수고했어, 오늘도 2013.12.11 20:50 댓글주소  수정/삭제  댓글쓰기

    http://898989.tistory.com/

    버튼이 너무 이뻐서 적용시키려고 하는데 잘 되지 않네요 ㅠ.ㅠ

    버튼은 생겻는데 작동이 되지 않습니다.

    혹시나해서 다른스킨에서 사용해본 결과 아주 잘되는데

    지금 사용하는 스킨에선 작동이 안되네요..div id 값을 href #에 맞춰서 해봐도 움직이질 안아요.. 무슨 문제일까요...