[블로그 운영 팁] 티스토리 '공감' 버튼 위 댓글, 공감 메세지 추가 지정 / 공감 권유 메세지 넣기

블로깅을 하다 보면 공감이나 댓글을 부탁하는 메세지를 포스팅 마지막에 항상 넣죠? 매번 포스팅할 때마나 귀찮으니 아예 지정해서 나올 수 있도록 해보겠습니다. 

1. 먼저 관리자 페이지로 들어갑니다! HTML/CSS 편집 메뉴를 클릭하세요.

2. 들어가시면 오른 쪽 상단에 CSS 메뉴 버튼이 있습니다. CSS 버튼을 클릭하세요~.

3. 그럼 CSS 버튼이 빨간 색으로 바뀌었죠?

4. 그러면 코드 소스 맨 아래 부분에 제가 아래에 드리는 소스를 복사해서 붙여넣기 하시면 끝!

소스 코드!

/* 공감 구걸 메세지 넣기 */ .daum_like_wrapper { float: right; width: 355px; position: relative; margin-right: 30%; } .daum_like_wrapper:before { white-space: pre; color:black; content: '댓글 작성과 공감❤️  클릭은 블로거에게 큰 힘이 됩니다 ^____^'; position: absolute; top: -3em; left: 0em; 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; } }

5. 소스 코드 붙여 넣기 후 '저장' 클릭하시면 아래와 같은 결과를 보실 수 있습니다. 혹시 소스코드 복사가 안되시면 아래 파일을 클릭해서 수정하셔요. 

소스예시.txt

공감 버튼 위에 글이 자동으로 생성됩니다. 

한 가지 더 팁을 드리자면 소스 코드에서 

width: 355px;

color:black;

top: -3em;

left: 0em;

이 네 가지 부분을 조정하시면 블로그 레이아웃에 맞게 글의 위치와 색깔을 조절할 수 있습니다. 그리고 글을 다 쓰시고 엔터를 두 세 번 더 클릭하셔서 공감 버튼과 포스팅한 글 사이 간격을 좀 두는 것이 좋습니다!

앞으로는 굳이 공감 메세지를 포스팅하실 때마다 작성하실 필요 없겠죠? 블로그 운영 간단 팁이었습니다!