[티스토리] 모바일에서도 보이는 나만의 구독 버튼 만들어보자!

티스토리를 사용하다보면 구독 버튼이 어디있는지 파악이 잘 안되는 경우가 많다.

 

PC의 경우에는 설정에서 구독 버튼을 활성화 시켜놓으면 잘 보이지만, 모바일에서는 그러한 기능이 적용되지 않는다.

 

이러한 문제를 해결하기 위해 직접 구독 버튼을 블로그에 만들어 넣음으로써 해결해보자.

---

Step 1. 구독 버튼 표시 해제

해당 단계는 구독 버튼을 표시해둔 사용자들에게만 해당된다.

 

본인이 직접 만든 구독 버튼을 넣을 예정이기 때문에

설정 -> 꾸미기 -> 메뉴바/구독 설정에 들어가 구독 버튼 표시를 해제해주자.

구독 버튼 표시 해제

 

 

Step 2. 모바일 꾸미기 설정 해제

해당 단계는 모바일 꾸미기 설정을 해둔 사용자들에게만 해당된다.

 

티스토리는 모바일 환경에서는 다른 스킨을 제공하는 기능을 제공한다.

하지만 우리는 우리가 만든 스킨이 적용되기 원하기 때문에

설정 -> 꾸미기 -> 모바일에 들어가 모바일 꾸미기 설정을 해제해주자.

모바일 꾸미기 설정 해제

 

Step 3. 나만의 구독 버튼 설정

<button type="button" class="btn_menu_toolbar btn_subscription #subscribe my_subscribe"
		data-blog-id="본인의 블로그 id" data-url="본인의 블로그 URL" data-device="web_pc">
	<em class="txt_state my_subscribe_text">구독</em>
</button>

이제 위와 같은 코드를 추가함으로써 만들 예정인데,

여기서 우리가 해야할 일은 해당 코드에 있는 "본인의 블로그 id"와 "본인의 블로그 URL"에 본인에게 맞는 값을 넣는 것이다.

 

본인의 블로그 URL의 경우는 간단하다.

말 그대로 본인의 블로그 URL을 넣어주면 된다.

나의 경우에는 아래와 같다.

"https://blog-001.tistory.com"

 

이제 본인의 블로그 id가 문제인데, 이것을 얻기 위해서는 본인이 작성한 게시물 중 하나에 일단 들어가야한다.

그러면 하단에 공감 표시 옆에 아래와 같이 구독하기가 있는 것을 확인할 수 있다.

만약 안 보인다면, 로그아웃을 한 상태로 들어가보자. 나는 시크릿 모드를 통해서 들어갔다.

구독하기 버튼

 

이제 크롬을 기준으로 아래 사진과 같은 곳에 위치해 있는 개발자 도구를 클릭한다.

크롬, 개발자 설정 위치

 

그러면 분할된 창 내부에 코드가 나오는데 여기서 윈도우 기준 ctrl + f, 맥 기준 command + f 를 눌러 검색 기능을 활성화 한 뒤에

"data-blog-id"를 아래 사진과 같이 검색한다.

나의 경우에는 3312942이다.

그리고 해당 부분 옆에 있는 본인의 블로그 id를 복사하여 저장해준다.

data-blog-id 위치

 

이러한 값들을 저장한 형태로 코드를 만들면 다음과 같다.

<button type="button" class="btn_menu_toolbar btn_subscription #subscribe my_subscribe"
		data-blog-id="3312942" data-url="https://blog-001.tistory.com" data-device="web_pc">
	<em class="txt_state my_subscribe_text">구독</em>
</button>

이제 이 코드를 복사해놓자.

 

Step 4. 블로그 스킨에 버튼 추가

설정 -> 꾸미기 -> 스킨 편집에 들어가서 오른쪽 창에 있는 html 편집을 누르면 다음과 같은 코드들이 나오는데 우리가 복사해둔 코드를 이 곳에 붙여넣기 해주고 적용을 눌러주자.

위치는 반드시 HTML에서 찾아서 넣어야한다!

(몇번째 줄인지는 사용하는 스킨에 따라 다를 수 있으므로 body 태그 바로 아래에 넣도록 하자.)

버튼 코드 위치

 

Step 5. 버튼 위치 조정

저렇게만 넣으면 버튼이 보이지 않거나 본인이 예상하지 않은 위치에 있을 수 있다.

CSS 탭을 눌러 다음과 같은 코드를 맨 밑에 넣어주자.

해당 코드는 오른쪽 하단에 위치하게 만든다.

.my_subscribe {
	position: fixed;
	top: auto;
	left: auto;
	bottom: 20px;
	right: 20px;
	z-index: 50;
	width: 50px;
	height: 50px;
	background-color: white;
	border-style: solid;
	border-radius: 25px;
	border-width: 1px;
	border-color: #cbcbcb;
	box-shadow: 1px 1px 1px #7b7b7b;
}

.my_subscribe:active {
	background-color: #dbdbdb;
	bottom: 18px;
	right: 18px;
}

.my_subscribe_text {
	font-weight: bold;
}

 

아래 사진은 붙여넣은 예시이다.

이렇게하고 적용을 누르면 완성이다.

버튼 코드 꾸미기 위치

 

이렇게하면 아래와 같이 모바일에서도 볼 수 있는 나만의 구독 버튼이 만들어진다!

더 꾸미고 싶거나 이미지를 넣고 싶다면 HTML과 CSS를 더 익혀보는 것을 추천한다!

완성본

 

 

 

잘 안되거나 도움이 필요하신 분은 댓글에 남겨주세요!

감사합니다.