본문 바로가기

유용한 정보/블로그

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

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


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


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

< >



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