[블로그팁]티스토리 블로그에 추천,구독 버튼 달기(플로팅 버튼)

얼마전 제 블로그 왼쪽에 떠다니는 플로팅 버튼에 대한 포스팅을 했었답니다.
확인 하시려면 아래 링크를 따라가시면 됩니다.
티스토리 블로그에 view추천/구독 스크롤 버튼 달기

이 내용을 포스팅 했을 때 방법에 대해 궁금해 하시는 분들에게 그나마 도움이 되어서 기쁜 마음이었답니다.
많은 분들께서는 별 탈 없이 적용하신 듯 했지만
해당 글의 댓글로 혹은 다른 방법으로 적용이 안된다는 말씀을 하시는 분들도 계시더군요.

그 분들의 블로그를 방문하거나 글을 보구선 사소한 실수로 적용이 안되는 경우를 봤답니다.
하지만 소스수정과 소스의 삽입 위치까지 전혀 문제가 없음에도
적용이 안되거나 오류가 생기는 경우도 있더군요.

그래서 원인이 뭘까? 생각을 해봤답니다.
그러다가 의심하게 된것이 CSS부분이었습니다.

위에 있는 링크를 따라가서 확인해보시면 아실테지만
먼저 소개했던 방법은 두가지의 소스를 하나는 skin파일에, 하나는 CSS에 추가해야 한답니다.

전 웹페이지의 다양한 소스에 대해 거의 문외한이나 다름없지만
스킨 적용이나 다양한 팁을 접하면서 티스토리 블로그의 CSS는 상당히 민감하다는 느낌을 가지고 있답니다.

한가지 예로 제가 배포하는 스킨의 CSS파일은 전혀 이상이 없고
같은 스킨을 적용하는데도 어떤 사람은 한번에 문제없이 적용되고
어떤 사람은 스킨이 약간 어긋나는 경우가 생기더라구요.
그때는 파일의 내용을 CSS에 다시 덮어씌워주는 방법 만으로도 해결이 되었구요.

해당 내용은 아래의 링크에서 확인 하실 수 있습니다.
[블로그팁]티스토리 배포스킨 블로그에 업로드 & 적용 방법

CSS를 손대지 않는 방법

위에 언급했던 내용으로 미루어 짐작하시겠지만
이번에 설명하고자 하는 내용은 CSS에 소스 추가 없이 skin파일에만 소스를 추가해서
추천, 구독 플로팅 버튼을 적용하는 방법을 설명하려고 합니다.

우선 소스부터 공개하고 자세하게 설명을 드릴게요.

소스(자신의 블로그주소로 바꾸세요).txt

퍼가시기 편하게 highlighter를 이용해서 올리려고 했으나
지난번과 마찬가지로 생략되는 부분까지 쓸데없이 다 보여주는 highlighter의 특성때문에 텍스트 파일로 소스를 첨부합니다.

소스 설명

이전 방법에는 skin파일에 버튼의 플러그인과 경로에 해당하는 내용의 소스가 들어가고
CSS에 버튼이 올려지는 테이블의 크기, 위치등의 정보가 들어가는 방식이었습니다.
하지만 이번에는 skin파일에 추가되는 소스에 해당 내용이 모두 담겨 있답니다.

그림의 크기가 너무 작아서 잘 안보이신다면 클릭하세요~!! 크게 보실 수 있답니다.
텍스트 파일로 첨부한 소스의 내용입니다.

① 스크롤 박스 배경색
② 박스 테두리 굵기와 테두리 색
③ 좌우 원점 위치
④ 브라우저 상단에서 박스 상단까지의 간격
⑤ ③과의 간격
⑥ 박스의 가로크기

파란색 박스의 블로그주소라고 표기한 부분은 자신의 블로그 주소로 변경해주세요.
http://clason.tistory.com이런 형식입니다.

이렇게 블로그주소 부분만 수정하셔야 하구요 뒷부분은 절대 건드리시면 안됩니다.
뒷부분은 본문글의 번호에 해당하는 치환자이기 때문에 이부분이 잘못되면 추천버튼 구동이 안된답니다.

이전의 설명과 겹치는 부분이 있으나 이 포스팅 만으로 해결 할 수 있도록 다시 한번 차근차근 설명드릴게요.

그림과 함께 이해가 쉽도록 설명해볼게요. 

1번과 2번은 따로 글로 설명 안드려도 될 것 같구요.

3번의 경우 위치조절의 기준점이 되는건데요. left: 50%라는 것은 브라우저 전체 크기를 100%로 봤을 때
왼쪽에서 50%가 되는 지점 즉, 정중앙이라는 뜻이 되겠죠?

4번도 위의 설명으로 이해 되실테구요.

5번의 경우는 용어자체의 의미는 왼쪽여백이란 뜻이구요. 3번의 기준점이 정중앙이기 때문에 값이 (-)가 되면 왼쪽으로 이동하고 값이 (+)가 되면 오른쪽으로 이동하게 됩니다.
보시다시피 전 왼쪽에 보이게 하려고 (-)값을 지정했구요.

4번과 5번. 즉, 상하-좌우 위치는 본문 크기에 따라 바꿔줘야 하기 때문에 수치를 바꿔가시면서 적당한 위치로 맞춰주시면 됩니다.

필요한 파일 다운로드

추천 버튼만 적용하실거라면 아래의 파일은 필요가 없구요.
구독 버튼도 적용하실거라면 아래의 링크를 클릭해서 압축파일을 다운 받으시고 자신의 블로그 스킨폴더에 업로드 하세요~

파일다운로드 
 
구독 버튼에는 마우스 온 효과가 적용되어 있답니다.

소스가 들어갈 위치

위에서 설명한 소스가 들어갈 위치는 본문영역입니다.

그림에서 보이는 <div class="article"> 이 아래 가 본문영역입니다.
이 부분을 찾으셔서 바로 아래 넣어주시면 되겠습니다.

12월 27일 내용 수정

바로 위에 설명했던 본문 영역을 찾을 때 간혹 스킨에 따라 중복되는 소스가 있는 관계로 공통적으로 통용되는 내용으로 수정합니다.

위의 캡쳐 이미지에서 보이는 [샵#_article_rep_desc_##](부득이하게 첫자는 한글로 표기) 부분을 찾으신 후 바로 윗부분이나 혹은 아랫부분에 넣어주시면 됩니다.

위에 보이는 것은 '본문글'을 뜻하는 치환자이기 때문에 티스토리 스킨에는 공통적으로 한개만 들어간답니다.
때문에 위치가 틀릴 염려는 없을거라 생각됩니다.

본문영역에 넣어야하는 이유는 daum view로 발행을 하면 추천 버튼이 생성되죠.
view추천 버튼이 생성되는 곳이 본문글 하단 즉, 본문영역이기 때문에 이 부분을 벗어나게 되면 추천 수가 보이지도, 스크롤 추천버튼을 눌러도 적용이 안되기 때문입니다.

지금 제 블로그에도 이 포스팅의 방법으로 버튼 적용방법을 바꿨답니다.
예전 방법에서 이 방법으로 바꾸실 분들은 CSS에 추가했던 내용은 꼭 삭제하시기 바랍니다.