티스토리 블로그에 view추천/구독 스크롤 버튼 달기

요즘 맛집, 요리 관련 포스팅을 하다보니 view랭킹이 맛집으로 표시되더군요...ㅎㅎ
어차피 잡다한 블로그를 표방하기 때문에 문제는 없습니다만... 맛집과는 별로 어울리지 않는 블로그라...

각설하고 얼마전 이웃분의 블로그에서 view추천 버튼이 스크롤되는 것을 보고

이거 괜찮다!!!!! 나도 달아야지~~~~~

이런 생각이 들어 해당 블로거에게 조언을 구했답니다.
그분은 참고했다는 링크를 알려주셨고 가서 살펴보니 조금 더 알아보고 싶은 생각이 들었고
검색을 통해 정보를 취합하고 실행에 옮겼답니다.

위에 보이는 저녀석에 대한 얘기랍니다. 지금도 왼쪽에서 따라다니죠?ㅎㅎ

근데 얼마전 다른 이웃분께서 버튼 적용에 대해 궁금해 하시더라구요.

이전 포스트를 살펴보면 아시겠지만
제 포스트는 블로그에 대해 전문적인 스킬을 다루거나 하지는 않습니다.
그저 제가 필요하고 다른 분이 필요할 만한 방법들을 먼저 실행해보고 조금은 쉬운 방법을 설명하려고 애쓴답니다.
이게 별로 티가 안난다는게 단점이긴 하죠.

이번에도 역시나 이리저리 고민하고 적용해서 쉽게 적용할 수 있도록 설명 해보겠습니다.

스크롤 추천 버튼 적용 소스

1. skin.html에 들어갈 소스
highlighter를 이용해서 소스를 퍼가시도록 해봤지만 에러가 나는 관계로 텍스트파일로 첨부합니다.

skin 적용소스.txt

2. style.css에 들어갈 소스
아래 소스화면에서 오른쪽 위에 보이는 4개의 아이콘 중 첫번째 아이콘(view source)을 클릭하고 뜨는 창에서 복사하시면 됩니다.

/*--추천&구독 모듈--*/
.retweet {
 background-color:#f9f9f9;
 border:0.5px solid #cdecfa;
 }

#retweet {
 position: fixed; 
left: 50%; 
top: 280px; 
margin-left: -536px;
 text-align:center;
 width:68px;
 }
 
.view_button  {
 padding:5px;
 }

위의 텍스트파일 소스중 블로그주소로 표시한 부분은 모두 자신의 블로그 주소로 수정해주세요.

소스가 들어갈 위치

1. skin.html내의 위치
위에서 설명한 첫번째 소스가 들어갈 위치는 본문영역입니다.

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

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

2. style.css내의 위치
두번째 소스가 들어갈 위치 입니다.

보시다시피 syle.css의 영역 가장 아래쪽에 넣으시면 되겠습니다.

소스에 대한 설명

첫번째 소스에 대한 설명은 그다지 필요하지 않을 것 같구요.
두번째 소스에 대한 설명을 하겠습니다.

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

이해하기 쉽도록 적용된 그림과 함께 보시죠.

3번의 좌우 원점이 0%라는 것은 왼쪽 끝이라고 보시면 되구요.
다른 것은 그림을 보시면 금방 이해 하실거에요.

※ 긴급 수정

댓글을 유심히 보다가 가만히 생각을 해보니 제가 실수한 부분이 있었네요.
3번의 기준점을 왼쪽 가장자리로 잡게 되면 화면 해상도에 따라서 버튼 위치가 다르게 보여질 수 있습니다.
중앙을 원점으로 잡고 왼쪽으로 지정을 하게되면 해상도에 구애를 받지 않을텐데 말이죠...

따라서 위에 style.css에 들어가는 소스도 3번과 5번 내용을 수정했습니다.
수정전에 적용하신 분이 계시다면 css의 내용만 수정해주시면 되겠습니다.