[티스토리] 나만의 구독 버튼 만들기

 

티스토리 글 단에 [구독버튼]이 작게 기본 UI로 들어가지만 실질적으로 눈에 잘 띄지는 않아서

구독하기 버튼을 조금 더 잘 노출하고 싶다면 포스팅 중간중간 삽입해주는 것이 좋다.

티스토리 기본 구독하기 버튼

 

---

 

글 중간에 구독 버튼 넣는 방법

 

 

1. 티스토리 설정에서 [꾸미기] > [메뉴바/구독설정]페이지에 들어가 구독 버튼이 설정되어있는지 확인해야한다.

구독버튼을 '표시합니다', 구독버튼을 '오른쪽상단'에 위치합니다로 설정한다.

 

 

 

 

 

2. 내 티스토리 블로그 빈 화면 아무데나 데고 오른쪽 마우스를 클릭해 [페이지 소스보기]를 클릭한다.

익스플로러의 경우에는 메뉴명이 [소스보기]이다.

 

 

 

 

 

 

3. 소스보기를 하면 티스토리 코드를 확인할 수 있는데, Ctrl + F를 누르고 btn_subscription 를 검색한다.

 

 

 

4. btn_subscription 를 검색하면 나오는 부분 <button 부터 </button>까지의 한줄 전체를 복사한다.

 

 

 

 

복사한 코드 예시

 <button type="button" class="btn_menu_toolbar btn_subscription #subscribe button-subscription" data-blog-id="3115786" data-url="https://ndesign.tistory.com" data-device="web_pc"><span class="txt_state">구독하기</span></button>

 

 

 

5. 위의 코드를 티스토리 글을 쓸때 에디터에서 [기본모드]를 클릭해 [HTML]을 누르고 글 중간에 넣고싶은 위치에 넣어주면 된다.

 

 

티스토리 에디터에서 [기본모드] > [HTML]을 클릭

 

복사한 코드를 넣어준다.

 

 

결과는, 이런 기본 버튼 모양으로 뜬다ㅎㅎ

 

 

↑ 이 글을 보고 계신다면 위의 구독하기 버튼 눌러주세요 *.*

 

 

 

---

구독하기 버튼의 다양한 활용방법

 

스타일을 여러가지로 변경을 줄 수있는데 예시는 아래와 같다.

data-blog-id="자신티스토리고유아이디" data-url="티스토리주소" 부분만 변경해서 사용하면 된다.

 

 

1.  아무것도 없는 텍스트 구독하기 버튼

 

 

<button class="#subscribe" style="background: transparent; border: 0;" type="button" data-blog-id="티스토리고유아이디" data-url="티스토리주소" data-device="web_pc">
구독하기
</button>

 

 

2. 테두리가 있는 구독버튼

 

<button class="#subscribe" style="background: transparent; border: 1px solid #000;width:100px;height:50px;font-weight:bold;" type="button" data-blog-id="티스토리고유아이디" data-url="티스토리주소" data-device="web_pc">
구독하기
</button>

 

3. 컬러 변경

 

<button class="#subscribe" style="background: #ffe56c; border: 2px solid #000;width:100px;height:50px;font-weight:bold;color:#000" type="button" data-blog-id="티스토리고유아이디" data-url="티스토리주소" data-device="web_pc">
구독하기
</button>

 

 

 

4. 이미지 

 

<button class="#subscribe" style="background: transparent; border: 0px;" type="button" data-blog-id="티스토리고유아이디" data-url="티스토리주소" data-device="web_pc">
<img src="이미지주소">
</button>

 

 

 

 

 

 

구독하기 버튼을 다양한 모양으로 활용할 수 있다.

하지만 한가지 단점이 있다면 티스토리 기본으로 제공되는 위치 외에 별도의 코드로 구독하기 버튼을 넣으면

버튼 클릭시 구독은 정상적으로 작동되는데, 다시 구독을 취소할수는 없다는 점이다.

(좋은 점인가ㅎㅎ)