티스토리 스킨 hELLO, 구독버튼 관련 불편사항 수정하기

728x90

티스토리 스킨 hELLO, 구독버튼 관련 불편사항 수정하기

안녕하세요. 현재 사용중인 정상우님이 만드신 hELLO 스킨을 조금 수정해 보려고 합니다.

이유는 구독버튼 때문인데요,

다들 티스토리를 방문했을때 포스팅이 맘에들거나, 지속적으로 방문하고 싶으시면 구독버튼을 누르실겁니다.

hELLO 스킨도 구독버튼을 상단에 별모양으로 표시하고 있습니다.

그런데 텍스트가 없으니 헤메시는 분들도 많으시고,

또 문제가.. 별모양을 눌러서 구독을 하더라도 내가 구독했는지 알수가 없다는게 문제예요..

hELLO 스킨을 적용했을때 부터 방문하시는 분들이 구독버튼 자체가 어디있는지 모르겠다 또는 구독이 된건지 모르겠다 등의 얘기가 계속 나왔었는데 시간이 없다는 핑계로 하루..이틀.. 미루다가 안되겠다 싶어서 이제 개선해보려고 합니다

불편사항 처리

구독버튼이 어디있는지 모르겠다.

먼저 블로그 설정페이지로 가서, 메뉴바설정 > 구독버튼설정에, 구독버튼을 [표시합니다.] 로 설정하고 구독버튼은 [오른쪽 상단]에 위치합니다. 로 변경하고 저장해줍니다.

이제 구독버튼을 확실하게 알수 있도록 별 옆에 '구독중' 또는 '구독하기' 라고 보여줄껀데요, 그러기 위해서 버튼을 좀 늘리겠습니다.
스킨 편집 페이지로 들어가서, CSS Editor로 이동해줍니다.

그리고 맨 끝으로 내린다음에, 다음과 같이 css를 추가해주고, 저장 > 새로고침을 해봅니다.

.btn_menu_toolbar.btn_subscription {
  border-radius: 20px;
  width: 100px;
}

.btn_menu_toolbar.btn_subscription::before {
  float: left;
  padding: 0 10px 0 10px;
}

.btn_subscription.txt_state {
  font-size: 0.8rem;
  display: block;
  font-style: inherit;
  margin: 0;
  width: auto;
  font-weight: bold;
  padding: 0 10px 0 10px;
  text-align: center;
}

그럼 상단에 구독버튼이 가로로 쭉 늘어난 걸 확인할 수 있습니다.

이제 Html Editor로 이동합니다.

Ctrl + F를 눌러 subscription 문구를 찾아줍니다.
subscription 버튼을 찾은 다음 부모 div를 주석처리 후, ex-subscription div 엘리먼트를 아래와 같이 만들줍니다.

<!--
<div>
   <button class="subscription flex justify-center items-center w-10 h-10 outline-0 rounded-full bg-h-600 text-h-200 hover:bg-h-500 btn_menu_toolbar btn_subscription #subscribe" :data-blog-id="T.config.BLOG.id" :data-url="TistoryBlog.tistoryUrl">
      <i class="fa-solid fa-star font-bold text-sm"></i>
   </button>
</div>
-->

<div id="ex-subscription">
    <i class="fa-solid fa-star font-bold text-sm"></i>
</div>

이제 저장 > 새로고침을 하면 아래와 같이 동그라미가 사라진 별모양만 남습니다.

자 다시 Html editor로 가서, 스크립트를 추가해줍니다.
아래 스크립트는 document아래 모든 DOM이 로딩이 끝나면 #ex-subscription div 엘리먼트를 시스템에서 제공해주는 구독버튼 엘리먼트로 repalce 하고 어색하지않도록 스타일을 적용하는 스크립트입니다.

document.addEventListener('DOMContentLoaded', function() {
  // .txt_tool_id 클래스를 가진 요소 찾기
  const txtToolId = document.querySelector('.txt_tool_id');

  // .txt_tool_id 클래스를 가진 요소를 <i> 요소로 교체
  if (txtToolId) {
    const starIcon = document.createElement('i');
    starIcon.classList.add('fa-solid', 'fa-star', 'font-bold', 'text-sm');
    starIcon.style.padding = '0 5px 0 0';
    txtToolId.parentNode.replaceChild(starIcon, txtToolId);
  }

  // #ex-subscription ID를 가진 요소 찾기
  const exSubscription = document.querySelector('#ex-subscription');

  // .btn_menu_toolbar.btn_subscription 클래스를 가진 요소 찾기
  const btnSubscription = document.querySelector('.btn_menu_toolbar.btn_subscription');

  // #ex-subscription ID를 가진 요소를 .btn_menu_toolbar.btn_subscription 클래스를 가진 요소로 교체
  if (exSubscription && btnSubscription) {
    exSubscription.parentNode.replaceChild(btnSubscription, exSubscription);
    // .btn_menu_toolbar.btn_subscription 클래스를 가진 요소의 class 속성에 추가적인 클래스 설정
    
    // .btn_menu_toolbar.btn_subscription 클래스를 가진 요소의 display 속성을 block으로 변경
    btnSubscription.style.display = 'flex';
    btnSubscription.classList.add('subscription', 'flex', 'justify-center', 'items-center', 'w-10', 'h-10', 'outline-0', 'rounded-full', 'bg-h-600', 'text-h-200');
  }


  // .txt_state 클래스를 가진 요소의 폰트 크기를 0.875rem으로 변경
  const txtState = btnSubscription.querySelector('.txt_state');
  if (txtState) {
    txtState.style.fontSize = '0.875rem';
    txtState.style.fontStyle = 'normal';
  }
});

확인

구독여부를 알수 있도록 텍스트가 제대로 나온다.

728x90

저작자표시 변경금지

티스토리 스킨 hELLO, 구독버튼 관련 불편사항 수정하기

불편사항 처리

구독버튼이 어디있는지 모르겠다.

확인

티스토리툴바