티스토리 쉽게 따라하기 - 우측 사이드바 추천모듈 뱃지 색상 및 글자 바꾸기
티스토리 쉽게 따라하기 - 우측 사이드바 추천(Recommended) 모듈 뱃지 아이콘 색상 및 글자 바꾸기
저번 시간에 우측 사이드바에 추천 모듈을 다는 방법을 배워보았다. 그때 배웠을 때 추천모듈의 제목 옆 'new' 나 'hot'처럼 아이콘으로 되어 있는 뱃지를 볼 수 있는데 다 빨간색으로 되어 있었다. 그런데 지금 레드시크릿 블로그를 보면 노란색,빨간색,파란색등 다른 색이 들어가 있는 것을 볼 수 있다. 오늘은 좀 더 이쁘고 화려하게 보일 수 있도록 뱃지 색상을 바꾸는 것을 배워 보겠다.
|
추천모듈 뱃지 색상 바꾸기 - CSS 수정 |
일단 뱃지색상을 바꾸기전에 이미 지나 시간에 배웠던 추천 모듈이 적용되어 있을 것이다. 이미 적용은 다 끝난 상태이므로 약간의 수정만 하면 된다. 추천모듈이 적용되어 있지 않다면 아래 링크를 통해 먼저 추천모듈을 적용하길 바란다.
[IT & WEB/티스토리 쉽게 따라하기] - 티스토리 쉽게 따라하기 - 우측 사이드바 추천(Recommended) 모듈 달기
색상을 변경을 하려면 CSS 부분을 수정해 줘야 한다.
블로그관리홈> 꾸미기> HTML/CSS편집 으로 들어간다. 그리고 우측 상단의 CSS부분을 클릭하여 활성화한다.
그럼 추천 모듈을 적용할때 넣었던 소스들이 보일 것이다. 여기에서 'name'부분과 색상을 변경해 주면 된다.
name은 뱃지를 구분하는 이름이라고 생각하면 된다. 기존 추천모듈을 만들때는 한가지 이름(hot)과 한가지 색상(빨강)이였기 때문에 굳이 name을 변경할 필요가 없었다. 그러나 여러가지 색으로 적용해야 하니 구분을 해줘야 한다. name은 원하는 것으로 바꾸면 된다. 일단 필자는 색상별로 이름을 만들었다. 빨간색은 red로 노란색은 yellow등으로 말이다.
참고로 소스를 아래 첨부하니 첨부파일에서 수정을 해서 CSS부분에 덮어 쓰는게 좋다. 괜히 CSS자체에서 수정하다 실수하면 안되니 말이다.
추천 모듈 CSS 소스.txt
파일을 다운 받았으면 다음과 같은 소스가 나올 것이다.
---------------------------------------------------------------------------
#recommended .thumb img {
width: 40px;
height: 40px;
margin-left: -5px;
margin-right: 15px;
float:left;
border-radius: 0.5em;
}
#recommended span.name>span {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold !important;
line-height: 1;
color: #fff !important;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
background-color: #da4453;
border-color: #da4453;
border-radius: 10px;
padding-left:11px;
}
#recommended span.name>span:empty {
display:none;
}
----------------------------------------------------------------------------------------
이것이 하나의 뱃지 종류다. 세가지 색상으로 하기 위해선 위 소스가 세가가 있어야 한다.
그럼 하나씩 만들어 보자.
빨간색을 만들어 보겠다. 위 빨간색 name 부분을 red로 이름을 바꾼다.
이름을 바꿨으면 이제 색상표를 빨간색으로 바꾸는데 #da4453 를 바꾸면 된다. 그런데 메모장에 있는 그대로 쓰면 그게 빨간색이다. 빨간색도 종류가 많으니 좀 다른 빨간색으로 바꾸려면 이 부분을 고치면 된다.
참고로 색상표는 네이버에서 '색상코드표'를 검색하면 색상 팔레트가 나온다.
여기서 원하는 색상을 지정하면 옆에 코드가 나오고 이것을 복사해서 붙여넣으면 된다.
이제 빨간색 부분을 끝났으면 노란색 뱃지를 만들어 보자
메모장 위 소스부분을 복사해서 그 아래에 똑같은 소스를 붙여 넣는다.
그리고 붙여 넣은 소스를 똑같은 방법으로 변경한다.
name을 yellow로 바꾼다. 그리고 색상 팔레트에서 원하는 노란색을 지정하여 코드를 #da4453 부분에 바꿔 넣는다. 노란색은 #FFBB00 이다. 좀 다른 노란색을 하려면 선택하서 해당 코드를 넣으면 된다.
이렇게 해서 두번째 색상도 끝났다. 세번째 색상도 똑같은 방법으로 blue를 만들어 넣는다.
자 세가지를 다 했으면 전체를 복사해서 블로그 관리 CSS부분으로 가서 추천모듈 부분을 수정한 것으로 바꿔 넣고 저장을 클릭하고 나온다.
이제 적용할 준비는 다 끝났다. 이제 적용하는 방법을 배워 보자.
추천 모듈 뱃지 색상 및 글자 적용하기
기존에 추천 모듈을 적용했던 사이드바로 간다.
블로그관리홈> 꾸미기> 사이드바 로 가면 오른쪽에 기존에 만들어 놨던 추천글 사이드바가 있는데 편집을 눌러 소스창을 활성화 한다.
그런데 창이 작기 때문에 그 안에서 편집하긴 힘들고 소스를 전체 복사해서 메모장에 붙여넣기를 하여 편집하는 것이 손쉽다.
추천 모듈에 있는 추천글 한개는 아래 소스와 같다.
-------------------------------------------------------------------------------------------------------
<li class="list-group-item">
<a href="포스팅 주소"><span class="thumb"><img src="티스토리 이미지 주소" alt=""></span>
<div style="text-indent:-4px"><i class="fa fa-angle-right"></i> 추천 게시글 제목작성
<span class="name"><span>HOT</span></span>
<div class="clearfix"></div></div></a>
</li>
------------------------------------------------------------------------------------------------------------------------
여기에서 수정할 곳은 빨간색 부분이다.
뱃지색상을 노란색으로 하고 싶다면 아까 name 부분에 yellow로 바꿔 주면 된다. 그리고 뱃지에 나올 표시인 HOT을 원하는 것으로 바꿔주면 된다. 추천글 한개가 완성되었다. 이제 나머지 추천글에 대해서도 똑같은 방법으로 수정해 주면 된다.
뱃지를 붙일 추천글수 만큼 위 소스를 복사해 갯수만큼 붙여넣고 수정해주면 된다.
위 소스는 위쪽에 추천모듈 만들기 관련 링크를 클릭해서 보면 첨부되어 있으니 참고해서 활용하기 바란다.
이렇게 수정을 다 했으면 전체를 선택 복사해서 다시 블로그 관리로 가 좀전에 띄워 놓았던 사이드바의 추천글 편집 모드에 기존것이랑 바꿔 넣으면 완성된다.
확인후 아래쪽 변경사항 저장 을 꼭 클릭해야 변경이 되니 주의히시고, 변경사항 저장 후 블로그로 가보면 추천 모듈이 변경된것을 확인 할 수 있다.
이렇게 해서 추천모듈 뱃지 색상 변경 및 글자 바꾸는 것을 배워 보았다. 기존에 단순히 빨간색 뱃지만 있을때 하고는 좀더 눈에 띄고 화려한 블로그로 바뀌었을 것이다. 각자 자신의 취향에 맞게 색상이나 이름을 수정해서 사용하여 더 나은 블로그로 꾸미시길 바란다.
이 글을 공유합시다
