[티스토리] 공감 버튼 위에 공감 권유 메시지 넣기

티스토리 공감 버튼 위에 공감 권유 메시지 넣기

 티스토리 블로그에는 글을 발행하게 되면 공감 버튼이 생기게 됩니다. 공감 버튼을 통해 사람들이 이 글을 얼마나 좋아하는지 대략 알 수 있겠죠. 이 공감 버튼 위에 항상 메시지를 달아놓을 수 있는데요. 이번에는 이를 이용해서 공감을 구걸하는 방법에 대해 알아보고자 합니다.

▲ 글 하단에 위치해 있는 공감 버튼 모습(좋아요 1을 본인이 누른 것은 안비밀;)

▶ 공감 버튼 위에 공감 권유 메시지 넣기

---

 1.

 관리 - 꾸미기 - HTML/CSS 편집으로 들어갑니다.

 2.

 CSS로 들어갑니다.

 3.

 아래의 소스를 CSS 맨 아래에 넣어줍니다.

 /* 공감 구걸 */

.daum_like_wrapper {

float: right;

width: 320px;

position: relative;

margin-right: 30%;

}

.daum_like_wrapper:before {

white-space: pre;

color:black;

content: '댓글 작성과 공감 클릭은 큰 힘이 됩니다 ^^';

position: absolute;

top: -1em;

left: 3.5em;

text-align: right;

}

@media screen and (max-width:620px) {

.daum_like_wrapper {

float:none;

width:100%;

position: relative;

margin-right:0;

padding-top:3.5em;

}

.daum_like_wrapper:before {

white-space: pre;

color:black;

content: '댓글 작성과 공감 클릭은 큰 힘이 됩니다 ^^';

position:absolute;

top: 0;left: 0;right:0;

text-align: center;

padding-top:1em;

}

}

 위의 소스가 드래그가 안돼서 복사를 못하시는 분은 아래 메모장 안에 위의 소스를 넣었으니 받아서 사용하세요.

공감 권유 소스.txt

 4.

 적당히 자신의 블로그에 맞게 수정한 후 저장 버튼을 클릭합니다.

아래에 자주 수정하는 태그를 적어놓았습니다. 빨간 부분을 수정해서 사용하시면 됩니다.

color:색깔; (원하는 글자 색깔을 영어로 적습니다)

content: '코멘트'; (원하는 메시지를 적습니다)

top: 숫자em; (숫자에 따라 메시지가 위아래로 위치합니다. 숫자가 작을수록 메시지 위치가 올라갑니다)

left: 숫자em; (숫자에 따라 메시지가 좌우로 위치합니다. 숫자가 작을수록 메시지 위치가 좌로 치우칩니다)

▲ 자신의 블로그에 알맞게 수정해서 사용하자

 5.

 블로그로 돌아가서 공감 권유 메시지가 잘 들어갔는지 확인합니다.

▲ 공감버튼 위에 메시지가 위치해 있는 모습