티스토리 공감 버튼 움직이는 방법과 강조하는 방법 소개

저의 글 하단을 보시면 하트 모양이 움직이는 걸 보실 수 있습니다.

하트가 움직이니 뭔가 한 번이라도 눈이 더 가더라고요.

 

그래서 이번에 저 하트를 움직이게 하는 방법을 알려드리려고 합니다.

 

생각보다 어렵지 않아서 차근차근

따라서 하시면 되실 것 같습니다.

 

하트 움직이는법

설정에서 스킨 편집 눌리 주시면 됩니다.

그 이후 Html편집 눌러주세요.

 

하트 움직이는 법

꼭 CSS에 들어가시면 됩니다.

그 이후 스크롤을 맨 밑으로 가주시면 됩니다.

 

/* 하트 숨쉬기기 추가 */

. ico_like {

position: relative;

animation: ico_like 1s infinite;

margin:0 auto 

}

 

. ico_like:before,. ico_like:after {

position: absolute; 

content: "";

top: 0;

-webkit-transform-origin: 0 100%;

-o-transform-origin: 0 100%;

transform-origin: 0 100%;

}

 

ico_like:after {

left:0;

-webkit-transform-origin:100% 100%; 

-moz-transform-origin: 100% 100%;

-ms-transform-origin: 100% 100%;

-o-transform-origin: 100% 100%; 

transform-origin :100% 100%;

}

 

@keyframes ico_like {

0% {transform: scale( .75 ); } { transform: scale( 1 ); } 

40% { transform: scale( .75); }

60% { transform: scale( 1 ); }

80% { transform: scale( .75 ); }

100% { transform: scale( .75 ); }} 

/* 하트 숨쉬기기 추가 */

 

해당 위 문구를 맨 밑에 

넣어주시면 됩니다.

 

강조하기

공감 버튼 위에 글자로 공감을 누를 수 있게 

강조하는 방법입니다.

 

CSS가 아닌 HTML을 눌러주세요

그런 다음 스크롤 맨 밑으로 내려가시면 됩니다.

 

<!-- 공감 유도문구 [S] --> 

<script> 

$(document).ready(function() { var heartTag = '<div class="like_heart"><spa n 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-to p:7px solid #ff5544; border-bottom:7px solid none;border-right: 7px solid transparent;border-left: 7px solid transparent;content:" ";} 

</style> 

<!-- 공감 유도문구 [E] -->

 

위 해당 문구를 넣어주시면 됩니다.

 

강조하기

그럼 이렇게 글자가 생기게 되고

하트가 커졌다 작아졌다 움직이게 됩니다.

 

이렇게 간단한 방법으로 공감 수를 조금 더 늘릴 수 있을 것 같습니다.