본문 바로가기

스프링노트/티스토리 & 구글Adsense

티스토리 반응형스킨 Whatever 카테고리 만들기

 

티스토리 반응형 스킨 Whatever에 카테고리 만들기

 

티스토리에서 제공하는 몇가지의 '반응형 스킨'을 써보고

'Whatever'이 가장 깔끔한거 같아 맘에 들었다.

하지만 최대(?)의 단점이라면 카테고리가 없다.

 

카테고리를 만드는 방법은 2가지가 있다.

하나는 상단에 만들기, 다른 하나는 아래 사이드바에 만들기

 

 

1. Whatever 스킨 하단 사이드바에 카테고리 만들기

 

티스토리 스킨 가이드 https://tistory.github.io/document-tistory-skin/

 

폴더 형식의 카테고리와 리스트 형식의 카테고리중 원하는 치환자를 선택해서

 

<s_sidebar_element>
  <!-- 카테고리 -->
  <div class="category">
    <h3>카테고리</h3>
    [##_category_##]
  </div>

  <div class="category">
    <h3>카테고리</h3>
    [##_category_list_##]
  </div>
</s_sidebar_element>

 

블로그 관리 > 스킨편집 > HTML

 

저장

 

 

 

2. Whatever 스킨 상단에 카테고리 만들기

 

상단 메뉴바에 서브 메뉴를 추가하는 방법이다.

 출처 https://wonderbout.tistory.com/39

블로그 관리 > 스킨편집 > CSS 에 코드를 넣어야 한다.  

(적용후 맘에 안들면 삭제할수 도 있으니 가장 하단에 붙여넣기를 추천한다. )

/* whatever_nav
------------------------------------------------ */
#gnb .tt_category li a.link_tit {display: none;}
#gnb ul li {font-size: 0.875rem;padding: 26px 10px;}
#gnb .sub_category_list {display: none; position: absolute; z-index: 999; min-width: 120px; background-color: #ffffff; border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); font-size: .875rem;}
#gnb .category_list li:hover .sub_category_list {display: block;}
#gnb .sub_category_list li {float: none; padding: 0;}
#gnb .sub_category_list a:hover:after {display: none;}
#gnb .sub_category_list li a {text-align: left; padding: 6px 16px; line-height: 18px;}
#gnb > ul {display: inline-block;}
#gnb>ul.tt_category>li {padding: 0; border: 0;}
.layout-float #gnb > ul {display: block;}
.layout-float #gnb ul li {text-align: left; font-size: 1rem; border-bottom: 0;}
.layout-float #gnb .sub_category_list {display: block; position: static; min-width: 100%; margin: 2px 0 13px 15px; border-left: 3px solid #f1f1f1;
  border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: none; font-size: .875rem;}
.layout-float #gnb .sub_category_list li a {padding: 6px 0px 6px 16px;}
.layout-float #gnb ul li a:hover:after {display: none;}
.color-dark #gnb .sub_category_list {background-color: #141414;box-shadow: 0px 8px 16px 0px rgba(255, 255, 255, 0.2);}
.layout-float.color-dark #gnb .sub_category_list {box-shadow:none;}
@media screen and (max-width: 928px) {
  #gnb>ul {display: block;}
  #gnb {overflow-y: auto; height: 100%;}
  #gnb ul {overflow: hidden; height: auto;}
  #gnb ul li {padding: 0; border-top: 0;}
  #gnb ul li a{padding: 8px 30px 8px;}
  #gnb .sub_category_list {display: block; position: static; min-width: 100%; margin: 2px 0 13px 40px; border-left: 3px solid #f1f1f1; border-bottom-left-radius: 0;
    border-bottom-right-radius: 0; box-shadow: none; font-size: .875rem;}
  .color-dark #gnb .sub_category_list {box-shadow: none;}
}
@media screen and (max-width: 767px) {
  .layout-float #gnb ul li {border-top: 0;}
  .layout-float #gnb .sub_category_list {margin: 2px 0 13px 45px;}
  .layout-float #gnb ul li a {padding: 8px 30px 8px;}
}

 

 

 

그리고 다시 블로그 관리 > 스킨편집 > HTML 로와서 

 

 

[##]_blog_menu_##] 자리에

 [##]_category_list_##]

를 붙여 넣는다.