티스토리 글쓰기, 관리하기 버튼 추가하기 [hELLO 스킨] (사이드바, 하단 플로팅버튼) - Tistory 블로그 꾸미기

---

Tistory 블로그 꾸미기

[hELLO 스킨] 티스토리 글쓰기 버튼 추가하기 (사이드바, 하단 플로팅버튼)

---

채야미님의 블로그를 참조하여 하단 플로팅버튼을 추가하여 작성한 글 입니다.

https://chaeyami.tistory.com/213

hELLO 티스토리 스킨을 기반으로 작성된 글 입니다.

https://pronist.tistory.com/5#FAQ-1

---

서론

티스토리 블로그를 들어가보면 글쓰기 버튼이나 관리하기 버튼 등 본인의 블로그를 들어갔을 때 관리하는 버튼이 없습니다.

현재 사용중인 hELLO스킨 역시  글쓰기나 관리 버튼이 따로 보이지않아서 해당 버튼을 추가하는 방법에 대하여 간단히 적어봅니다.

 

티스토리 HTML 편집 페이지 진입

블로그 관리 → 꾸미기 → 스킨 편집 → HTML 편집

 

 

SNB 좌측 프로필 메뉴에 글쓰기버튼 추가

hELLO 스킨 기준 SNB영역은 s_sidebar_element 태그를 검색하면 바로 나오게끔 되어있는데 

해당 태그를 포함하여 원하는 위치에 붙여넣으면 됩니다.

 

HTML

 
<s_sidebar_element><!-- 글쓰기 버튼-->
    <div class="menu-wrap" style="display:none;">
      <a href="https://gaetaeng.tistory.com/manage/post"  target='_blank'>글쓰기</a>
      <a href="https://gaetaeng.tistory.com/manage"  target='_blank'>관리</a>
    </div>
  </s_sidebar_element>

///이건 아이콘버젼
<s_sidebar_element><!-- 글쓰기 버튼-->
    <div class="menu-wrap" style="display:none;">
      <a href="https://gaetaeng.tistory.com/manage/post" class="img_common_tistory link_edit" target='_blank'>글쓰기</a>
      <a href="https://gaetaeng.tistory.com/manage" class="img_common_tistory link_setting" target='_blank'>관리</a>
    </div>
  </s_sidebar_element>

 

CSS

/* 메뉴프로필 */
.menu-wrap {
  width: var(--h-s);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.menu-wrap a {
  --tw-text-opacity: 1;
  color: rgb(53 54 56 / var(--tw-text-opacity));
  display: flex;
  width: calc(var(--h-s) / 2);
  justify-content: center;
}
.dark .menu-wrap a {
  --tw-text-opacity: 1;
  color: rgb(244 244 246 / var(--tw-text-opacity));
  
}
.menu-wrap .link_edit {
  width : 13px;
  height : 14px;
  background-position: -70px 0;
}
.menu-wrap .link_setting {
  width : 14px;
  height : 14px;
  background-position: -70px -20px;
}

 

관리자권한 설정

(채야미님 블로그 인용) https://chaeyami.tistory.com/213

글쓰고 관리하는 기능이 일반 사용자들에게는 보여줄 필요가 없으니 관련 스크립트를 </head> 윗부분 또는 </body>바로 윗부분에 추가해준다.

<!-- https://chaeyami.tistory.com/213#%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%20%EC%BD%94%EB%93%9C%20-%20%EA%B4%80%EB%A6%AC%EC%9E%90%EC%9D%BC%20%EB%95%8C%20%EB%B3%B4%EC%9D%B4%EA%B8%B0-1 -->
<script>
    $(window).on('load', function () {
        const nowurl = window.location.origin;
        const manageElement = $('.menu-wrap');
        const myBlogurl = window.T.config.USER.homepage;
 
        if (myBlogurl === nowurl) {
            manageElement.css('display', 'flex');
        } else {
            manageElement.css('display', 'none');
        }
    });
</script>

 

사이드메뉴 글쓰기/관리하기 추가 완료

 

---

하단 플로팅버튼 추가

좌측 프로필메뉴(SNB)와 동일하게 id="bottom" 태그를 검색해서 내려가보면

wrap flex gap-x-2.5 클래스 하단에  다크모드를 전환시켜주는 "테마"와 최상단으로 이동시켜주는 "상단으로" 가 보일겁니다.

여기에 순서에 맞춰 추가를 해줄건데, 아이콘 클래스명을 확인해보면

 

아래 페이지의 아이콘을 참조했음을 알수있었습니다.

https://fontawesome.com/search

Font Awesome

 

아이콘 선택

원하는 글쓰기 관련 아이콘을 선택하고 (저는 "fa-pen-to-square" 로 선택)

 

HTML

위 wrap flex gap-x-2.5 영역에 아래 코드를 추가한다면

<a class="top btn" href="https://gaetaeng.tistory.com/manage/post"><span class="txt">글쓰기</span><i class="ico fa-solid fa-pen-to-square"></i></a>

 

플로팅버튼 추가 완료!

우측 하단을 보시면 정상적으로 반영되었음을 확인하실 수 있습니다.