티스토리 블로그 좋아요 공감 버튼 요청 문구 달기

티스토리 블로그를 운영하다 보면, 쓸데는 딱히 없지만, 그래도 글을 작성한 보람을 느낄 수 있는 것이 있습니다. 바로 공감(좋아요) 버튼의 수인데요, 오늘은 이 공감 버튼을 눌러달라는 요청 문구를 설치하는 방법 소개입니다.

 

🥕광고 차단 프로그램을 OFF 하여 주시면 좋은 콘텐츠를 제작하는 데 있어 많은 힘이 됩니다. 안녕하세요, 마녀의 숲속 블로그의 마숲입니다~^ ^

 

티스토리 좋아요 공감 버튼 요청 문구 설치하기

블로그를 너무 많이 꾸미는 것은 페이지가 열릴 때 지연 시키는 단점이 있긴 하지만, 적당한 데코레이션 배치는 특색 있는 블로그 디자인을 만들어 줍니다. 우선 공감 버튼을 요구하는 화면이 어떻게 나오는지부터 살펴보겠습니다.

 

반응형

 

 

빨간 계열의 말풍선에 하얀색 글씨로 공감 버튼을 부담 없을 정도로 요청하는 화면이지요? 동의 못하겠다면, 오늘 제공하는 html 코드 안의 문구를 바꾸거나, 백스페이스바를 눌러 이 페이지를 빠져나가.....시기 바랍니다. 

 

 

HTML 편집 화면에 공감 유도 코드 삽입하기

1. 티스토리 블로그 관리 페이지에서 스킨 편집 화면으로 진입하여 html 편집창을 엽니다. 

2. ctrl + F를 이용하여 검색 창에 </body>를 검색합니다.

3. </body> 바로 위에 아래의 코드를 복사하여 넣어 줍니다.

<!-- 티스토리 본문 하단 좋아요 공감 유도 코드 start -->
<script>
  $(document).ready(function() {
    var heartTag = '<div class="like_heart"><span class="heart_tooltip">이 글이 도움이 되었다면 ❤️(공감)를 눌러주세요</span></div>';
    $(heartTag).insertBefore($('.container_postbtn').children().eq(0));
  });
</script>
<style>
.heart_tooltip {position:absolute;left:0;top:-40px;background:#ff5544;color:#fff;font-size:10pt;padding:8px 12px;border-radius:5px;box-shadow:3px 3px 10px rgba(0,0,0,0.1);}
.heart_tooltip::after {position:absolute;left:15px;bottom:-7px;width:0;height:0;border-top:7px solid #ff5544; border-bottom:7px solid none;border-right: 7px solid transparent;border-left: 7px solid  transparent;content:" ";}
</style>
<!-- 티스토리 본문 하단 좋아요 공감 유도 코드 end -->

 

 

4. 위 코드에서 원하는 다른 문구로 변경하고 싶다면 바꿔서 붙여 넣기 합니다.

5. '적용'을 누르면 끝이 납니다. 

 

 

위 과정이 완료된 다음에 블로그 글을 확인하면 공감 / 좋아요 요청 문구가 활성화된 것을 볼 수 있습니다.

 

👉 (30만 원 실적!) 현존하는 최고의 통신비 할인카드

 

👉 테무에서 제품 구매하고 10만 원 받기

👉 끝판왕! PD 고속충전 20000 보조배터리 추천 (노트북 충전 가능)

👉 [어머, 이건 꼭 사야 돼] 테무, 알리 가성비 필수템 추천 소개

 

👉 [꿀팁] 테무에서 물건 사고 바로 가격 할인받는 방법

👉 테무, 알리에서 구입한 내돈내산 필수템 추천 모음