캐나다 워킹홀리뎅/생활정보 페이지
캐나다 Hello, Canada!
캐나다 Hello, Canada!

블로그 - 스크롤바 옆에 고정되어있는 링크버튼 만들기, 구독버튼 등 


얼마 전, 한rss로 열심히? 구독하고 있는 MastmanBAN님 블로그의 '무료프로그램' 카테고리에서 허우적 거리다가 화면 오른쪽 스크롤바 옆에 딱! 붙어있는 버튼들에 관심을 가지게 되었다.

이게 머지? 신기하게도 화면 스크롤에 상관없이 내 화면에 고정되어 있다.
버튼도 다음뷰, 올블로그, 블로그 코리아 등 여러개가 아기자기하게 붙어있다.
고놈.. 탐나는구나. 나도 달아보고 싶구나~ (찾아오는이 없어도 꾸미는데 열심이다. ㅋㅋ)

그래서 댓글로 MastmanBAN님에게 질문을 남겼다. 그리고 빠른 답변!! ㅋㅋ

닉쑤의 질문 =>

<중략>
지금 이 블로그 오른쪽에 스크롤바 바로 옆에 붙은 구독 링크들을 어떻게 붙이는지 궁금해서요.
follow me 부터 다음뷰, 올블로그.. 한Rss 믹시 등등등.. 화면 스크롤에 상관없이 붙어있는거요.

테터쓰고 계서서 가능한지 아님 HTML로 티스토리에서도 가능한지 궁금하네요.
제가 티스토리 쓰고 있는데 한RSS구독버튼은 어찌 붙여놨는데 다른것도 하고 싶어서 궁금하던 차였거든요.
<후략>



MastmanBAN님의 답변 =>

<중략>
따라 다니는 추천 버튼은 다음뷰를 예로 들면

<a style="display:scroll;position:fixed;top:302px;right:0px;" href="http://v.daum.net/reporter/couple7777?type=point#cmd:2" target="_blank" title='Daum ViewOn'>
<img src="http://cfs.tistory.com/custom/blog/4/49480/skin/images/daum.png" alt="Daum view" width="42" height="42" /></a>

이게 기본 코드인데 href 와 img 부분만 닉쑤님 주소로 변경해 주시면 됩니다. 그리고 </body> 위에 붙여 넣으시면 됩니다.
나머지 버튼은 위 코드에서 href 와 img, 좌표값 빼고는 똑같습니다.
<후략>


붙여넣으면 되는거임?ㅎ 일단 시키는데로 해보자. 

우선 블로그의 스킨 HTML편집 화면에서 Ctrl+F로 </body>부분을 찾았다. 그리고 </body>앞에 위 코드를 붙여넣었다. 그리고 내 블로그에 맞게 주소등을 설정해 주면된다.


MastmanBAN님의 답변에서 로 칠해놓은게 바꿔줘야 할 부분들이다. 색깔에 맞춰 대응해 보시면 되겠다.



Y좌표 숫자값
 => 링크가 표시되는 Y좌표(height) 값이다. 기준은 블로그 Top인 듯. 몰론 X좌표는(width)는 스크롤 바로 옆. 
                   
(참고로, 넷북같은 작은 화면에서는 꼭 값을 바꿔줄 필요가 있더라. 값을 줄여줄수록 위로 올라간다. 그리고 다음버튼과의 거리 차이는 버튼 아이콘 크기 값이다. 42x42아이콘이라면 42씩 값을 더해주면 되는거.)



링크 주소 => 버튼을 클릭하면 이동하는 주소이다. 다음 뷰나 올블로그, 블로그 코리아 등에서 자신의 블로그 페이지 값을 넣어준다. 

    1. 다음 뷰 -  다음과 같이 바꿔주면 된다. http://view.daum.net/my/본인다음아이디
 
    2. 올블로그, 블로그 코리아, 믹시 등 - 해당 사이트에서 블로그 검색창에서 본인의 블로그를 검색해서 나온 주소값을 넣어주면 된다.  (별도의 개인 페이지를 못 찾겠음. 믹시는 블로그 등록 이외에 따로 자기 페이지를 만들어야 되는듯.. 잘 안써서 모르겠다능;;)

    3. 한rss 구독 -  다음과 같이 바꿔준다. http://www.hanrss.com/add_sub.qst?url=http://본인블로그RSS주소

    4. igoogle 추가 - 다음과 같이 바꿔준다. http://www.google.com/ig/add?feedurl=http://본인블로그RSS주소



버튼 이미지 주소 = > 버튼 이미지 주소이다. 본인의 블로그 스킨에 원하는 이미지를 올려서 그 주소를 쓰면 된다.  (하지만 나는 귀차니즘의      압박으로 MastmanBAN님의 버튼 이미지 주소를 그대로 사용했따!! 어짜피 티스토리 계정에서 가져오는 거니...  문제없...겠죠? 혹시나 있으면 연락을.. 쿨럭; )



버튼 이름 => 첫번째는 HTML에서 사용되는 그 버튼의 이름이고, 두번째는 우리가 마우스를 버튼에 올렸을때 보이는 이름이다. 맘껏 정해도 된다.


※ 버튼 이름뒤에 나오는 width="42" height="42"는 버튼 크기이다. 원하는 크기만큼 설정해 준다. 아이콘 크기와 맞아 떨어져야 안 짤릴듯.

< >



위에 설정하는거 따라하면 끝이다. 역시 따라하는건 쉽구나. ㅋ





다시 한번 친절한 MastmanBAN님에게 감사드리며, 포스팅을 마친다.
(유명한 분이시나 혹시 모르시는 분들은 꼭 방문해 보시라. 무료프로그램, 윈도우, 유틸 등의 정보가 넘쳐난다. ㅋ)


아, 혹시나 몰라, 본인의 코드를 덧붙이니, 참고하시길~

닉쑤가 수정한 HTML 코드 보기

< >



근데 포스팅보다 이런거에 더 관심이 가는건 어째야 하나.. ㅎㅎ
FIN.

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

캐나다 워킹홀리데이/생활정보/미드/영어!
페이스북 페이지
캐나다 워킹홀리데이/생활정보
캐나다 관광비자/취업비자/LMO/주정부이민/영주권 질문과답변 블로그
캐나다 취업비자/관광비자/LMO
주정부이민/영주권관련 블로그

질문환영! 자유로운 댓글 남겨 주세요! 욕설, 비방은 삭제합니다.

  1. ㅎㅎ 나의 넷북은 보이지가 않는구나~~

  2. 크... 감사합니다. 제 블로그 홍보까지 해주시고... ^^

    • 배운거니 누구한테 배웠다고 해야지요. ㅎ

      앞으로도 많이 배울테니 좋은 글 계속 부탁드립니다. ㅋ
      좋은하루 되세요~

  3. 니 블로그를 hanrss에서 무려 4명이나 구독하고 있다고!
    ㅎㅎㅎ

    인기인이야~ ㅎ

    • 닉쑤 2010.07.03 06:20 신고

      간단한 산수임.
      본인(응?), 여자친구, Chan형, 그리고 mastmanBAN님일듯?..
      ㅋㅋㅋㅋㅋㅋ ......털썩..

  4. ㅎ 저도 최근에 이거 왼쪽에 달았는데...^^

  5. 익스 6.0에서는 지원하지 않는게 아쉽지만..
    정말 해놓으면 깔끔하고 예쁘더라구요 ^^;;;
    좋은 정보 잘 배우고 갑니다.

  6. 헐.. 댓글에 아기가...ㅋ

    스크롤바옆에 트위터 달린 블로그들 어떻게 그렇게 하는지 궁금했는데..
    이렇게 하는거였군요 저도 달아봐야겠습니다

    • 지금 제 블로그에 달려있는 올포스트, 트위터는 올포스트에서 제공되는 위젯이구요. 저는 예전에 따로 달아놨다가 지금은 안 쓰는데.. 내가 원하는데로 달려면 본문 내용으로 하시면 되구요. 블로그에 어울리게 잘 선태가시면 되겠습니다. ^^

  7. 저는 현재 달려있는 리턴 탑이 궁금합니다 우찌 달으셧나요오오오~!

    답변을 기다립니다 'ㅅ'!

티스토리 툴바