티스토리 스킨 편집 - 글 마지막 구독하기 버튼 추가

목차

일일이 하는 구독하기 버튼추가 "서식" 가져오기

이것이 싫다!

나는 전체 글 목록에 제일 아래 구독하기 버튼을 추가하고 싶다!

방법이 무엇일까?

 

안녕하세요.

구독하기 버튼을 만들고 활성화 하다가 

 

다음에 구독하기 버튼을 변경하고 싶으면, 어떻게 하지?

란 질문이 떠올랐습니다.

 

그렇죠.

"구독하기" 버튼이라는것은

나중에 없앨 수도 있습니다.

하지만 매번 글에 들어가서 마지막에 "구독하기" 버턴을 추가하고 삭제한다는건 너무한 일이에요.

 

나중이 되면 글이 1000개가 될텐데?

>>>> ㅋㅋ 물론 저는 1000개까지 써본적은 없습니다.

이전 블로그도 500개가 한계였으니까요.

 

언제 방문자 2천명을 다시 만들까요..ㅠㅠ

아무튼 본론으로 돌아와서 전체 스킨에 "구독하기" 버턴을 추가하는 방법을 찾아봤습니다.

 

전체 스킨 분석 및 구독하기 버튼

일단 전체 스킨중 어느 <> 태그 표시가 공감 바로 위에 있는지 확인해야 겠죠.

그 위아래로 "공감" 버튼과 " 구독하기" 버튼을 자동으로 넣어주는

방법을 소개하려 합니다.

 

일단 이미지를 만드는것은 "픽슬러" 온라인 포토샵을 이용했어요.

온라인 포토샵 가이드는 워낙 많아서 굳이 설명하지 않도록 하겠습니다.

 

스킨편집

[티스토리 관리] - [스킨편집] - [파일업로드] 로 가신 후 

images/ 폴더안에 gif 혹은 png 파일을 업로드 합니다.

 

업로드 이유 : 곧 HTML 페이지에서 해당 이미지를 사용할건데,

이왕이면 GIF가 좋을거고, 저는 png의 움짤버전 apng 로 변환후 진행했습니다.

 

 

 

 

티스토리 구독하기 버튼 추가하기

구독하기 버튼은

글 마지막마다 작성해주셔도 괜찮지만,

저는 모든글에 적용하고 싶었어요.

 

그러기 때문에 html 티스토리 편집 글 마지막부분에 자동으로 넣어주도록 합니다.

 

티스토리 글 스킨 전체 구독버튼 생성

해당 구문을 설명드리면,

간단하게 가운데 정렬로 (center)

버튼을 생성합니다. (button)

그리고 css를 이용한 부분이긴 하지만 저희는 data-blog-id 라는 key와, data-url만 알고있으면 됩니다.

그리고 img src부분에 링크 

그렇게 총 3개을 알아보는 방법을 소개합니다.

 

1. data-blog-id, data-url

    : 크롬브라우저, 혹은 다른브라우저의 개발자모드에 진입합니다 (F12)

    : Source 부분에서 마우스부분을 클릭하여 구독하기 버튼(기존에 있는 구독버튼)을 클릭하면 해당 소스가 나옵니다.

   

티스토리 구독하기 버튼

    : 개발자모드에서 마우스를 갔다 대면, 그에 해당하는 소스로 이동합니다.

    : button class에서 data-blog-id와, data-url 을 가져옵니다.

data-blog-id, data-url

 

2. img src 부분의 링크는

    : 앞서 업로드한 곳 [티스토리] - [티스토리 관리] - [스킨편집] - [파일업로드] 에가서 오른쪽 마우스를 클릭하여

    : 업로드한 이미지 링크를 가져옵니다.

   

이미지 링크 주소 복사

이로서 필요한 소스는 준비되었습니다.

<center>
  <button class="btn_menu_toolbar btn_subscription  #subscribe" data-blog-id="4105596" data-url="https://st-soul.tistory.com" data-device="web_pc"> 
  <img src="https://tistory4.daumcdn.net/tistory/4105596/skin/images/Soul_subscribe_gif.png" alt="">
  </button>
</center>

이 소스가 제일 첨에 설명했던 HTML 구문 "article_rep_desc" 태그 뒤에 넣으면 된다는 사실!

제 스킨에서는 "article_rep_desc"가 두개있는데 뒤에있는 "article_rep_desc" 태그에 넣어야 적용되었습니다.

 

마무리

솔직히 제가 옛날에 하던 "구독하기"는 티스토리 순기능만 사용했었습니다.

왜냐하면, 굳이 이렇게 안해도 구독자가 많았었기 때문에..

 

지금 다시 재건하려면

갈길이 머네요..

 

생각보다 많은 분들이 블로그를 하고 있어서

놀랐습니다 ^^

 

 

관련글

1.URL

2020/08/16 - [일상/소소한이야기] - (두번째인사) "구독" & "공감" 은 저에게 힘이됩니다 ^^

 

 

내용이 도움이 되셨거나 초보 블로거를 응원하고 싶으신 분은 아래 하트 ♥공감 버튼을 꾹 눌러주세요!

내용의 수정이 있거나 도움이 필요하신 분은 댓글을 남겨주세요!