티스토리 블로그_공감 버튼 위에 고정 문구 넣기_CSS

티스토리 공감 버튼 문구 추가

저는 포스팅 하단에 "이 블로그의 모든 글은 계속해서 수정 보완되고 있습니다. 잘못된 부분이 있거나, 좋은 의견이 있으시면 댓글 주시기 바랍니다."라는 문구를 항상 추가해 왔습니다. 그동안은 블로그 서식에 저장해 놓고 글을 발행할 때마다 밑에 첨부해 왔었죠. 하단 고정 문구를 스킨의 CSS 편집으로 고정해 둘 순 없을까? 생각을 하다가 다음과 같은 방법을 찾게 되었습니다. 글 하단에 달리는 공감 버튼(❤️). 그 위의 여백에 고정 문구를 추가하는 것이죠.

티스토리 공감 버튼 위 고정 문구 추가 결과 (티스토리 화면 캡처)

↘그렇게 얻은 결과물. 이렇게 글 하단의 공감 버튼 위에 문구를 추가하는 법을 해보겠습니다.

목차

---

1. CSS에 코드 추가하기

아래의 코드를 복사합니다.

/* 공감 버튼 위 고정 문구 */
.container_postbtn:before {
    content: "이 블로그의 모든 글은 계속해서 수정 보완되고 있습니다.\A잘못된 부분이 있거나, 좋은 의견이 있으시면 댓글주시기 바랍니다.";
    position: absolute;
    top: -40px;
    left: 0; /* 가로 위치를 시작점에 고정합니다. */
    white-space: pre;
    font-size: 12px; /* 원하는 크기로 조정합니다. */
}

"스킨 편집" - "html 편집" - "CSS"에 들어가서 가장 하단에 붙여넣기 하고, "적용" 버튼을 누릅니다.

티스토리 공감 버튼 위 고정 문구 추가 CSS 코드 (티스토리 화면 캡처)

↘원하시는 문구는 "content: " 뒤의 큰따옴표("") 안에 넣으시면 됩니다. 문장 간의 줄바꿈을 원하시면 사이에 "\A" 이걸 넣으시면 됩니다.

\A

---

2. 결과 확인하기

포스팅 하단에 문구가 추가된 것을 볼 수 있습니다.

티스토리 공감 버튼 위 고정 문구 추가 결과 (티스토리 화면 캡처)

---

※ 참고한 블로그

1. 머놀 님의 티스토리 블로그 <윤머놀>

티스토리 공감 버튼 위에 공감요청 글 달기 (간단함)

↘기본적으로 이 블로그의 코드를 참고했고, 제가 원하는 방향으로 커스터마이징을 추가하였습니다. (시작점 고정 및 폰트 사이즈 수정 추가.)

---

※ 검색 엔진 최적화(SEO) 수익형 블로그 만들기

이외에도 검색 엔진 최적화에 도움이 되는 다른 방법들은 아래 글에 정리해 두었습니다.

티스토리 블로그_수익형 블로그 검색 엔진 최적화(SEO) 설정

---