티스토리 구독버튼 만들기 (셀프 제작기)

  티스토리는 왜 이렇게 구독버튼을 작게만드는지 도저히 이해를 못하겠다 싶어서 내친김에 구독버튼을 큼직하게 달았습니다. 각 글의 하단, 댓글란 위에다가 번쩍번쩍(?)하게 달아버렸네요. 간단하게 만들었기 때문에 구독버튼이 필요하신 분들도 한번 도전해보시면 좋을 것 같아 공유드립니다.

정신사나운 구독버튼

  먼저 현재 적용된 html 코드는 아래와 같습니다.

<center>  //가운데 정렬
 <button class="btn_menu_toolbar btn_subscription #subscribe" data-blog-id="블로그ID" data-url="블로그주소" data-device="web_pc"> // PC에만 나오는 블로그 ID와 블로그 주소
  <img src="./images/sub_button.gif"><br> // 제작한 이미지 업로드된 주소
   <b> 스마트스토어 운영과 블로그에 관심있다면<br>
   구독을 눌러 관심을 주세요 : p </b> // 뻘소리
 </button>
</center>

구독버튼 html 태그 찾기

  티스토리 블로그 화면에서 마우스 오른쪽 버튼에 "페이지 소스보기"를 클릭해 구독버튼의 소스를 찾았습니다. :) 페이지 소스에서 "#subscribe"를 검색하시면, 현재 티스토리에 적용되어있는 구독하기 버튼의 소스코드가 나옵니다. 여기서 약간의 변형을 가미한 코드가 위에 기재한 태그에요. 여기서 숫자로 된 "블로그 ID"와 "블로그 주소"가 기재된 부분을 카피하고 나머지 태그를 작성했습니다.

  그저 글씨로만 "구독하기"로 나와있어서 안되겠다 싶어, 급하게 파워포인트와 gif 만드는 사이트를 이용해 움직이는 구독버튼을 만들었습니다. (누추한 버튼이 필요하시다면 따로 말씀해주세요.)

 

파워포인트로 이미지 대충 만들기

도형 2개와 텍스트로 만든 구독버튼 원본

  파워포인트에서 그저 버튼을 끄적끄적 2개 만들어서 윈도우 내의 캡처도구를 실행해 png 파일로 2개 제작했습니다. png파일은 위에 보시다시피...매우 허접하게 만들었습니다. 그래도 붙여놓고 gif로 만들면 움직이긴 하니까 눈에띄고 괜찮을 것이라 믿고 제작했습니다.

 

gif 제작 : https://ezgif.com/

  사진파일의 쉬운 gif 제작은 ezgif에서 가능합니다. 아래 링크를 클릭하시면, gif 제작 사이트로 이동하실 수 있어요!

• EZGIF.COM (링크)

ezgif 접속 후, GIF Maker로 들어가 GIF 제작에 들어갑니다.

  위 사이트에 접속하시면 여러 메뉴가 있습니다. 그 중에서 단순히 gif 파일만 만들기 위해 gif maker로 진입합니다.

gif maker 클릭 후, gif로 만들 이미지를 선택해 업로드합니다.

  gif maker는 gif는 물론 각종 그림파일을 2000개 까지 업로드 가능합니다. 웹상에서 변환하는 프로그램 치고는 꽤 괜찮은 것 같아요. 여기서 타임랩스도 만들 수 있겠네요. 아무튼, 파일을 선택한 뒤 하단에 "Upload and make a GIF!" 버튼을 누릅니다. 

 

gif 제작 세팅(그냥 하단에 make a gif 눌러도 무관합니다.

  업로드한 2장의 사진을 확인하고, 별다른 생각없이 make a gif를 눌러도 괜찮습니다. delay를 수정해 각각의 시간을 변경할 수 있으니 다른 방법으로 만들고자 하는 분들은 참고하세요. 최종적으로 아래와 같은 버튼이 만들어졌습니다.

 

구독버튼(?)

티스토리 이미지 파일 업로드 및 태그 수정

  만들어진 버튼 gif를 저장하고, 티스토리>관리>스킨편집>html편집>파일업로드에 해당 이미지를 업로드 합니다. 이렇게 업로드 된 gif 파일의 주소는 "./images/파일명.gif"로 저장됩니다. 앞서 올린 태그를 다시한번 살펴봅시다.

 

<center>  //가운데 정렬
 <button class="btn_menu_toolbar btn_subscription #subscribe" data-blog-id="블로그ID" data-url="블로그주소" data-device="web_pc"> // PC에만 나오는 블로그 ID와 블로그 주소
  <img src="./images/sub_button.gif"><br> // 제작한 이미지 업로드된 주소
   <b> 스마트스토어 운영과 블로그에 관심있다면<br>
   구독을 눌러 관심을 주세요 : p </b> // 뻘소리
 </button>
</center>

 

  구독버튼 설정 바로 뒤에 이미지 태그를 붙이고, 여기에 우리가 업로드한 gif의 주소를 입력하면 마무리 할 수 있습니다. 단 구독버튼의 위치는 마음대로 설정하셔도 좋을 것 같아요. 저는 추가적인 설명을 위해 글을 작성한 뒤 구독버튼을 마무리 지었습니다.

 

구독버튼 제작 후기

  제품 사입때문에 업체와 입씨름이 오가고 있는데...귀찮은 생각도 들고 짜증도 나고 하다가 문득 구독버튼이나 만들어야겠다는 생각에 후다닥 만든 버튼입니다. 퀄리티는...보장 못할만큼의 후진 버튼이지만 그래도 눈에 잘 띄고 사람들이 볼만하다 싶으면...전 그걸로 만족하겠어요.