[티스토리]Poster 스킨 꾸미기 3 - 사이드 바(햄버거 안)에 인기글/최신글 넣기

티스토리 블로그 꾸미기 카테고리

https://korearaogong.tistory.com/category/%EB%B8%94%EB%A1%9C%EA%B7%B8%20%ED%8C%81/%EB%B8%94%EB%A1%9C%EA%B7%B8%20%EA%BE%B8%EB%AF%B8%EA%B8%B0

'블로그 팁/블로그 꾸미기' 카테고리의 글 목록

Poster 스킨의 사이드바

Poster 스킨은 단순하고 깔끔하게 블로그를 사용할 수 있다는 장점이 있지만 그만큼 기능들이 너무나도 적습니다

Poster 스킨은 사이드 바가 존재하지 않고 햄버거를 눌렀을때 사이드바 처럼 생긴게 나오면서 본문에 덮어씌운 것 뿐입니다

https://korearaogong.tistory.com/38#%EC%82%AC%EC%9D%B4%EB%93%9C_%EB%B0%94%EC%97%90_%EA%B4%91%EA%B3%A0_%EB%84%A3%EA%B8%B0

반응형

[티스토리]Poster 스킨 꾸미기 1편 - 불편한 점 바꾸기

이런 이유로 관리자 모드에서 사이드바의 설정을 변경할 수 없습니다

그래서 이번에는 사이드바에 인기글과 최근글을 넣어보았습니다

치환자

시작하기 전에 알아둘 것으로 티스토리에는 치환자라는게 있습니다

치환자란 티스토리에서만 사용할 수 있는 기능으로 명령어들을 그룹지어 놓은 단축어라고 볼 수 있습니다

https://tistory.github.io/document-tistory-skin/sidebar/popular_post.html

인기글 · GitBook

위 링크에서 필요한 치환자를 이용하면 인기글/최근글 뿐만아니라 댓글, 방문자 수 등등도 넣을 수 있습니다

Poster 스킨 사이드 바(햄버거 안)에 인기글/최신글 넣기

시작하기

처음 시작하시는 분들은 밑의 링크의 글을 먼저 읽어보시길 바랍니다

https://korearaogong.tistory.com/36

티스토리 블로그 스킨/테마 쉽게 글씨크기 바꾸는 방법

Poster 사이드 바 위치찾기

Poster의 사이드바 id는 gnb입니다

티스토리 html 편집 창에 들어가서 id="gnb"를 찾습니다

치환자 복사

위 치환자의 링크에 있는 코드를 사용해도 좋습니다 저는 제목만 가져오겠습니다

<s_sidebar_element>
<!--타이틀 쓰세요-->
    인기글
    <s_rctps_popular_rep><!--인기글 반복문-->
        <a href=""></a><!--인기글-->
    </s_rctps_popular_rep>
</s_sidebar_element>

기본적인 인기글 치환자 사용법입니다

위치 정하기

<div class="menu" id="gnb">안에 원하는 위치에 넣어줍니다

저는 카테고리 밑에 넣겠습니다

##_category_list_##를 검색해서 밑에 붙혀넣습니다

디자인 하기

카테고리와 동일하게 디자인하기

CSS 고치기 귀찮음으로 기존에 있는 카테고리 디자인을  그대로 써도 됩니다

간단하게 HTML만 고쳐서 카테고리와 같은 디자인으로 바꾸는 방법입니다

카테고리는 ul과 li라는 목록 명령어로 되어있습니다

ul -> li ☞ ul -> li ☞ ul -> li

세번 반복으로 되어있으며 3번째가 카테고리의 제일 작은 부분입니다

동일하게 ul과 li를 3개를 사용하면 됩니다

<s_sidebar_element>
<!-- 이 블로그 인기글 -->
<ul class="popularPost">
    <li>
        <a href="/" class="link_tit"> 인기글/최신글 </a> 
        <ul>
            인기글
            <s_rctps_popular_rep>
                <ul>
                    <li>
                        <ul>
                            <li>
                                <a href=""></a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </s_rctps_popular_rep>
            최근글
            <s_rctps_rep>
                <ul>
                        <li>
                            <ul>
                                <li>
                                    <a href=""></a>
                                </li>
                            </ul>
                        </li>
                    </ul>
            </s_rctps_rep>
        </ul>
    </li>
</ul>
</s_sidebar_element>

위 Poster 스킨을 사용하시고 사이드 바에 인기글과 최근글을 넣고 싶으신다면 위 코드를 사이드바 안에서 원하는 곳에 붙혀넣기 하시면 됩니다

결과

Poster스킨 사이드바 안에 인기글과 최신글을 간단하게 넣어 봤습니다

기존 카테고리와 같은 디자인을 하지 않고 CSS를 만져서 자신만의 디자인으로 바꾸셔도 됩니다