본문 바로가기

Front-End/CSS

티스토리 구독 이미지 넣기

~ 목차 ~

 

 

티스토리에도 구독하는 기능이 있다는 걸 알고 계셨나요?
구독하면 피드에 구독자들이 올린 글이 게시됩니다!
그럼 티스토리 구독기능 활성화 방법과 구독이미지 설정하는 방법 알아봅시다 :)

 

 
 

목차

1. 구독 기능 활성화

2. 구독 이미지 생성

3. 블로그 주소, 블로그 ID, 원하는 이미지 주소 구하기

4. 코드 입력

5. 서식으로 등록

6. 글에서 사용하기 

 

구독 기능 활성화

1. 티스토리 관리자 페이지로 들어갑니다.

    https://블로그이름.tistory.com/manage

 

2. 관리자 사이드 메뉴에서 꾸미기 >> 메뉴바 / 구독 설정 들어가기

관리자 페이지 사이드바

3. 메뉴바 설정과 구독 버튼 설정을 '표시합니다.'로 바꿔주기

    원하는 위치로 설정 하고 미리보기 기능으로 확인하기!

구독 기능 설정된 화면

 

 


구독 이미지 생성

1. 원하는 구독 이미지를 생성합니다. (저는 미리캔버스에서 만들었습니다)

    https://www.miricanvas.com/

 

2. 관리자 >> 서식관리 >> 서식쓰기 >> 이미지 파일을 사진으로 넣고 오른쪽 클릭해서 이미지 링크 복사

    이미지 링크는 따로 적어두세요! 

 

구독 이미지 링크

 


 

블로그 주소, 블로그 ID, 원하는 이미지 주소 구하기

1. 블로그 주소 : 블로그 위에 나타나는 "https://블로그이름.tistory.com/" 이 주소입니다.

2. 블로그 ID : 로그아웃 상태에서 기능 활성화 시킨 구독하기 버튼을 오른쪽 클릭
                       >> 페이지 원본 보기(Ctrl + U)

                       >> 'button class' 검색 ( Ctrl + F

                       >>  data-blog-id=" 블로그ID " 에서 블로그 ID를 적어두세요! 

3. 이미지 주소 구하기는 위에서 했으므로 생략하겠습니다.

 

 


 

코드 입력

<div align="center">
<button class="btn_menu_toolbar btn_subscription #subscribe" style="border: none; background-color: inherit;" data-blog-id="블로그 ID" data-url="블로그 주소" data-device="web_pc">
<img src="이미지 주소" width="227" height="227" />
</button>
</div>
<div align="center"><button class="btn_menu_toolbar btn_subscription #subscribe" style="border: none; background-color: inherit;" data-blog-id="6588233" data-url="블로그 주소" data-device="web_pc">
유익하게 보셨다면 구독해주세요❤️
<span class="img_common_tistory ico_check_type1"></span></button></div>

 

메모장에 붙여서 다 작성하시면 해당 코드를 복사해주세요.

 

서식 등록

1. 관리자 >> 서식관리 >> 서식 글쓰기에서 새로운 서식을 입력해주세요. 

    제목은 알아보기 쉽게 '구독버튼'으로 했다.

2. 모드 변경 : 기본모드에서 HTML로 변경

3. 위 코드 입력하고 완료버튼 꾹!

 

글 작성

1.글 작성 후 마지막에 서식에서 '구독버튼' 불러오고 저장

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90

'Front-End > CSS' 카테고리의 다른 글

[css] on/off 토글 스위치 간단히 만들기  (5) 2024.05.28
[CSS] 글씨 강조 효과  (2) 2024.02.19
티스토리 TOP버튼 만들기  (8) 2023.11.22