IT

블로그에 스크롤을 따라다니는 플로팅 추천, +구독 버튼을 달아보자

지금 블로그 우측을 보면, 스크롤을 이동해도 고정되어 있는 다음뷰 추천손가락과 구독 버튼 등을 볼 수 있다. 기존에 상단 혹은 하단에 배치했던 추천 버튼은 블로그 방문자의 시야에 금방 벗어나기 때문에 추천 클릭률이 낮았다. 하지만 이렇게 화면상에 고정시켜 놓고 스크롤을 내리거나 올려도 화면상에 노출이 된다면 방문자가 글을 추천하고 싶을 때 바로 추천버튼을 누를 수 있기 때문에, 그 만큼 방문자의 클릭률을 높일 수 있다. 추천 수가 높으면 다음뷰에서 상위에 랭크된다. 그렇게 되면 더욱 더 방문 유입을 높일 수 있기에 블로그 운영에 더욱 힘이 실릴 것이다.

먼저 압축된 이미지 파일을 다운로드하고 압축을 해제한 후, 이미지를 블로그에 업로드 한다. 압축을 해제하면, 텍스트 파일이 들어있다.이 텍스트 파일에 관련 소스코드가 들어있다.

추천&구독 플로팅.7z 다운로드

압축파일 안에 있는 텍스트 파일을 열면 소스가 나온다.블로그URL 부분만 변경해서 복사 한다. 그런 후에, skin.html내에 <..div class=”article”..>과 [..##_article_rep_desc_##..] 사이에 해당 코드를 붙여 넣기 한다. 본문 치환자를 감싸주는 div 클래스 명이 스킨마다 다를 수 있으므로 본문 치환자를 찾는게 수월할 것이다. 대부분의 티스토리 블로그 저 위치에 구글애드센스를 삽입하는데, 애드센스 코드보다 플로팅 코드가 위로 가야 한다.

그리고 style.css 본인의 블로그 스킨에 맞게 폭을 수정해 준 후, 아래와 같이 style.css 편집창에 아무 곳이나 붙여넣기 하면 된다. 보통 위치를 찾기 쉽게 제일 마지막에 삽인한다.

따라다니는 버튼에 보면 구글 플러스도같이 있는 것을 확인 할 수 있는데, 이 부분은 아래 글을 참고하면 되겠다.

2013/07/30 – [IT/블로그/티스토리] – 티스토리에 구글 플러스원(+1)을 달아보자

설치하다가 어려움이 있다면 댓글 주시면 성의것 답변해 드리겠습니다.


추가(2013.08.04) 버그수정이 있어서 알려드립니다.

style.css에 넣은 값만 수정해주시면 됩니다.

처음 올려드렸던 대로 하시면 플로팅 Div가 본문까지 감싸는 버그가 있습니다.

따라서 역마진을 주셔야 하는데요.

예시

/* 추천 구독 플로팅 */<#cont {position: fixed; left: 50%;}#float_layer {text-align: center; width: 86px; margin-left: -630px; background-color:#fff}#float_layer ul {padding: 5px 5px 0}

지금 이후로 받으시는 첨부파일에는 수정되어 있습니다.

Related Posts

사이트 주소에 WWW 포함 여부, 현대 웹사이트 주소의 트렌드와 선택 기준

사이트 주소에 WWW 포함 여부, 현대 웹사이트 주소의 트렌드와 선택 기준

웹사이트 도메인 주소에 “WWW”를 포함시키거나 포함시키지 않는 결정은 사용자 경험과 웹사이트 운영 측면에서 고려될 수 있는 전략이다. 최근의 트렌드는 기술적 중요성보다는 사용자의 편의성과 브랜드의 식별성을 중시하는 방향으로 나아가고…

SKT 다이렉트 플랜 요금제 결합할인 유의사항

SKT 다이렉트 플랜 요금제 결합할인 유의사항

통신비 부담을 줄이고 싶은데, 데이터 사용량은 줄이고 싶다. “SKT 통신비 다이어트, T 다이렉트 플랜”이 바로 그 해답을 제시한다. 조금만 잘 찾아보면 데이터 사용은 그대로 유지하면서 통신비는 줄일 수…

SKT 선택약정할인 할인반환금 휴대전화요금 25%할인 유의사항

SKT 선택약정할인 할인반환금 휴대전화요금 25%할인 유의사항

선택약정할인제도 선택약정할인제도는 단말 지원금을 받지 않는 고객에게 요금 할인 혜택을 제공하는 제도이다. 이 제도는 지급 단말, 중고 단말, 신규 단말 이용 고객 모두에게 적용되며, 요금 상품 선택과 12/24개월의…

도장만들기 전자서명 전자결재용 도장 이미지 무료 생성 로또번호자동생성기 추천사이트 STAMPNG

도장만들기 전자서명 전자결재용 도장 이미지 무료 생성 로또번호자동생성기 추천사이트 STAMPNG

취업, 이직 준비나 정부 지원금 신청 할 때, 문서 작업시 대부분 이름과 서명란이 있다. 매번 느끼지만 디지털과 아날로그의 경계에 있는 듯한 느낌이다. 서명란에 싸인이나 도장을 삽입하는 과정은 간단해…

GitHub 콘솔 git add, git commit, git push 명령어 정리

GitHub 콘솔(명령줄 인터페이스)에서 커밋하는 방법은 여러 단계로 구성된다. 여기서는 Git을 사용하여 변경사항을 커밋하고 GitHub 저장소에 푸시하는 기본적인 절차를 안내한다. 이 과정을 시작하기 전에, 로컬 컴퓨터에 Git이 설치되어 있어야…

알리익스프레스 Windows Hello 내돈내산 웹카메라 구매 후기 및 설치 드라이버

알리익스프레스 Windows Hello 카메라 내돈내산 후기 및 드라이버

필자가 가지고 있는 랩탑 레노버 씽크패드 P14S에서는 Windows Hello 기능이 지문과 얼굴인식으로 되어 전원을 켜거나 브라우저에서 로그인할 때, PIN번호를 누르지 않아도 지문 또는 얼굴인식으로 간단히 해결 할 수…

This Post Has 5 Comments

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다