[티스토리 블로그에 추천, 구독 플로팅버튼(스크롤버튼) 적용시 주의할 점을 알아볼까요?]
오랜만에 올려보는 블로그팁입니다. 오늘은 예전에도 몇번 설명했었던 플로팅버튼에 대해 추가로 설명을 하려고 하는데요.
먼저 플로팅버튼에 대해 자세한 설명을 했었던 지난 포스트를 참고해 주시구요.
몇일 전 어떤분께서 다음뷰 추천버튼이 잘 적용되지 않는다는 댓글을 달아주셔서 확인을 해봤답니다.
뷰 추천수가 보이지 않는 경우를 얘기한 것인데요.
소스를 전혀 이상없이 삽입했는데도 스킨에 따라서는 간혹 제대로 적용이 안되는 경우가 있었습니다.
이런 경우에는 안타깝게도 제가 해드릴 수 있는 방법은 없습니다.
제가 좀더 지식이 풍부하다면 해결을 할 수 있을텐데 기초가 없이 얻어 들은 지식들이라 크게 도움은 못되는게 사실이랍니다...^^;;
이런 경우에는 안타깝게도 제가 해드릴 수 있는 방법은 없습니다.
제가 좀더 지식이 풍부하다면 해결을 할 수 있을텐데 기초가 없이 얻어 들은 지식들이라 크게 도움은 못되는게 사실이랍니다...^^;;
하지만 위의 경우가 아니라면 지금부터 설명하는 내용을 잘 살펴봐주세요.
소스 수정에서 실수가 생긴다.
추천, 구독 플로팅버튼을 자신의 블로그에 적용하기 위해서는 어쩔 수 없이 블로그 주소를 바꿔넣는 수정과정을 거쳐야 한답니다. 그런데 이 과정에서 실수가 발생하곤 하죠.
그럼 먼저 플로팅 버튼의 소스를 보실까요?
예전 포스팅과는 조금 다른 소스이구요. 왼쪽에 보이는 플로팅버튼의 소스입니다.
페이스북 좋아요 버튼은 간단하게 소스만 넣어서 적용하는게 아니기 때문에 여기서는 뺐구요.
이전 포스트를 참고하시면 좋아요 버튼도 적용할 수 있습니다.
<!-- 추천&구독 모듈 -->
<A style="POSITION: fixed; MARGIN-LEFT: -536px; TOP: 180px; LEFT: 50%;">
<table style="background-color:#f9f9f9; border:1px solid #000000; width:70px;">
<tr><td align=center>
<a href="블로그주소/toolbar/popup/link" target="_blank" title="이웃추가">
<img src=./images/link.png border="0"></a>
<object type="application/x-shockwave-flash" data=http://api.v.daum.net/static/recombox3.swf?nurl=블로그주소/{##_article_rep_id_##} width="57" height="76">
<param name="movie" value=http://api.v.daum.net/static/recombox3.swf?nurl=블로그주소/{##_article_rep_id_##} />
</object>
<div class="daum view">
<a href="http://v.daum.net/user/plus?blogurl=블로그주소" target="_blank" title="view 구독">
<img src="./images/viewout.png" onMouseover=this.src="./images/viewon.png" onMouseout=this.src="./images/viewout.png" style="cursor:hand" border="0"/></a>
</div>
</td></tr></table>
</A>
<!-- 모듈 끝 -->
<A style="POSITION: fixed; MARGIN-LEFT: -536px; TOP: 180px; LEFT: 50%;">
<table style="background-color:#f9f9f9; border:1px solid #000000; width:70px;">
<tr><td align=center>
<a href="블로그주소/toolbar/popup/link" target="_blank" title="이웃추가">
<img src=./images/link.png border="0"></a>
<object type="application/x-shockwave-flash" data=http://api.v.daum.net/static/recombox3.swf?nurl=블로그주소/{##_article_rep_id_##} width="57" height="76">
<param name="movie" value=http://api.v.daum.net/static/recombox3.swf?nurl=블로그주소/{##_article_rep_id_##} />
</object>
<div class="daum view">
<a href="http://v.daum.net/user/plus?blogurl=블로그주소" target="_blank" title="view 구독">
<img src="./images/viewout.png" onMouseover=this.src="./images/viewon.png" onMouseout=this.src="./images/viewout.png" style="cursor:hand" border="0"/></a>
</div>
</td></tr></table>
</A>
<!-- 모듈 끝 -->
sorce.txt위의 소스 중 빨간색으로 표시한 블로그주소는 자신의 블로그주소로 변경하셔야 합니다.
그리고 녹색으로 표시한 {##_article_rep_id_##}는 다음뷰 추천수를 표시하는데 꼭 필요한 치환자입니다.
블로그의 글번호를 나타내는 치환자인데요. 이게 제대로 써지지 않았을 경우 추천수가 나타나지 않는 현상이 발생합니다.
이 글에서는 치환자가 보이게 하려고 약간 수정을 했는데요.
실제로 적용하실 때는 중괄호 {, }를 대괄호 [, ]로 바꾸셔야 합니다.
즉, {##~~~~~##} 이렇게 된 부분을 [##~~~~~##] 이렇게 바꾸셔야 된다는 겁니다.
녹색 부분은 괄호만 대괄호로 바꾸시면 되구요. 이것을 삭제하시면 안됩니다.
요약정리
간단하게 정리하면
1. 4군데의 블로그주소라는 한글을 자신의 실제 블로그 주소로 변경한다.
2. 녹색으로 표시한 부분의 괄호만 대괄호로 바꿔준다.(본문에서 소스를 복사할 경우에만...)
-> 텍스트 파일에는 대괄호로 표기되어 있으니 변경할 필요가 없습니다.
마지막으로 필요한 이미지 파일을 다운 받을 수 있도록 첨부합니다.
필요한 세개의 이미지 파일이구요. 관리자 페이지에서 스킨적용 하듯이 업로드 하시면 됩니다.
다운이 안된다면 아래의 압축파일을 다운받으세요.
마지막으로 필요한 이미지 파일을 다운 받을 수 있도록 첨부합니다.
 |
 |
 |
필요한 세개의 이미지 파일이구요. 관리자 페이지에서 스킨적용 하듯이 업로드 하시면 됩니다.
다운이 안된다면 아래의 압축파일을 다운받으세요.
120308 버튼.zip이번 글에서는 플로팅버튼 적용시 주의점에 대해서 설명드렸구요.
전체적인 플로팅버튼에 대한 글은 http://clason.tistory.com/192 이 글에서 자세히 설명되어 있습니다.
소스를 수정하거나 새로 적용할 때는 항상 미리보기로 확인하시는거 잊지마세요~~^^
전체적인 플로팅버튼에 대한 글은 http://clason.tistory.com/192 이 글에서 자세히 설명되어 있습니다.
소스를 수정하거나 새로 적용할 때는 항상 미리보기로 확인하시는거 잊지마세요~~^^
