티스토리 #1 스킨 - 공감 버튼 밑에 이미지와 문구 넣기

이번 포스팅에서는 티스토리 스킨에서 공감 버튼 밑에 이미지와 문구 넣는 방법에 대해서 알아보도록 하겠습니다.

HTML / CSS 편집 페이지 열기

---

먼저 블로그 관리페이지에서 사이드바 메뉴 항목에 보면 HTML / CSS 편집 항목이 있습니다. 

다음 항목을 클릭하여 HTML/CSS 편집 페이지를 열어주세요.

HTML에 소스 코드 추가

---

HTML 항목에서 제일 하단으로 스크롤을 내려주시면 </body> 태그가 있습니다. 태그 바로 위쪽에 다음 코드를 넣어주세요.

<!-- 공감 밑 글 -->

<script type='text/javascript'> 

$('<center><img src=./images/Postby.png border="0"/><br/><div class="heart"><font size="3"><font color="#000000">글이 도움이 되셨다면</font> <font color="#b30000"><strong>"♡공감"</strong></font><font color="#000000">클릭! 큰 힘이됩니다^^<br/>누락, 변경, 잘못된 정보는 댓글로 알려주세요.</font></center></font></div>').insertAfter($('.daum_like_wrapper'));

$('<center><img src=./images/Postby.png border="0"/><br/><div class="heart"><font size="3"><font color="#000000">글이 도움이 되셨다면</font> <font color="#b30000"><strong>"♡공감"</strong></font><font color="#000000">클릭! 큰 힘이됩니다^^<br/>누락, 변경, 잘못된 정보는 댓글로 알려주세요.</font></center></font></div>').insertAfter($('.container_postbtn'));

</script>

CSS에 소스 코드 수정

---

css 제일 하단으로 스크롤을 내려서 다음 코드를 넣어서 폰트 크기를 키웁니다.

.heart * {

font-size: 25px;

}

이미지 파일 업로드

---

저는 공감 버튼 밑에 이 이미지를 넣기 위해서 업로드를 하겠습니다.

파일 업로드 항목으로 이동하여 위에 img 태그의 Postby.png로 설정한 이름으로 이미지를 업로드합니다.

업로드하면 모든 글의 공감 버튼 밑에 추가된 것을 확인할 수 있습니다.