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

추천 유도 문구 삽입 방법

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



티스토리 공감 버튼


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



공감 버튼 추천 유도 문구


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



추천 유도 문구 소스


공감 버튼 추천 유도 문구는 쉽게 구현할 수 있습니다. 티스토리 관리페이지의 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 에서 살펴 보시고 마음에 드는 것을 사용하시면 되겠습니다. 아시죠? 공감 버튼 꾹 눌러주고 가셔야 하는 것을요. 끝~


신고
©몽리, 꿈속으로(mongri.net), 무단전재 및 재배포 금지. 공유와 직접 링크를 선호합니다.
[저작권 규약, 운영 원칙 및 이용자 준수 사항]