친절한효자손 취미생활

티스토리 사이드바에는 다양한 모듈이 있습니다. 그중에서 수동으로 넣는 추천글 모듈이나 기타 스킨에서 제공하는 모듈이 있을 수 있는데 현재 친효스킨이나 JB131 스킨에서도 추천글 모듈이 적용되어 있습니다. 이 추천글 바로 오른쪽에 강조 표현의 배지를 넣는 방법입니다.


1. CSS 세팅

먼저 CSS 부터 세팅합니다. 아래의 첨부파일을 다운받아보시면 다음의 코드를 확인하실 수 있습니다. 한번 간략히 살펴보고 설명을 드리겠습니다.


/* 친효애드온 : 사이드바 배지 */

/* http://rgy0409.tistory.com */

.rgyBadge {

    display: inline-block;

    margin-left: 10px;

    padding: 2px 5px;

    border-radius: 7px;

    color: #fff;

    vertical-align: middle;

    font-weight: bold;

    font-size: 12px; /* 배지 폰트 크기 */

    background-color: #f00; /* 배지 색상 */

}


주석에도 나와있듯, font-size는 배지 안에 들어가는 텍스트의 크기입니다. background-color는 배지의 전체 색상입니다. 색상은 16진수 색상코드를 활용하여 원하시는 색으로 넣으시면 됩니다. 기본 색상은 빨간색 입니다.


친효애드온-사이드바 배지.txt




다운 받으시고 위의 스크린샷 이미지처럼 자신의 스킨 CSS에 적용시키면 됩니다.


2. HTML 활용

티스토리에서의 사이드바 모듈은 <s_sidebar_element> 태그로 묶여있습니다. 친효스킨에는 HTML안에 존재하고 있습니다. 먼저 티스토리의 관리자 모드에서 스킨 편집으로 들어갑니다. HTML 카테고리에서 아래의 태그를 찾습니다. 여기에서는 추천글에 적용시키는 방법으로 알아보겠습니다.


<s_sidebar_element>

    <!--추천글-->

    <div class="rgy-sidebar-title rgy-sidebar-content">

        <h3>추천글</h3>

        <ul>

            <li><a href="/" target="_blank">제목을 입력하세요<span class="rgyBadge">HOT</span></a></li>

            <li><a href="/" target="_blank">제목을 입력하세요</a></li>

            <li><a href="/" target="_blank">제목을 입력하세요</a></li>

            <li><a href="/" target="_blank">제목을 입력하세요</a></li>

            <li><a href="/" target="_blank">제목을 입력하세요</a></li>

        </ul>

    </div>

</s_sidebar_element>


보시는 것 처럼 빨간색 부분이 새롭게 추가된 애드온 태그 입니다.


<span class="rgyBadge">HOT</span>


"제목을 입력하세요" 다음에 바로 위의 태그를 넣어주시면 됩니다. 빨간색 글씨인 HOT는 사용자 임의대로 텍스트를 변경해서 사용하시면 됩니다. 영어든, 한글이든, 특수기호이든 상관 없습니다.




이렇게 하시면 친효스킨의 추천글 모듈에 이런 강조의 배지가 생성됩니다. 훨씬 눈에 띄죠? 이런식으로 원하는 항목에 배지 모듈을 써서 강조하시면 됩니다.




이 애드온을 써서 다양한 스킨에도 적용 가능합니다. JB131 스킨에도 적용시켜봤는데 잘 적용됩니다. 여러분들의 스킨에도 한번 적용시켜 보시기 바랍니다. 끝.





알리익스프레스 할인

이 블로그를 후원해주실 분들을 모집합니다!

이 글을 공유합시다

facebook twitter googleplus kakaostory naver

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

  1. Favicon of https://newedge.tistory.com 뉴엣 2019.07.27 08:54 신고

    아이고, 저는 스킨은 너무 어려워서 아직 못 건드리겠네요 ㅜㅜ
    언젠가는 열심히 또 연습해서 예쁘게 꾸며보도록 하겠습니다..
    꿀팁 감사합니다 :)
    친효님, 오늘도 좋은 하루 보내세요~!