티스토리 반응형 스킨 Whatever에 카테고리 만들기
티스토리에서 제공하는 몇가지의 '반응형 스킨'을 써보고
'Whatever'이 가장 깔끔한거 같아 맘에 들었다.
하지만 최대(?)의 단점이라면 카테고리가 없다.
카테고리를 만드는 방법은 2가지가 있다.
하나는 상단에 만들기, 다른 하나는 아래 사이드바에 만들기
1. Whatever 스킨 하단 사이드바에 카테고리 만들기
티스토리 스킨 가이드 https://tistory.github.io/document-tistory-skin/
폴더 형식의 카테고리와 리스트 형식의 카테고리중 원하는 치환자를 선택해서
<s_sidebar_element>
<!-- 카테고리 -->
<div class="category">
<h3>카테고리</h3>
</div>
<div class="category">
<h3>카테고리</h3>
</div>
</s_sidebar_element>
<!-- 카테고리 -->
<div class="category">
<h3>카테고리</h3>
|
</div>
<div class="category">
<h3>카테고리</h3>
</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_##]
를 붙여 넣는다.
'일상다반사 > 티스토리 & 구글Adsense' 카테고리의 다른 글
| 티스토리 애드센스에 쿠팡파트너스 함께 게재해도 괜찮은가? (쿠팡광고게제) (6) | 2020.06.08 |
|---|---|
| [블로그 광고수입] 검색어 키워드 찾기 (다음 카카오 키워드 광고) (1) | 2020.06.07 |
| [구글애드센스] ads.txt를 사용하여 수입을 보호하세요 해결방법 (0) | 2020.04.15 |
| [구글 애드센스] 수익이 여러차례 변경되는 이유 (헛수, 무효트래픽 방지) (4) | 2020.04.05 |
| 구글 애드센스 ads.txt를 사용하여 수입을 보호하세요 설치방법 (0) | 2020.03.25 |
| [블로그 수익] 방문자수 늘리기 다양한 공유버튼 만들기 (SNS 글보내기) (3) | 2020.03.20 |
| [유튜브 수익창출] 구글 애드센스 광고 넣는 방법 (자격요건) YPP (0) | 2020.03.08 |
| 티스토리 구글광고 자동설정 (애드센스 자동광고 최적화) 광고수입 올리는 방법 (2) | 2020.03.07 |
