티스토리 공감 버튼 추천 유도 문구

티스토리 블로그에는 공감 버튼이 있습니다. 이 공감 버튼은 글 발행 주제를 선택한 후 발행하면 글 하단에 생기는 것으로 알고 있는데요. 이 공감 버튼에 추천 유도 문구를 넣을 수 있습니다.


티스토리 공감 버튼

위와 같이 공감 버튼 주변에 공감 버튼을 눌러 달라는 클릭 유도 문구를 넣을 수 있습니다. 원하는 문구를 원하는 위치에 배치 시킬 수 있네요.


공감 버튼 추천 유도 문구

공감 버튼은 잘 모르겠지만, 예전에 다음뷰 버튼에 추천 유도 문구를 넣었을 때는 추천이 제법 잘 찍혔는데요. 예전의 다음뷰 버튼처럼 많은 추천 수는 바라지도 않고 단지 제로의 행진이 끊기길 바라는 마음으로 넣어 주었습니다.

추천 유도 문구 삽입 방법


추천 유도 문구 소스

공감 버튼 추천 유도 문구는 쉽게 구현할 수 있습니다. 티스토리 관리페이지의 HTML/CSS 편집에서 CSS 탭에 위와 같은 소스 몇 줄 넣어주면 됩니다. 소스는 자신의 블로그 스킨에 맞게 수정해야 합니다.

 

이 팁은 블로거 뭐하라(http://nubiz.tistory.com)님이 제일 먼저 공유해 주신 것 같으니 티스토리 공감을 구걸해보자 글로 이동하여 자세한 내용을 읽어 보시고 그리고 소스를 복사하여 사용하시면 되겠습니다.

티스토리 공감을 구걸해보자


http://nubiz.tistory.com/497


수정한 추천 유도 문구 소스

저는 약간 변형하여 적용하였습니다. 사용 중인 반응형 스킨에서 제 위치에 잘 나올 수 있도록 소스를 살짝 수정하여 적용 하였습니다. 불필요한 부분들을 정리해줘야 할 것 같지만 귀찮으니 패스~


티스토리 추천 유도 문구 소스

제로의 행진이 끊기길 바라는 마음이 너무 컸나 봅니다. 다음뷰 추천 유도 때처럼 과감한 문구로 변경해주었습니다.

(예시)

.daum_like_wrapper:before {white-space:pre; color:black; content: ‘글이
도움이 되었다면 공감❤️ 하트 버튼 눌러주세요’; position:absolute; top:60px; left: 0px;
text-align:center;}

(수정 예시)

.daum_like_wrapper:before {white-space:pre; color: #45b649; font-size:14px; font-weight:bold; content: ‘글이 도움이 되었다면 공감❤️ 하트 버튼 눌러주세요’; position:absolute; top:60px; left: 0px; text-align:center;}

공감 버튼 추천 유도 문구는 글씨 크기와 색상 등을 변경할 수 있습니다. 예시 중 붉은색으로 표시한 부분이 글씨 색상인데요. red, yellow 등으로 변경하거나 아래 수정 예시처럼 rgb 형식으로 변경하여 하시면 됩니다. 글씨 크기를 변경하고 싶다면 font-size:14px;를 넣고 숫자를 조절해 주시고요. 글씨를 두껍게 하고 싶다면 font-weight:bold;를 추가해 주시면 됩니다. 다른 부분들은 위치와 간격 등인데 모두 설명하는 것은 무리이니 패스~


공감 버튼 하단에 표시되는 추천 유도 문구

예시 소스처럼 적용하면 이 글의 하단에 있는 유도 문구 형태로 나옵니다. 수정 예시 소스처럼 적용하면 위와 같은 형태로 나오게 됩니다.


유니코드 테이블

공감 버튼 추천 유도 문구 중 공감❤️  부분은 ♡나 ☃ 등으로 변경할 수 있습니다. 복사해서 그대로 붙여 넣으시면 되네요. 다른 유니코드를 이용하고 싶다면 https://unicode-table.com에서 살펴 보시고 마음에 드는 것을 사용하시면 되겠습니다. 아시죠? 공감 버튼 꾹 눌러주고 가셔야 하는 것을요. 끝~

Leave a Comment