티스토리 카테고리 목록 갤러리 수정 방법 1#

티스토리 블로그는 본래 카테고리 형식이

목록형만 지원된다.

하지만, 

티스토리 블로그는 HTML코드를 사용자

마음대로 변경이 가능하므로,

목록형을 / 갤러리형식으로 변경하는 방법을

알아보자.

※필자는 HTML 초보자이므로, 초보자분들도

무리없이 가능하다.

STEP 1.

ygal.js

해당파일을 다운받아 업로드한다.

티스토리 설정

꾸미기

ㄴHTML/CSS 편집

ㄴ파일업로드

업로드한 파일 링크를 복사해둔다.

STEP 2.

티스토리 설정

꾸미기

ㄴHTML/CSS 편집

ㄴHTML

<s_list> 코드 붙어넣기 </s_list>

<div class="searchList">

  

 <ol>

     <s_list_rep>

    <div class="fixed_img_col">

      <li>

      <a href="">

      <span class="thumb"><img class="dno"></span></a>

       <div class="text">

        <a class="title" href=""></a>

        <span class="date"></span>

        <span class="cnt"></span>

      </div>

      </li>

    </div>

    </s_list_rep>

   </ol>

   </div>

※기존 코드 삭제

</body> 바로 위에 코드 삽입

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">

    var col = 3;

    var width = 320;

</script>

<script src="[아까 ygal.js파일 링크 주소를 여기에 붙어넣으세요.]"></script>

STEP 3.

티스토리 설정

꾸미기

ㄴHTML/CSS 편집

ㄴCSS

CSS 맨끝. 해당 코드 삽입

.searchList li {

    float:left;

    margin:0 1% 20px;

    width:31%;

   background:#FFFFFF

    border-radius:5px;

    box-shadow:0 1px 10px rgba(0,0,0,.4); 

}

.searchList .thumb img {

    width:100%; 

    height:auto; 

    border-radius:5px 5px 0 0;

    overflow:hidden; background:#fff;

}

/* fixed_img_col */

.fixed_img_col li{overflow:hidden;}

.searchList { text-align: center; }

적용이 잘되었는지 확인해본다.

다시한번 알려드리면

저 처럼 HTML 초보자도 따라할수 있도록 설명해드렸습니다.

감사합니다.

문의는 댓글로.

2017년 03월 프리타 블로거::

서버 오픈(Server Open)

http://pritaa.kr

http://pritaa.net

애니/영화/소프트웨어

모든 자료가 무료.

해당 포스팅이 도움이 되셨다면,

♥ 공감버튼을 눌러주세요.