Content

13. 티스토리 스킨 만들기 링크, 카운터

오늘은 링크와 카운터 부분을 수정하겠습니다.



오늘 볼 부분은 딱히 어려운 부분이 없네요.

바로 시작하겠습니다.



먼저 설정할 요소들의 HTML 부분입니다.


     

      <!-- 링크 -->

     

     


     

      <!-- 방문자수 -->

     

        Total : [ ##_count_total_##]

        Today : [ ##_count_today_##]

        Yesterday : [ ##_count_yesterday_##]

     

     


링크와 방문자수 부분을 찾아주시면 되구요.

제 경우 빨간색의
부분만 추가했습니다.


따로 더이상 볼건 없으니 CSS를 보시죠.


.link {margin-bottom:10px;}

.link > h3 {

text-align:center;

margin-bottom:10px;

color:#fff;

text-shadow:3px 3px 5px #202d44;

}

.link > ul {list-style:none;font-weight:bolder;}


먼저 링크 부분부터 하겠습니다.

다른 모듈들 처럼 margin-bottom:10px을 주고, 다음 모듈과의 거리를 줍니다.

.link > h3 부분도 다른 부분과 같구요.

.link > ul 부분은 먼저 list-style:none으로 스타일을 없애주고, font-weight:bolder로 굵게 나타냈습니다.


링크는 이 정도로 끝냈습니다.


.counter {

border:2px solid #fff;

padding:10px;

font-weight:bolder;

font-size:13px;

margin-bottom:10px;

}


다음은 카운터네요.

.counter에 border 속성을 줘서 테두리 선을 만들었구요.

padding을 10px 줘서 선과 글자 사이에 간격을 줬습니다.

font-weight는 당연히 굵게.

글자는 너무 커서 13px, 그리고 다음 모듈과의 거리를 유지하기 위한 margin-bottom 값을 줬네요.


대부분 이전에도 봤던 속성들이죠?

오늘은 정말 간단하게 끝나네요;;



이 다음 포스팅에서 알아볼 모듈은 달력,

이 달력이 사이드바에서는 마지막이네요.

물론 배너모듈, RSS Feed 같은건 남아있지만 이미지가 없기 때문에 이해 부탁드릴께요.

배너모듈 같은 경우 /images/rss.gif 의 이미지 경로만 선택해주시면 됩니다.


혹시라도 어려운점이 있으시다면 댓글에 남겨주세요^^

Comments