블로그운영에 있어 다음뷰 뷰온추천버튼은 필수 불가결한 요소라 할 수있습니다.
Tistoy의 경우 플러그인을 활성화 시키면 바로 적용이 가능하지만 항상 고정된 위치에서만 나오는것이 불만일 수도 있습니다.
그리고 추가로 버튼을 적용하려면 매번 수동으로 코드를 가져와 매 포스팅 마다 일일이 적용해야 하기 때문에 여간 귀찮은 것이 아닐 수 없습니다.
그리고 근래 다음뷰온이 개선되면서 플래시 방식에서 HTML방식으로 변경이 된 이후 이전 방법이었던 <object>로 사용하던것이 적용이 되지도 않습니다.
그래서 이 모든것을 해결할 수 있는 방법이 있어서 공유하려고 합니다.
제가 Tistory를 사용하기때문에 Tistory기준으로 뷰온버튼을 적용할 수 있는 쉬운방법을 알려드리도록 하겠습니다.
기본 플러그인을 활성화 시킴으로써 3군데에 뷰온버튼이 달리도록 처리했습니다.
방법을 간단히 설명드리면....
기본 뷰온을 jquery를 사용하여 좌측고정위치에 복사를 해서 붙혀놓고 그 뷰온을 다시 포스팅의 첫번째 이미지 위에 붙혀 놓도록 처리 하였습니다.
그러면 티스토리에 적용하는 방법을 설명하도록 하겠습니다.
1. 먼저 티스토리에서 다음뷰 뷰온 플러그인을 활성화 시킨다.
아래의 그림처럼 뷰온박스를 "기본형"으로 선택하여서 활성화를 해야 합니다.
이 뷰온박스를 자동으로 복사해서 좌측과 상단에 붙혀넣을 것입니다.
2. skin.html에 코드를 적용한다.
HTML/CSS편집 메뉴에 있는 skin.html을 열고 아래쪽에 제가 알려드린 코드를 삽입하면 됩니다.
"1번"은 jquery를 불러오는 코드인데 라이브리(LiveRe)를 사용한다면 제거해야 합니다.
라이브리에서도 jquery를 사용하는데 충돌이 일어나더군요. 라이브러리에 있는 jquery로 아래 코드가 사용이 가능하니 삭제해도 문제 없습니다.
"2번"은 좌측에 고정으로 위치시키는 자리입니다. jquery가 해당자리에 다음뷰온 코드를 복사해서 넣어집니다.
top:숫자, left:숫자 를 조정하여 위치를 잡으면 됩니다. 아래는 bottom, 우측은 right 로 바뀌서 숫자를 작성하면 원하는 위치로 조정이 가능합니다.
"3번"은 jquery코드입니다. "1번"으로 위치를 이동시키는 코드라고 보시면 됩니다.(굳이 수정할 필요없습니다.)
"4번"은 포스트글 중 첫번째로 나오는 이미지의 위쪽에 버튼을 위치시키는 코드입니다.
두번째 이미지 위로 위치시키려면 '.article img:eq(0)'의 0 값을 1 또는 2 또는 3..으로 변경할 수 있습니다.
참고가 될것 같아 간단히 만든 코드를 첨부합니다.
추천하기버튼.html아래의 이미지는 각 위치의 ID 또는 class의 값입니다. 참고하시라고 적어넣습니다.
