Skin
티스토리 카테고리 글 더보기 설정하기
남자두부 2015. 3. 29. 14:37반응형
1
카테고리 관련 글 더보기 활성화
관리자 -> 플러그인 -> 플러그인 설정 -> 카테고리 글 더보기를 활성화 한다.
2
소스 코드 추가
<head></head> 사이에 아래의 두 소스를 삽입한다.
알아보기 쉽게 </title> 바로 뒤에 차례로 삽입한다.
|
1
2
3 |
<script type="text/javascript" language="javascript">
var MissFlash_Div_Num = 1;
</script> |
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 |
<script type="text/javascript" language="javascript">
function getElementsByClass(MissFlash_Div_Num,searchClass,node,tag) {
var classElements = new Array();
if(node == null) node = document;
if(tag == null) tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
var j = 0;
var MissFlash_Check = 1;
var MissFlash_ID = "MF_Reference" + MissFlash_Div_Num;
for(i=0; i<elsLen; i++) {
if(pattern.test(els[i].className)) {
classElements[j] = els[i];
j++;
if(els[i].id.indexOf("MF_Reference") == -1) {
var result = els[i].innerHTML;
els[i].style.display = "none";
}
}
} return result;
}
</script> |
cs |
3
아래 코드가 카테고리 글 더보기 플러그인 코드이다.
메인 코드에서 원하는 위치에 삽입하면 된다.
|
1
2
3
4
5
6
7
8
9
10
11
12 |
<div id="MF_Reference" class="another_category another_category_color_gray"></div>
<script type="text/javascript">
var MF_Reference = document.getElementById('MF_Reference');
MF_Reference.setAttribute("id", "MF_Reference" + MissFlash_Div_Num);
MF_Reference.className = "another_category another_category_color_gray";
var ref_source = getElementsByClass(MissFlash_Div_Num,"another_category");
if (ref_source == null) {
} else {
MF_Reference.innerHTML = ref_source;
MissFlash_Div_Num += 1;
}
</script> |
cs |
끝!
4
카테고리 글 더보기 설정 소스
1) 박스 크기와 여백 설정
|
1
2
3
4 |
<div style="width:688px;
margin:0px;"
id="MF_Reference" class="another_category another_category_color_gray">
</div> |
cs |
박스 크기를 688로 하고 모든 여백을 없앴다는 뜻이다.
위아래의 여백을 주고 싶으면 margin:20px 0 20px 0; 으로 설정하면된다.
margin 끝에 auto; 를 추가하면 알아서 조절을 해준다.
2) 날짜 부분 삭제
|
1 |
.another_category td {display: none;} |
cs |
style.css에서 .another_category td를 검색하고 위에 처럼 바꿔주면 된다.
3) 카테고리 글 더보기 배경화면 설정
|
1
2
3 |
.another_category {
background: transparent url(./images/이미지파일) no-repeat center center;
} |
cs |
이미지파일에 이미지의 주소를 삽입하면 된다.
만약 티스토리 파일업로드에 올렸다면 올린 파일의 이름과 확장자를 동일하게 써주면 된다.
반응형