본문 바로가기

Language/tistory

티스토리를 네이버블로그처럼 만들기 6

티스토리를 네이버블로그처럼 만들기 6


게시글 더 보기(카테고리의 다른 글)를 게시글 상단으로 이동


제가 생각한 네이버와 티스토리와의 가장큰 차이점은


게시글 목록이 상단에 있는 것과 하단에 있는 것이라고 생각합니다.


저는 네이버를 오랫동안 쓰다가 티스토리로 넘어 왔기 때문에 상단이 익숙 하거든요.


그래서 상단으로 옮겨 보도록 하겠습니다.


정확한 명칭은 카테고리의 다른 글 이죠.


티스토리


게시글 본문

하단에 아래의 카테고리의 다른 글(목록)이 있습니다.

네이버



게시글 본문 의 상단에 카테고리의 다른 글(목록)이 있습니다.


자 !!! 한번 바꿔 봅시다.


*** html / css를 수정하기 전에 꼭!! 백업 해두세요.백업하기 ***


*** html / css를 수정하기 전에 꼭!! 백업 해두세요.백업하기 ***


*** html / css를 수정하기 전에 꼭!! 백업 해두세요.백업하기 ***



1. 먼저 준비 사항으로 플러그인 설정을 해야 합니다.


1) 관리자 페이지에서 플러그인 설정을 선택합니다.

2) 플러그인 설정에서 꾸미기 부분의 카테고리 글 더보기을 활성화 합니다.



2. 그러면 이제 관리자 페이지로 이동 합니다.


3. HTML/CSS 편집 을 선택 합니다.

(꾸미기 카테고리 안에 있습니다.)

( 선택하면 새창이 뜹니다.)



4.  윈도우: 컨트롤 + F 를 눌러서 검색 기능을 켭니다. / 맥: command + F 를 눌러서 검색 기능을 켭니다.


검색 명: </title>


검색 명대로 입력 후 엔터 버튼을 누르면 아래의 그림과 같이 찾아 집니다.


5. 소스를 아래와 같이 수정 합니다.


</title> 다음 줄에 아래의 소스를 추가 합니다.


소스 수정할 것 없이 그냥 추가 하면 됩니다.


<!-- 카테고리 다른 글 위치 변경(명령) 시작 -->

<script type="text/javascript" language="javascript">

var MissFlash_Div_Num = 1;

</script>

<script type="text/javascript" language="javascript">

function getElementsByClass(MissFlash_Div_Num,searchClass,node,tag){

    // JavaScript function was developed by MissFlash (http://blog.missflash.com)

    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>

<!-- 카테고리 다른 글 위치 변경(명령) 끝 -->





6.  윈도우: 컨트롤 + F 를 눌러서 검색 기능을 켭니다. / 맥: command + F 를 눌러서 검색 기능을 켭니다.


검색 명: <!-- 본문글 -->


검색 명대로 입력 후 엔터 버튼을 누르면 아래의 그림과 같이 찾아 집니다.


7. 소스를 아래와 같이 수정 합니다.


<!-- 본문글 --> 위에 소스를 추가 합니다.


소스 수정할 것 없이 그냥 추가 하면 됩니다. (카테고리 글과 해당 카테고리 글 페이징 기능이 함께 들어 있어요)



<!-- 카테고리 글 더보기_2 -->

<div id="MF_Reference" class="another_category another_category_color_gray"></div>

<!-- 페이징2 -->

<s_paging>

<div class="paging">

<a >◀ PREV </a> |

<s_paging_rep> <a ></a> | </s_paging_rep>

<a >NEXT ▶</a> </div>

<hr />

</s_paging>

<!-- 카테고리 글 더보기_2 -->





8.  윈도우: 컨트롤 + F 를 눌러서 검색 기능을 켭니다. / 맥: command + F 를 눌러서 검색 기능을 켭니다.


검색 명: </s_article_rep>


검색 명대로 입력 후 엔터 버튼을 누르면 아래의 그림과 같이 찾아 집니다.


9. 소스를 아래와 같이 수정 합니다.


</s_article_rep> 아래에 소스를 추가 합니다.


소스 수정할 것 없이 그냥 추가 하면 됩니다.



<!-- 카테고리 글 더보기_2 -->

<script type="text/javascript">

//<![CDATA[

// Created by MissFlash(http://blog.missflash.com)

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) //카테고리로 분류되지 않은 글이 있는 경우 에러처리

 {

   // alert("Error of NULL data"); This article doesn't have categories.

   // return true; 

 }

else     // This article is classified into some of categories.

 {

   MF_Reference.innerHTML = ref_source;

   MissFlash_Div_Num += 1;

   //]]>

 }

//]]>

</script>

<!-- 카테고리 글 더보기_2 -->






10. 저장 버튼을 눌러 저장 합니다. ( 중요 합니다.) 저장 꼭 하세요 ^^


그러면 아래와 같이 딱! 하니 위로 이동되어 있을 거에요.









***************************** 소스가 긁어 지지 않을 수 있으니까 파일로 첨부 합니다. (txt 파일 이고요. 제가 직접 만든 파일이니까 바이러스 따위 없습니다. ^^)

카테고리 다른 글 위치 변경.txt






티스토리를 네이버 블로그 처럼 꾸미기 다른 글 바로 가기


1. 전체 보기 눌렀을때 페이지를 네이버 처럼 꾸밈

티스토리를 네이버블로그처럼 만들기 2



2. 전체보기 글자 수정

티스토리를 네이버블로그처럼 만들기 3



3. 사이드 바의 카테고리 전부 펼치기

티스토리를 네이버블로그처럼 만들기 4



4. 관리자 | 글쓰기를 왼쪽 사이드바로 옮김

티스토리를 네이버블로그처럼 만들기 5



5. 게시글 더 보기를 게시글 상단으로 이동

티스토리를 네이버블로그처럼 만들기 6



6. 게시글 더 보기를 이쁘게 꾸밈

티스토리를 네이버블로그처럼 만들기 7



7. 게시글 더보기 페이징 간격 조정

티스토리를 네이버블로그처럼 만들기 8



8. 게시글 더 보기 색상 꾸미기

티스토리를 네이버블로그처럼 만들기 9



9. 스킨 소스 백업하기

티스토리를 네이버블로그처럼 만들기 10 백업하기