어제 오후에 잠시 블로그 스킨을 손보면서 좌우에 스크롤을 따라다니는 버튼을 추가했는데 조~금 신기했는지 질문 주신 분이 계셔서 그 방법을 소개할까 합니다. 



 위 사진처럼 제 블로그 좌측에는 다음뷰 구독 버튼과 RSS 구독 버튼이, 그리고 우측에는 트위터 버튼이 있습니다. 평소에는 회색으로 보이다가 마우스 커서가 닿으면 컬로로 표시되게 꾸몄는데요. 어떤식으로 표시되는지 전혀 몰랐다는 분은 아래 영상을 보시면 이해가 되실 겁니다 ^^

 



 위 버튼을 블로그 스킨에 추가하는 방법을 알려드리기에 앞서... 좌측 버튼에 사용된 이미지들의 출처는 전혀 모릅니다. 혹시 이미지 출처를 아시는 분은 댓글 등을 통해 알려주시면 본문에 추가하겠습니다. 트위터 버튼의 이미지는 아래 참고 사이트에서 색상을 골라서 제가 직접 스크린샷으로 만든겁니다. 혹시 다른 색상을 원하신다면 아래 링크를 통해 직접 작업을 하시면 될 듯 하네요.

▶ 참고 : http://www.go2web20.net/twitterfollowbadge/



스크롤 따라 움직이는 구독 버튼 추가하기

 방법은 간단합니다. 먼저 구독 버튼으로 사용할 이미지를 다운로드해야겠죠? 아래 압축 파일을 열어보시면 제 블로그에 추가한 각 구독 버튼의 흑백 이미지와 컬러 이미지가 있을 겁니다. 그 이미지들을 관리자 모드에서 스킨 메뉴의 'HTML/CSS 편집'을 클릭, 파일 업로드탭으로 이동 하신 후 [파일 업로드] 버튼을 눌러서 추가해주세요. 



 그리고는 아시는 분은 아시겠지만... 추가한 이미지 파일명을 클릭하시면 좌측 박스에 이미지가 미리 보여질 겁니다. 이 녀석을 선택 후 우클릭 - 속성을 클릭합니다. 그럼 속성창에서 이미지의 URL 을 볼 수 있는데요. 이 녀석을 드래그하여 아래 올려드릴 소스코드 텍스트 파일에 복사해두세요. 나머지는 이미지 파일명 부분만 변경하면 되니까 굳이  이미지마다 속성창을 열어 드래그 복사하실 필요는 없습니다.



 위 과정을 마치셨다면, 이제 소스 코드만 추가하시면 됩니다. 위에서 작업했던 파일 업로드탭 바로 옆에 있는 HTML/CSS 편집탭으로 이동, Skin.html 에 </body> 위쪽에 넣어주시면 됩니다. </body> 를 찾기 힘든 분들은 'HTML/CSS 편집' 에서 Ctrl + F 혹은 F3 을 누른 후 찾기 박스에 /body 라고 입력해보세요. 그럼 금방 찾으실 겁니다.

<!--좌측버튼 구독-->
<a style="display:scroll;position:fixed;top:140px;left:0px;" href="http://v.daum.net/user/plus?blogurl=http://liverex.tistory.com" onclick="window.open(this.href); return false" title="다음뷰 구독">
<img src="흑백 이미지 URL"
onMouseover=this.src="컬러 이미지 URL"
onMouseout=this.src="흑백 이미지 URL" style="CURSOR:hand"
border="0"/></a>
<a style="display:scroll;position:fixed;top:198px;left:0px;" href="http://www.hanrss.com/add_sub.qst?url=http%3A%2F%2Fliverex.tistory.com%2Frss" onclick="window.open(this.href); return false" title="한RSS 구독">
<img src="흑백 이미지 URL"
onMouseover=this.src="컬러 이미지 URL"
onMouseout=this.src="흑백 이미지 URL" style="CURSOR:hand"
border="0"/></a>
<a style="display:scroll;position:fixed;top:140px;right:0px;" href="http://twitter.com/liverex" onclick="window.open(this.href); return false" title="Follow me">
<img src="흑백 이미지 URL"
onMouseover=this.src="컬러 이미지 URL"
onMouseout=this.src="흑백 이미지 URL" style="CURSOR:hand"
border="0"/></a>
<!--좌측버튼 구독끝-->

 위 코드는 아래 올려드린 소스코드 텍스트파일의 내용입니다. 파란색은 어느 높이에 구독 버튼을 추가할지 결정하는 것이니 각자의 취향에 맞춰 조정하시면 되겠네요. 초록색은 구독 버튼의 위치가 좌측이냐 우측이냐를, 마지막으로 빨간색은 사용하시고자 하는 분의 다음뷰,  한RSS, 트위터의 주소를 입력하시면 됩니다. 그리고 흑백이미지 URL 과 컬러 이미지 URL 부분은 위에서 말씀드린 속성에서의 URL 을 복사하시면 되겠죠?



 참고하시라고 제 skin.html 에 포함된 내용을 보여드립니다. </body> 위에 아래와 같이 넣어주시면 됩니다 ^^



 혹시 블로그 스킨의 좌측 혹은 우측에 스크롤을 따라 움직이는, 그러면서 색상이 변하는 구독 버튼을 추가하고 싶으신 분들은 참고하세요 ^^

[덧글] 소스 적용하셨던 분들 중에 링크가 안걸렸던 분들은 href="http://liverex..." 이런 식으로 되야되는데 제가 좌측 따옴표 하나를 수정하다가 삭제해버렸었네요. 다시 소스 수정해서 올렸습니다 ^^ 적용해보세요~

LiveREX 유튜브 채널 추천 영상 (구독하고 선물도 받아가세요!)
☞ 이 글은 LiveREX 의 동의없이 재발행/재배포 할 수 없습니다. [License] 를 참고하세요!
Facebook Comment
  1. 이전 댓글 더보기
  2. BlogIcon 혼자라서 2010.04.03 00:09 신고

    감사합니다~ 잘 쓰겠습니다~

  3. BlogIcon 풀칠아비 2010.04.11 23:49

    고맙습니다.
    잘 이용하도록 하겠습니다.

  4. BlogIcon 웅이아뿌 2010.04.20 23:10 신고

    덕분에 적용했습니다 ^^
    궁금한게 있는데요 ...
    제 블로그에 적용했는데 왜 처음 접속하면 배꼽이 나오고,
    마우스를 한번 가져가면 정상으로 나올까요 ???
    오늘 올려서 그럴까요 ... ?

  5. BlogIcon starfield 2010.05.04 00:59 신고

    도움 받고 갑니다~

  6. BlogIcon 파츠피아 2010.05.23 02:12 신고

    감사히 잘 보고 갑니다. 제 블로그에 사용해 보았는데 성공했습니다. ㅎㅎ

  7. BlogIcon 미스터브랜드 2010.06.03 12:01

    근데 지금 LiveREX님 왼쪽처럼 뷰추천 버튼도 생기게 하려면 어떻게 해야 하나요? 궁금해서요.

  8. BlogIcon 티비의 세상구경 2010.06.09 17:39 신고

    트위터 시작해보려고 블로그에 설치할 트위터이미지 찾는데...
    마음에 드는게 없더라구요
    렉스님 소개 해주신 사이트덕분에 좋은 이미지 구했다구요 ^^;;
    유용한 사이트 소개 감사합니다.

  9. BlogIcon 바람처럼~ 2010.07.02 01:49 신고

    저도 이거 할까 생각중이예요 ^^
    너무 좋은거 같아요

  10. BlogIcon ★입질의 추억★ 2010.07.12 18:04 신고

    오늘 이거 보고 적용해봤습니니다 ^^ 감사합니다.

  11. 2010.07.20 12:25

    비밀댓글입니다

  12. BlogIcon 마이다스의세상 2010.07.20 14:30 신고

    뒤에 주소부분하고 이미지 url부분만 바꾸면 되는거죠? 제가 초보라서요 ㅠ

  13. BlogIcon ggoi 2010.07.20 14:33 신고

    아~ 감사합니다...역시 스타일 시트에서 조정을 하신거군요..
    검색을 해 보니 fixed도 있지만 엡솔루트? 그리고 또 다른 속성도 있던데 뭐가 뭔지 햇갈리더라고요..
    조금 공부를 해 봐야 할려나봐요..(궁금한 거는 못 참는 성격이라..ㅎㅎ)
    답면 고맙습니다.

  14. BlogIcon DHN 2010.08.15 19:10 신고

    정말로 감사합니다! 오늘 이거 하고야 말겠다고 이리저리 헤맸는데 드디어 작용되는 html을 만났군요. 감사합니다.

  15. BlogIcon 임시관리자 2011.01.14 19:28 신고

    좋은 정보 감사드립니다. 그런데 지금은 저런 설정을 블로그에 해두지 않은 이유라도 있으신가요?

  16. BlogIcon 쥬르날 2011.01.24 16:19 신고

    좋은 정보 잘 보고 갑니다 ^^
    제 블로그에 적용해 보았는데요.

    익스플로러 6에서는 적용이 안되는 걸까요 ?..;;
    맨 하단에 박혀서 움직이질 않네요 ㅠ_ㅠ.
    방법이 없는걸까요?

    익스폴로러 7,8 에서는 잘 됩니다 ^^

  17. BlogIcon JUNiFAFA 2011.01.31 11:18 신고

    멋집니다!!!
    이말밖엔 안나오네요..

  18. BlogIcon 용작가 2011.03.03 13:11 신고

    유용한 정보 감사합니다.. 제 블로그에도 적용시켜보았습니다..
    LiveRex님 덕분에 더욱 멋져진거 같습니다^^
    감사합니다~* 즐거운 하루되세요~

  19. BlogIcon ZENEZ 2011.10.27 19:07 신고

    본문 하단에 다음뷰, 트윗, 페이스북추천 하는 것도 강의포스트한번 해주세요.

  20. BlogIcon 쪼재 2013.01.27 19:26 신고

    감사합니다. !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

댓글을 남겨주세요 :)




submit