스크롤 따라다니는 다음뷰 구독버튼 추가하기
유용한 팁(TIP)/> 블로그 팁
2010. 3. 11. 05:00
어제 오후에 잠시 블로그 스킨을 손보면서 좌우에 스크롤을 따라다니는 버튼을 추가했는데 조~금 신기했는지 질문 주신 분이 계셔서 그 방법을 소개할까 합니다.
위 사진처럼 제 블로그 좌측에는 다음뷰 구독 버튼과 RSS 구독 버튼이, 그리고 우측에는 트위터 버튼이 있습니다. 평소에는 회색으로 보이다가 마우스 커서가 닿으면 컬로로 표시되게 꾸몄는데요. 어떤식으로 표시되는지 전혀 몰랐다는 분은 아래 영상을 보시면 이해가 되실 겁니다 ^^
위 버튼을 블로그 스킨에 추가하는 방법을 알려드리기에 앞서... 좌측 버튼에 사용된 이미지들의 출처는 전혀 모릅니다. 혹시 이미지 출처를 아시는 분은 댓글 등을 통해 알려주시면 본문에 추가하겠습니다. 트위터 버튼의 이미지는 아래 참고 사이트에서 색상을 골라서 제가 직접 스크린샷으로 만든겁니다. 혹시 다른 색상을 원하신다면 아래 링크를 통해 직접 작업을 하시면 될 듯 하네요.
▶ 참고 : http://www.go2web20.net/twitterfollowbadge/
방법은 간단합니다. 먼저 구독 버튼으로 사용할 이미지를 다운로드해야겠죠? 아래 압축 파일을 열어보시면 제 블로그에 추가한 각 구독 버튼의 흑백 이미지와 컬러 이미지가 있을 겁니다. 그 이미지들을 관리자 모드에서 스킨 메뉴의 'HTML/CSS 편집'을 클릭, 파일 업로드탭으로 이동 하신 후 [파일 업로드] 버튼을 눌러서 추가해주세요.
그리고는 아시는 분은 아시겠지만... 추가한 이미지 파일명을 클릭하시면 좌측 박스에 이미지가 미리 보여질 겁니다. 이 녀석을 선택 후 우클릭 - 속성을 클릭합니다. 그럼 속성창에서 이미지의 URL 을 볼 수 있는데요. 이 녀석을 드래그하여 아래 올려드릴 소스코드 텍스트 파일에 복사해두세요. 나머지는 이미지 파일명 부분만 변경하면 되니까 굳이 이미지마다 속성창을 열어 드래그 복사하실 필요는 없습니다.
위 과정을 마치셨다면, 이제 소스 코드만 추가하시면 됩니다. 위에서 작업했던 파일 업로드탭 바로 옆에 있는 HTML/CSS 편집탭으로 이동, Skin.html 에 </body> 위쪽에 넣어주시면 됩니다. </body> 를 찾기 힘든 분들은 'HTML/CSS 편집' 에서 Ctrl + F 혹은 F3 을 누른 후 찾기 박스에 /body 라고 입력해보세요. 그럼 금방 찾으실 겁니다.
위 코드는 아래 올려드린 소스코드 텍스트파일의 내용입니다. 파란색은 어느 높이에 구독 버튼을 추가할지 결정하는 것이니 각자의 취향에 맞춰 조정하시면 되겠네요. 초록색은 구독 버튼의 위치가 좌측이냐 우측이냐를, 마지막으로 빨간색은 사용하시고자 하는 분의 다음뷰, 한RSS, 트위터의 주소를 입력하시면 됩니다. 그리고 흑백이미지 URL 과 컬러 이미지 URL 부분은 위에서 말씀드린 속성에서의 URL 을 복사하시면 되겠죠?
참고하시라고 제 skin.html 에 포함된 내용을 보여드립니다. </body> 위에 아래와 같이 넣어주시면 됩니다 ^^
혹시 블로그 스킨의 좌측 혹은 우측에 스크롤을 따라 움직이는, 그러면서 색상이 변하는 구독 버튼을 추가하고 싶으신 분들은 참고하세요 ^^
[덧글] 소스 적용하셨던 분들 중에 링크가 안걸렸던 분들은 href="http://liverex..." 이런 식으로 되야되는데 제가 좌측 따옴표 하나를 수정하다가 삭제해버렸었네요. 다시 소스 수정해서 올렸습니다 ^^ 적용해보세요~
어제 오후에 잠시 블로그 스킨을 손보면서 좌우에 스크롤을 따라다니는 버튼을 추가했는데 조~금 신기했는지 질문 주신 분이 계셔서 그 방법을 소개할까 합니다.
위 사진처럼 제 블로그 좌측에는 다음뷰 구독 버튼과 RSS 구독 버튼이, 그리고 우측에는 트위터 버튼이 있습니다. 평소에는 회색으로 보이다가 마우스 커서가 닿으면 컬로로 표시되게 꾸몄는데요. 어떤식으로 표시되는지 전혀 몰랐다는 분은 아래 영상을 보시면 이해가 되실 겁니다 ^^
위 버튼을 블로그 스킨에 추가하는 방법을 알려드리기에 앞서... 좌측 버튼에 사용된 이미지들의 출처는 전혀 모릅니다. 혹시 이미지 출처를 아시는 분은 댓글 등을 통해 알려주시면 본문에 추가하겠습니다. 트위터 버튼의 이미지는 아래 참고 사이트에서 색상을 골라서 제가 직접 스크린샷으로 만든겁니다. 혹시 다른 색상을 원하신다면 아래 링크를 통해 직접 작업을 하시면 될 듯 하네요.
▶ 참고 : http://www.go2web20.net/twitterfollowbadge/
스크롤 따라 움직이는 구독 버튼 추가하기
방법은 간단합니다. 먼저 구독 버튼으로 사용할 이미지를 다운로드해야겠죠? 아래 압축 파일을 열어보시면 제 블로그에 추가한 각 구독 버튼의 흑백 이미지와 컬러 이미지가 있을 겁니다. 그 이미지들을 관리자 모드에서 스킨 메뉴의 'HTML/CSS 편집'을 클릭, 파일 업로드탭으로 이동 하신 후 [파일 업로드] 버튼을 눌러서 추가해주세요.
좌우버튼.rar그리고는 아시는 분은 아시겠지만... 추가한 이미지 파일명을 클릭하시면 좌측 박스에 이미지가 미리 보여질 겁니다. 이 녀석을 선택 후 우클릭 - 속성을 클릭합니다. 그럼 속성창에서 이미지의 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>
<!--좌측버튼 구독끝-->
<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 을 복사하시면 되겠죠?
소스 코드.txt참고하시라고 제 skin.html 에 포함된 내용을 보여드립니다. </body> 위에 아래와 같이 넣어주시면 됩니다 ^^
혹시 블로그 스킨의 좌측 혹은 우측에 스크롤을 따라 움직이는, 그러면서 색상이 변하는 구독 버튼을 추가하고 싶으신 분들은 참고하세요 ^^
[덧글] 소스 적용하셨던 분들 중에 링크가 안걸렸던 분들은 href="http://liverex..." 이런 식으로 되야되는데 제가 좌측 따옴표 하나를 수정하다가 삭제해버렸었네요. 다시 소스 수정해서 올렸습니다 ^^ 적용해보세요~
☞ LiveREX 유튜브 채널 추천 영상 (구독하고 선물도 받아가세요!)
☞ 이 글은 LiveREX 의 동의없이 재발행/재배포 할 수 없습니다. [License] 를 참고하세요!
Facebook Comment
