친효애드온 : 사이드바 모듈에 배지(Badge)를 적용하여 강조하기 (마크1)

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

1. CSS 세팅

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

.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>

<ul>

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

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

</ul>

</div>

</s_sidebar_element>

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

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