안녕하세요 별깡솔입니다 : )
별깡솔 블로그를 방문하신 모든 분들 진심으로 감사드립니다
티스토리 구독 버튼 생성하기 그리고 제어하는 방법에 대해 알아보겠습니다
티스토리 구독 버튼이란?
페이스북, 인스타그램 팔로우 그리고 네이버 블로그 이웃 추가와 같은 기능입니다
티스토리에서 나를 구독해 주는 분들이 있어서 어떤 이점이 있는지는 자세히는 모릅니다
구독해 준 사람들에게 더 쉽게 노출되어 접근성이 좋아진다는 것 아닐까요?
피드에서 내가 구독한 블로그에서 90일 간 발행한 글을 볼 수 있으며
'내가 구독'한 블로그와 '나를 구독'한 블로그를 확인할 수 있습니다
(피드 공간, 구독 기능은 티스토리 회원만 사용할 수 있습니다)
자세한 설명은 티스토리 공식 블로그에서 확인하세요
티스토리 구독 버튼 생성하기
티스토리 관리 페이지로 접속합니다
https://블로그 주소.tistory.com/manage
꾸미기 탭 아래 메뉴바/구독 설정으로 이동합니다
구독 버튼 설정 탭 아래에 구독 버튼을 '표시합니다'로 바꾸어줍니다
구독 버튼은 '오른쪽 상단'으로 바꾸어줍니다
오른쪽 상단 외에 오른쪽 하단, 오른쪽 가운데, 왼쪽 하단이 있습니다
마음에 드는 곳에 위치시키면 됩니다.
다만 구독 버튼 제어하기 부분에서 오른쪽 상단 기준으로 설명합니다
메뉴바 설정?
메뉴바를 클릭하면 본인이 운영 중인 블로그 목록
티스토리 홈, 피드 바로가기 그리고 로그인 & 로그아웃 기능이 있습니다
구독 버튼을 제어하려면 메뉴바가 있어야 편합니다
로그인 아웃 상태를 쉽게 확인할 수 있습니다
그리고 role : owner = 블로그 주인은 구독 버튼이 보이지 않습니다
반응형 스킨을 이용 중인 분들은 창 크기가 작으면 보이지 않을 수 있습니다
구독 버튼이 생성된 것을 확인하기 위해 로그아웃을 진행합니다
구독 버튼이 잘 작동하는지 확인하려면 티스토리 계정이 하나 더 필요합니다
구독 버튼을 테스트하기 위해 필요합니다
블로그 주인은 구독 버튼이 안 보이기 때문에 부계정으로 접속합니다
그리고 구독하기 버튼을 클릭합니다
구독 버튼이 작동하는 것을 확인할 수 있습니다
구독 버튼에 하트 넣기
구독하기 에서 구독 버튼을 누르면 구독중 으로 변하게 만듭니다
구독 중인 분들에게 제 마음을 보여주고 싶습니다
css만 수정하여 하트를 만들어 넣고 클릭하면 변하게 합시다
소스 코드를 수정하기 전에 백업을 하는 것을 추천합니다
소스 코드 백업은 좋은 습관입니다
꾸미기 탭 - 스킨 변경 - 사용 중인 스킨 다운로드 클릭
자 이제 꾸미기 탭에서 스킨 편집을 클릭합니다
html 편집을 클릭합니다
상단 탭에서 css를 클릭합니다
스크롤을 제일 아래로 옮기고 빈 공간에 아래 코드를 붙여 넣습니다
.menu_toolbar .btn_menu_toolbar .txt_state:after {
content: '\ea11';
font-family: xeicon !important;
color: red;
}
.menu_toolbar .btn_menu_toolbar.following .txt_state:after {content: '\ea10';}
.menu_toolbar .img_common_tistory.ico_check_type1 {display: none !important;}css를 붙여 넣고 적용 버튼을 클릭합니다
확인하기 위해 다시 부계정으로 로그인 후 구독 버튼을 확인합니다
구독 버튼 조금 더 보이게 하기
위에 반응형 스킨을 이용 중인 사람 중에서 창 크기가 작으면 안 보일 수 있다고 했었습니다
보여지는 스크린 사이즈에 따라 구독 버튼이 사라지게 되어있습니다
모바일 사용자가 더 많다고 판단한 것 같습니다
사라지는 걸 확인하기 위해 창 크기를 줄여보겠습니다
현재 스크린의 크기가 1274px 입니다
스크린 크기가 작기 때문에 구독 버튼이 검색창을 조금 침범하였습니다
창 크기를 줄여보겠습니다
스크린 크기가 1260px 이하로 작아지면 구독 버튼이 사라집니다
css 수정했던 부분으로 아래의 소스로 넣습니다
@media only screen and (max-width:1260px){
.menu_toolbar{display: block !important;}
}
@media only screen and (max-width:768px){
.menu_toolbar{display: none !important;}
}
.menu_toolbar .btn_menu_toolbar .txt_state:after {
content: '\ea11';
font-family: xeicon !important;
color: red; }
.menu_toolbar .btn_menu_toolbar.following .txt_state:after {content: '\ea10';}
.menu_toolbar .img_common_tistory.ico_check_type1 {display: none !important;}새로 고침(F5) 후 스크린 크기를 넓혔다가 줄였다 하면서 구독 버튼을 확인합니다
스크린 크기가 768px 까지 구독 버튼이 보이게 만들었습니다
모바일 기기 제외한 화면에서 구독 버튼이 보이게 했습니다
어떤 분들은 티스토리임을 감추기 위해 구독 버튼을 만들지 않는다 합니다
사람마다 취향이 다릅니다. 취향은 존중해야 합니다
좋아요 공감 버튼과 구독 버튼 한 번씩 눌러주시면 감사합니다
두 번 누르면 찾아갑니다 한 번만 누르면 됩니다
다음 포스팅은 구독 버튼이 간섭받고 있는 검색창을 손보겠습니다
사실 모양도 맘에 안 들고 자리도 많이 차지하고 있어서, 다른 스킨 중에서 이쁜 디자인으로 교체합시다
구독과 좋아요 공감 버튼은 무료입니다
별깡솔 블로그를 방문하신 모든 분들 다시 한번 진심으로 감사합니다
내일도 꼭 다시 만나요 : )
다음 글 예고 - 티스토리 검색창 꾸미기
추가사항
사용중인 Odyssey 스킨은 XEIcon CDN이 들어있어서 다른 스킨들도 있겠다고 생각하고 빠뜨린 부분이 있어서 내용을 추가합니다
html 편집에서 <head> 와 <head> 사이에 코드 한줄을 삽입해야 정상적으로 하트가 출력됩니다
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">
다음 포스팅부터는 더 꼼꼼하게 하겠습니다
'Tistory > Tistory Skin Edit' 카테고리의 다른 글
| 사이드 카테고리 꾸미기 (0) | 2020.10.11 |
|---|---|
| 헤더 영역 로고 & 카테고리 메뉴바 꾸미기 헤더 영역 (0) | 2020.10.08 |
| 홈 설정 포스터 타입 커버 꾸미기 (0) | 2020.10.04 |
| 사이드바 꾸미기 1. 프로필 영역 꾸미기 (0) | 2020.10.03 |
| 티스토리 검색창 꾸미기 (0) | 2020.09.29 |