티스토리 공감(하트) 유도하기

많은 공감과 소통을 중요시 하는 네이버블로그와는 달리 티스토리는 비교적 유저들과의 소통과 공감에 대해서 그렇게 큰 비중을 두지 않습니다. 제가 네이버블로그에서 티스토리 블로그로 옮긴 가장 큰 이유가 여기에 있습니다.

하지만 큰 비중을 두지 않을뿐, 전혀 상관이 없는것은 아닙니다. 네이버블로그처럼 이웃과 같은 개념은 없지만 글 마지막에 공감하기(하트)버튼이 있습니다. 그리고 지속적으로 다른 블로그를 분석한 결과 많은 공감을 받은 글들이 티스토리메인에 게시가 되는것 같습니다.

당연히 같은주제의 글이라도 더 많은 사람들이 공감한 글이 더 좋은 글임은 당연할 것이기 때문에 공감을 많이 얻은 글이 메인에 소개되는것은 당연한 이치일 것입니다.

그렇다면 더 많은 사람들에게 나의 글을 노출 시키기 위해서는 조금이라도 많은 공감을 받는것이 당연할텐데, 그렇기 때문에 공감을 유도하는 문구를 설정하는 것입니다.

물론 안좋은 글이라면 아무도 공감버튼을 눌러주지 않겠지만, 좋은 글도 사람들이 공감을 누르지 않고 지나치는 경우가 많기 때문에 이 공감 유도문구는 꼭 필요하다고 생각합니다.

그렇다면 유도문구는 어떻게 넣는게 좋을까요? 글을 쓸때마다 마지막에 문구를 입력해야할까요? 아닙니다.! 티스토리 CSS설정을 통해서 굳이 포스팅에 입력하지 않아도 자동으로 문구가 생성되도록 만들수가 있습니다.

오늘은 그 방법에 대해서 알아보겠습니다.

CSS코드.txt

먼저 위의 CSS코드 파일을 다운받아주세요. 이 코드를 티스토리 CSS에 입력하면 우리가 원하는 공감유도 문구를 입력 할 수 있습니다.

먼저 티스토리 블로그에 접속해서 블로그관리 -> HTML/CSS편집 탭을 클릭합니다. 여기서 HTML코드의 수정을 통해서 자신의 블로그를 만들어가는 것이가능합니다.

HTML/CSS편집 탭에 접속하면 위와같은 화면이 나옵니다. 여기서 위쪽에 HTML, CSS가 있는데 우리는 CSS의 수정을 통해서 문구를 만들것이기 때문에 CSS탭을 선택합니다.

그리고 코드페이지에서 가장 아래에 위에서 다운받은 CSS코드를 입력합니다.

이렇게 하고 저장하기를 누르면 '댓글과 공감 클릭은 더 좋은 글을 위한 응원이 됩니다' 라는 문구가 생성이 됩니다.

여기까지만 해도 문구는 출력이 되지만 자신의 블로에 맞는 크기와 색 그리고 위치를 맞춰야 가독성있는 포스팅이 완성이 되겠지요? 아래의 코드수정을 통해서 자신이 원하는대로 문구수정이 가능합니다.

color:red; 문구의 색을 지정하는 코드입니다.

content: "xxxxxxxxxxxxxx"; 나타낼 텍스트 문구를 입력하는 코드입니다.

position : absolute; 위치를 나타내는 코드인데 여기서 absolute는 절대위치라는 의미입니다.

top : -0.7em; 이 값의 수정으로 문구의 위치를 설정할 수 있습니다. 임의의값을 입력해보고 블로그에 최적화된 위치값을 찾으면 되겠습니다. 

left: 1em; 중앙을 기준으로 왼쪽으로 이동시키는 코드입니다. 저는 0으로 해서 문구가 딱 중앙으로 오도록 했습니다.

text-align: center: 출력할 텍스트 문구의 위치를 중앙(center)로 설정하는 코드입니다.