티스토리 공감 버튼 디자인 쉽게 바꾸기 | 공감 구걸멘트 남기기

---

 

 

공감 버튼 꾸미는 방법💻

관리 - 꾸미기 - [스킨편집]

화면 오른쪽 스킨편집 - [html편집]

화면 오른쪽 상단 [CSS]

CSS화면에서 스크롤을 맨 아래로 내리고 마지막줄에 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)

 

 

공감 구걸멘트 남기기 🙆🏻‍♀️💗

/* 공감 구걸멘트 */
.container_postbtn:before{
    position: absolute;
    white-space: pre; 
    overflow-wrap: break-word;
    content: "👇🏻도움이 된다면 하트색을 채워주세요🤍";	/*원하는 텍스트 입력*/
    color:tomato;	/*텍스트 색상*/
    font-size: 14px;	/*텍스트 크기*/
    font-weight: 500;	/*텍스트 두께*/
    top: 0px; /*하트와 거리두기(길이조정 불가능)*/
    /* text-align: center; 화면 가운데로 옮기기*/
}

👇🏻참고한 블로그 입니다.

 

티스토리 공감앞에 글자 넣기어서 방문자 늘리기!

 

 

공감 배경색상 변경하기 💟

/* 공감 배경색상 */
.postbtn_like{
	background-color: white;	/*원하는 색상으로 변경*/
}

 

 

👇🏻적용한 모습 ❤

 

 

 

---