배너 이미지 활용하여 티스토리 본문에 구독 버튼 넣기.

여러분은 구독유도를 위해 어떤방법을 사용하시나요?

자신의 사이트에 방문자를 재유입 시키기 위해서 블로거나 유튜브들은 새로운 콘텐츠가 올라가면 사용자에게 좀 더 효과적으로 노출이 될 수 있게 구독을 많이 요청하고 있습니다.

유튜브에도 있고, 네이버에서는 이웃 추가라는 일종의 구독 같은 개념이 있습니다. 티스토리 블로그 또한 구독하기 서비스가 있지만, 티스토리 구독 버튼은 눈에 잘 안 띄는 거 같아 본문에 이미지를 활용하여 구독 버튼이나 배너를 활용하여 좀 더 쉽게 구독할 수 있도록 해보겠습니다.

아래 이미지는 미리캔버스에서 기존 템플릿을 활용하여 텍스트만 변경하여 손쉽게 배너로 만든 이미지입니다. 아래 이미지를 클릭하면 구독이 되도록 설정하는 방법과 티스토리 본문 내 서식을 활용하여 삽입하는 방법에 대해 알아보겠습니다.

구독 버튼

티스토리 구독 버튼 설정하기

자신의 티스토리 블로그에 구독 버튼이 설정되어 있는지 확인하고 설정하는 방법입니다. 먼저, 티스토리 블로그 관리 메뉴에서 좌측 하단에 꾸미기에 메뉴바/구독 설정을 선택합니다.

우측에 구독 버튼 설정에서 구독 버튼을 표시합니다. 를 선택하고 구독 버튼 위치도 원하는 위치로 선택한 후 변경사항 저장합니다.

블로그관리 홈 > 꾸미기 - 메뉴바/구독설정 > 구독버튼 설정 > 저장

구독 버튼을 활성화하면 아래처럼 구독하기 버튼이 생깁니다. 사용하는 스킨에 따라 모양은 다를 수 있습니다. 제가 사용 중인 친효스킨 2.4의 구독 버튼은 좌측처럼 + 모양에 마우스를 가져가면 구독하기라고 표시됩니다.

위 구독 버튼은 티스토리 본인 계정 로그인 상태에서는 보이지 않으니 로그아웃 후 확인해 보거나 시크릿 모드(CTRL + SHIFT + N)로 크롬 브라우저를 열어서 확인할 수 있습니다.

이미지를 활용한 구독 배너, 버튼 만들기

이제 구독 버튼을 활성화했으면, 무료 아이콘이나 직접 제작한 이미지를 활용하여 개성 넘치는 자신의 구독 버튼을 만드는 방법에 대해 알아보겠습니다.

구독 버튼 이미지 주소 얻기

일단 구독 버튼으로 활용할 이미지를 만들었거나 구했다면, 본인의 티스토리 블로그 관리 홈에서 서식 쓰기를 작성하여 이미지를 넣습니다.

제목은 아무거나 써주고, 본문에 이미지를 올린 후 저장하기 전에 이미지 위에 마우스 우클릭합니다. 서브메뉴에서 이미지 주소 복사를 선택합니다. 복사된 이미지 주소는 메모장에 붙여 넣기(CTRL+V) 해서 저장해 놓습니다.

자신의 블로그 ID 확인하기

두 번째로 자신의 블로그 ID를 확인해야 합니다. 블로그ID는 구독 버튼 소스 코드에서 확인할 수 있는데, 로그인 상태에서는 구독 버튼이 비활성화되어 보이지 않으니 로그아웃 하거나 시크릿 모드 창(CTRL+SHIFT+N)으로 브라우저를 열고 본인의 사이트에 접속합니다.

구독 버튼이 보이면 CTRL+U를 눌러 소스 화면으로 전환합니다.

소스 화면에서 CTRL + F를 누르고 검색창에 button class를 검색합니다.

아래처럼 <button class = ~~ </button>까지 구독 버튼 html입니다. 여기에서 data-blog-id="숫자0000" 에 나와있는 숫자가 자신의 블로그 ID입니다. 복사해서 이미지 주소 복사해놓은 메모장에 같이 저장해 놓습니다.

첨부된 TXT 파일을 다운로드해서 메모장으로 열면 아래와 같은 HTML 코드가 있습니다.

구독버튼html.txt

0.00MB

<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="100%," height="auto"> </button> </div>