티스토리 공감 멘트 스킨에 넣는 방법

요즘 여기저기 보면 공감버튼이 있죠. 티스토리에도 기본적으로 공감버튼이 있습니다. 공감버튼은 글을 읽은 분들이 마음에 들거나 공감되거나 열심히 썼다라고 생각되면 눌러주는 버튼이죠. 

하지만 어떤분들은 공감버튼이 로그인해야만 누를 수 있다라고 알고 있는 분들도 있잖아요. 그런 분들에게 저처럼 공감버튼을 굽신굽신하며 받는 멘트를 넣는 방법입니다.

사실 공감버튼이 큰 의미는 없지만 그래도 많이 눌리면 기분이 좋은 것은 사실입니다. 그래서 공감에 집착하게 되는데요. 공감버튼을 눌러달라는 구걸멘트를 매번 써도 되겠지만 그건 너무 귀찮습니다. 그래서 공감멘트를 자동으로 포스팅할 때마다 넣는 방법을 알아두시면 되겠습니다.

먼저 스킨을 수정해야하는 작업이므로 HTML/CSS 편집 메뉴에 가시면 됩니다. 그리고 CSS편집을 할꺼에요.

티스토리 스킨에 공감 멘트를 넣는 방법은 CSS 편집을 통해 간단히 할 수 있습니다. 아래에 있는 코드를 그대로 CSS편집 부분 맨 아래에 넣어주시면 돼요.

---

 /* 공감 구걸 */

.daum_like_wrapper {

float: right;

width: 320px;

position: relative;

margin-right: 30%;

}

.daum_like_wrapper:before {

white-space: pre;

color:red;

content: '공감 한푼 줍쇼\A(로그인X)';

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:red;

content: '공감 한푼 줍쇼\A(로그인X)';

position:absolute;

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

text-align: center;

padding-top:1em;

}

}

---

이렇게 말이죠.

위의 코드는 마우스로 드래그가 안될테니 포스팅 맨 아래에 제가 파일을 첨부해드리도록 하겠습니다.

ㅁ

위와 같은 코드를 다 넣으셨으면 저와 같은 공감버튼위에 글이 써질겁니다.

그리고 제가 했던 그대로가 아니라 수정을 하고 싶은 분들도 있을 것 같은데요. 멘트는 content에서 수정하시면 되고, 글자 색깔은 그 위에 color에서 수정하시면 되고요. 혹시 글자의 위치가 이상하다면 top과 left를 수정하시면 글자의 위치도 저절이 가능합니다.

글자 위치 조절시에는 top이나 left 뒤의 숫자를 조절해야 하는데요. 여백의 크기라고 생각하시면 이해가 되실꺼에요. 그래서 top 부분의 숫자가 커질수록 글자는 아래로 내려가고 left의 숫자가 커질수록 글자는 오른쪽으로 옮겨집니다.

css편집후에는 꼭 저장버튼을 누르셔야 한다는 거 잊지 마시고요. 저장을 누른 후에는 블로그에 들어가셔서 잘 됐는지도 확인해보시면 되겠습니다. 그리고 저 위의 코드가 같은 내용이 2번 반복되는거 같은데요. 그게 아니라 위에꺼는 pc설정이고 아래는 모바일 설정입니다.