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

티스토리 탈출 다양한 CMS(Content Management System) 종류 모음

카카오가 정말 실책을 해도 큰 실책을 했다.실책으로 봐야하는지도 의문이다. 황금알을 낳는 거위의 배를 갈랐으니 말이다. 자사 블로그 플랫폼인 다음 블로그를 없애고 티스토리로 통합하더니 수익형 블로그를 운영하는 티스토리에 강제로…

Intel CPU 보증기간 워런티 조회 방법

인텔 CPU는 고장이 나지 않는 걸로 정평이 나 있다. 오죽하면 국내에서 운영하던 통합 AS 센터가 고칠 CPU가 없다고 문을 닫았을까. 그럼에도 혹여나 있을 고장에 대비해 미리 보증기간을 알아…

ASUS 메인보드 바이오스 업데이트 방법 EZ 플래시 업데이트 (Prime H310M-A R2.0)

OS든, 시스템이든, 소프트웨어든 최신 업데이트가 있으면 즉각즉각 하는 편이다. 보안상의 문제점이 해결되고 뭔가 알지 못했던 문제점들이 고쳐진다는 믿음 때문이다. 메인보드 바이오스 같은 경우 업데이트가 자주 있지는 않다. 일년에…

컴퓨터 조립 메인보드 F_PANEL 프런트패널 케이블 연결 방법

컴퓨터 조립이 쉬운 듯하면서 은근히 까다롭다. 특히 선정리가 그렇다. 선정리에 익숙하지 않은 탓에 이 고생을 왜 하고 있지란 생각이 들 때도 있다. 그럼에도 직접 해냈다는 성취감으로 직접 조립을…

윈도우 설치시 “새 파티션을 만들거나 기존 파티션을 찾을 수 없습니다. 자세한 내용은 설치 로그 파일을 참조하세요.” 오류 해결 방법

최근 시스템을 업그레이드 하면서 SSD를 포맷을 하여 싹 밀어버리고 윈도우를 재설치하는 이른바 윈도우 클린 설치를 했다. 포맷하는 과정이 잘못됐는지 윈도우 설치 도중에 윈도우 설치 위치를 지정하는 단계에서 “새…

카카오톡 오픈채팅방 대화내용 저장 백업 방법

카카오톡은 기본으로 제공해야 할 기능인 백업 기능을 톡서랍이라는 이름으로 돈을 받고 즉 유료과금 형태로 서비스를 제공하고 있다. 그마저도 백업 기능이 완벽하지 않다. 카카오톡 오픈채팅방의 대화 내용은 톡서랍을 통해서…

This Post Has 5 Comments

답글 남기기

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