[블로그 팁]카테고리 글 더 보기 상자 이용하기

티스토리의 플러그인 중에 꼭 사용해야 할 플러그인 중의 하나가 "카테고리 글 더 보기"입니다. 글 바로 아래 같은 부류의 글을 표시해서 방문객들이 다른 글도 함께 읽게 합니다. 페이지뷰가 늘어나는 효과가 있습니다.

이 카테고리 다른 글 보기 플러그인의 상자를 다른 곳에도 사용하면 디자인의 일관성도 유지할 수 있고 보기에도 깔끔해집니다. 내부 링크 문서나 블로그 추천 글, 제휴사이트의 광고 문구 또는 카테고리 글을 여러 개 넣고 싶을 때 사용할 수 있겠지요.

 

카테고리 글 더 보기 상자 이용 - 테이블(Table)

먼저 테이블을 이용하는 방법입니다.
카테고리 글 더 보기가 테이블 방식을 사용하고 있죠.
사실은 카테고리 글 더 보기의 CSS를 그대로 사용해도 됩니다. 다만, 한 가지 걸리는 게 td 대신에 th를 사용한다는 거지요.
그래서 th를 td로 돌리기 위해서 새로 만들어 버렸습니다.

.category_add{border:1px solid #e5e5e5; clear:both; margin:10px 0; padding:10px 10px 5px;}

.category_add_title{font-size:12px!important; border-bottom:1px solid #e5e5e5!important; color:#737373!important; margin:0!important; padding:2px 0 6px!important;}

.category_add_title a{font-weight:700!important; color:#737373!important;}

.category_add table{table-layout:fixed; border-collapse:collapse; width:100%!important; margin-top:10px!important;}

.category_add td{text-align:center; font-size:12px!important; font-weight:400; overflow:hidden; line-height:160%; padding:0 0 4px!important; color: #909090 !important;}

.category_add td a{text-decoration:none; color:#909090!important;}

table 이용.txt

아래에 있는 사회봉사단체 배너와 블로그 추천 글에 이 방법을 사용했습니다.

 

카테고리 글 더 보기 상자 이용 - div

div 태그를 사용하는 방법입니다.
div 태그가 테이블 태그보다 사용하기 쉬워서 간단한 텍스트 링크를 만드는 데 이용하면 좋을 것 같네요.
링크 연결할 주소와 글을 입력하고 <br />를 넣어주면 됩니다.

.category_add{border:1px solid #e5e5e5;clear:both;margin:10px 0;padding:10px 10px 5px;}

.category_add_title{font-size:12px!important;border-bottom:1px solid #e5e5e5!important;color:#737373!important;margin:0!important;padding:2px 0 6px!important;}

.category_add_title a{font-weight:700;color:#737373!important;}

.category_add_item {text-align:left;font-size:12px!important;font-weight:400;overflow:hidden;line-height:160%;color:#909090!important;margin-top:10px;padding:0 0 4px!important;}

.category_add_item a{text-decoration:none;color:#909090!important;}

div 이용.txt

이 소스를 이용해서 만들 결과물입니다.

첨부된 파일은 각 CSS를 이용해서 HTML을 만든 예제입니다.

제 블로그에 있는 주소로 만들었으니까 수정해서 사용하시면 됩니다.