티스토리 구독 버튼 만들기/구독 버튼 설정하기 (까누의 메모습관 참조)

안녕하세요. 오랜만에 글을 올려요. 다들 설은 잘 보내고 계시죠? 이직을 하고서 점점 일이 많아지다보니 블로그 관리하는 것도 쉽지 않아지네요. 그래도 포기하지 않고 있습니다. 

 

그래도 이웃 분들의 올라오는 글 중에 도움에 되는 글들은 조금씩 수집하여 오늘 같은 휴일에 적용해보는 연습을 하고 있습니다. 블로그 스킨도 새로 적용을 해보았고요. 그 중에서도 우선적으로 가장 하고 싶은 것은 구독 버튼 만들기입니다. 

 

사실 제 블로그 뿐만이 아니라 다른 분들 블로그를 가도 내용이 좋아 구독하기를 누르려면 안보이는 경우가 많아요. 그러던 중 이웃 분 중 한 분이신 까누님께서 구독버튼 만드는 방법에 대해서 포스팅을 해주셨습니다. 저는 여기에 제가 직접 해보면서 부딪혔던 어려운 부분들을 추가해서 보여드리려고 해요. 

 

https://191030.tistory.com/m/entry/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-%EA%B5%AC%EB%8F%85%EB%B2%84%ED%8A%BC-%EC%B7%A8%ED%96%A5%EB%8C%80%EB%A1%9C-%EB%A7%8C%EB%93%A4%EA%B8%B0-%E3%85%8B%E3%85%8B%E3%85%8B

티스토리 구독버튼 취향대로 만들기 (ㅋㅋㅋ)

우선 원작자이신 까누님의 포스팅도 참고해서 넣어드리도록 하겠습니다. 해보고 나면 정말 쉬운데 막상하기 전까지는 여러가지 손이 가더라고요. 

 

 

우선은 설정 메뉴로 가셔서 메뉴바/구독설정으로 가셔서 구독 설정을 해주셔야 합니다.

 

 

여기서 구독버튼 설정에 구독버튼을 표시합니다로 하시고 위치는 구독자 분들이 원하시는 곳으로 설정을 해주시면 됩니다. 저는 멍청하게 이것도 안되어 있었습니다...ㅎㅎ 

 

 

화면이 커서 잘 이미지가 잘 안나오는데 구독 버튼을 활성화하면 저렇게 이미지처럼 구독버튼이 활성화가 됩니다. 

 

버튼을 되고 우클릭을 하면 소스보기 또는 요소 검사라는 메뉴가 뜹니다. 이게 안뜨시는 분들은 인터넷 우클릭 제한이 걸려 있으신 거에요. 저도 우클릭이 안되서 검색을 해보니 방법은 여러가지가 있지만 가장 간단하고 쉬운 방법은 알툴즈를 설치하는 것이었습니다. 

 

알툴바를 설치하시면 인터넷 브라우저 상단에 메뉴가 뜹니다. 이 메뉴에서 캡쳐 > 마우스 우클릭 제한 해제를 누르시면 구독 버튼의 소스보기 또는 요소검사가 보여집니다. 크롬은 우클릭 제한 해제 방식이 조금 다릅니다. 크롬은 따로 검색을 통해서 우클릭 제한 해제를 확인해보셔야합니다.

 

 

화면이 넓어서 잘 보이지도 않네요. 잘 모르는 내용이 나왔다고 해서 두려워하시지 않으셔도 됩니다. 조용히 ctrl+f 를 누르시고 button이라는 단어를 넣어서 아래 문구가 시작되는 코드를 찾으시면 됩니다. 

 

<button class="btn_menu_toolbar...이하 중략> 해당 소스를 통으로 긁으셔서 복사하시고 메모판에 넣어놓습니다. 여기서 중요한 것은 본인의 ID 코드를 정확히 아셔야 합니다. 

 

 

여기까지 하셨다면 구독버튼으로 쓰일 이미지를 만드셔야해요. 만드신 이미지는 다시 설정에서 서식관리 > 서식쓰기를 누르시고 블로그 작성하는 것과 동일하게 이미지를 올리시면 됩니다.

 

 

작성하신 서식을 클릭하시고 들어가신 다음 본인이 올리신 이미지를 우클릭해주세요. 그러면 이미지 주소 복사라는 메뉴가 뜹니다. 해당 버튼을 누르시고 다시 메모장에 가셔서 붙여넣기를 해주시면 이미지에 대한 주소가 나오게 됩니다. 

 

그럼 이렇게 해서 구독 버튼을 만드는데 필요한 ID / 홈페이지 주소 / 이미지 주소 3가지가 갖추어졌습니다. 

 

상기 소스 코드에 본인 블로그에 해당되는 ID와 블로그 주소, 이미지 주소를 넣고서 글을 작성하실 때 HTML 모드로 들어가셔서 코드만 붙여넣으시면 구독하기 버튼 설정 끝~! 입니다. 상기 주소 코드는 까누님이 작성하신 원문 글에 가시면 메모장 파일로 까누님이 올려놓으셨습니다. 

 

물론 저는 왕초보 중에 왕초보이기 때문에 같은 어려움을 겪고 계신 분들을 위해서 내용을 하나 더 추가해서 올려드리려고 합니다.  HTML이라는 단어 조차 낯선 저희 같은 왕초보에게는 그림만큼 좋은 것은 없겠죠? 

 

 

HTML 모드는 본인이 글을 쓰실 때 우측 상단에 있는 기본 모드를 클릭을 합니다. 그럼 그 하단에 HTML이라는 메뉴가 뜨는데 이 부분을 클릭하십니다. 

 

 

전혀 낯선 이미지가 나오시죠? 그리고 위에서 보이는 "여기 있어요" 라는 글이 여기에도 있습니다. 이 글을 쓴 이유는 구독 버튼이 들어갈 위치를 알기 위해서죠. 

 

 

여기 있어요 밑에 구독자분들이 작성하신 소스코드를 집어 넣습니다. 그리고 완료를 누르시면 

 

 

상기와 같이 블로그 하단에 구독 버튼이 생성되는 것을 보실 수 있습니다. 일반적인 설정으로 하셔도 상관은 없겠지만 그래도 이렇게 블로그 버튼 하나 있으면 사람들 이목 끌기도 쉽고 좋잖아요. 

 

아..하고 나면 정말 간단한 작업인데 이거를 초보자에 맞게 풀고 풀고 또 풀려니까 굉장히 힘드네요. 포스팅하는데만 거의 1시간은 소요가 된 것 같습니다. 좋은 정보 알려주신 까누님께 감사드리고, 제작 관련 안되는 부분 있으시면 댓글 부탁드려요. 고생한 것만큼 해당 콘텐츠가 많이 유익했으면 합니다.