[모든 스킨 가능] 티스토리 공감버튼 간단히 글 넣기 | 공감 문구 넣는법 & 수정

 

 

여러분 안녕하세욥

공감 문구 넣는 쉬운 방법 딱 2가지를 소개합니다.

 

 

 

방법 : 

 

1. html 편집창에서

2. css 편집창에서

 

 

 

 

 

 

 

 

---

1. html에서

일단 html 편집창에서 ctrl+f를 통해 검색해서

라는 치환자의 위치를 찾는다.

이 치환자는 본문 글이 입력되는 위치이다.

 

이 치환자가 포함된 태그 아래에다가 원하는 단락을 입력해주면 우리가 쓴 포스팅 맨 하단에 원하는 문구가 표시되게 할 수 있다. 

 

치환자 아래 문구 입력

결과물

 

 

태그&작성내용 :

<p style="font-size:20px">잠시만요!! "💖공감" 부탁드려요 ^o^ </p>
<p>여러분 모두 로또당첨되세욘 ^o^ <br>
글 읽어주셔서 감사합니다  </p>

 

.

.

 

사용한 html 태그 간단 정리 : 

 

<p>문단작성</p> 태그: 하나의 문단(paragraph)를 만들어 낼 때 쓰인다.

이 p태그를 통하여 문단을 작성하면 작성한 문단 하단에 빈 라인이 들어간다.

 

<br> : 줄바꿈이다. 원하는 문장 뒤에 태그를 붙이면 줄바꿈된다.

 

<p>태그에 속성 주는 방법: 

- 정렬: <p align="left"> 글작성 </p>

(left, center, right, justify 중 원하는 정렬 방식을 선택하면 된다.)

- 폰트 사이즈: <p style="font-size:OOpx> 글작성 </p>

- 폰트 컬러: <p style="color:red"> 글작성 </p>

(원하는 컬러명 또는 컬러코드를 입력하면 된다.)

- 폰트 종류: <p style="font-family:'글꼴명'"> 글작성 </p>

- 여러 style 넣기: <p style="font-size:OOpx; color:red">처럼 하나의 큰 따옴표 안에서 세미콜론(;)으로 구별하면 된다.

 

<p>태그의 style은 이 외에 여러 가지가 있는데 더 다양하게 꾸미려면 따로 검색해보면 되겠다.

html p sytle이라고 검색하면 많이 뜬다.

 

 

---

2. css에서

 

아래 내용을 'css편집창 맨 아래' 그대로 붙여넣기 하면 된다.

---

/* 공감버튼 */
.container_postbtn:before {

    content: "↓↓ 하트를 채워주세요💖";
    position: absolute;
    top: -2px;
}

---

결과물: 

 

커스텀 가능한 사항:

ㅡ content의 큰따옴표 속 문구

ㅡ top: -2px; 은 문구의 위치를 나타낸다.

+값: 아래로 위치

-값: 위로 위치

양수, 음수 값 조정에 따라서

작성한 문구가 공감버튼의 아래, 위로 얼만큼 갈지 조정가능하다.

 

 

 

그 외 공감버튼 꾸미기 링크 추천: 

공감 하트 움직이게 하는 방법: https://hkebi.tistory.com/1786

티스토리 공감 하트 움직이게 하는 방법

ㄴ 너무 예쁘다!!