[티스토리] 글 하단에 공감 버튼 글 넣는 방법

티스토리 블로그의 공감 버튼에 추천 유도 문구를 넣을 수 있습니다.

요런 것을 넣어보자

넣는 방법은 매우 간단합니다.

스킨 편집 > HTML 편집 > HTML , CSS 를 이용하여 모달 창을 생성하고 문구를 삽입합니다.

 

 

---

1. 꾸미기 > 스킨 편집 > HTML 편집 > 아래 코드를 붙여넣습니다.

• 아래 코드를 HTML 제일 아래  </body> </html> 윗쪽에 붙여 넣기 > 적용 > 끝

<!-- 공감 유도문구 [S] -->
<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>
<!-- 공감 유도문구 [E] -->

• 이렇게 붙여 넣기 

 

2.'하트, 별 근육 불끈' 등 이모지 구하는 방법

이모지는 이미지를 다운로드를 받는 것이 아니라, 이모지에 해당하는 HTML 코드를 복사하여 글에 추가합니다.

 

이모지 사이트 

 

https://html-css-js.com/html/character-codes/icons/

Icons and Symbols - 𝗛𝗧𝗠𝗟 𝗖𝗛𝗔𝗥𝗔𝗖𝗧𝗘𝗥 𝗖𝗢𝗗𝗘 𝗣𝗜𝗖𝗞𝗘𝗥

 

https://toss.im/tossface/all

토스의 이모지 폰트, 토스페이스

https://www.emojiengine.com/ko/keyboard/

이모지키보드 - Emoji Engine 😀

 

HTML 코드 (HTML Chracter Codes) 는 아래와 같이 &#12744 등으로 된 문자를 말합니다.

 

 

<p>&#128539;</p>

이런 코드를 글 작성시 추가하면 된다.

 

끝