티스토리 뷰

티스토리 페이스북 카테고리 목록 타임라인 형태로 적용하기

1. skin.html

<s_list>

<ol class="timeline clearfix">

<!-- yz list s -->

<s_list_rep>

<li class="left">

<i class="pointer"></i>

<div class="unit">

<div class="storyUnit">

<div class="imageUnit">

<div class="imageUnit-content">

<h4><a href=""><span class="cmt"></span></a></h4>

<p></p>

</div>

</div>

<p id="dsc"></p>

</div>

<div class="photoUnit" style="display:none;text-align:center">

<a href="" ><img /></a>

</div>

</div>

</li>

</s_list_rep>

<!-- yz list e -->

</ol>

</s_list>


이런식으로 <s_list> ~ </s_list>를 변경 해주세요.

<s_paging>
<div id="paging" class="yzpaging">
<a class="" id="prevPage"><span>‹</span> Prev</a>
<s_paging_rep>
<a class="num"> </a>
</s_paging_rep>
<a class="" id="nextPage">Next <span>›</span></a>
</div>
</s_paging>

그 후 페이징 부분에 class="yzpaing"을 추가해주세요.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>　　Constantine B2＆1412 :: 티스토리 페이스북 카테고리 목록 타임라인 형태로 적용하기</title>
<link href="./style.css" rel="stylesheet" type="text/css" />
<link href="http://cfs.tistory.com/custom/blog/151/1512341/skin/images/timeline.css" rel="stylesheet" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="　　Constantine B2＆1412" href="https://legendconstantine-b2.tistory.com/rss" />

최상단에

<link href="http://cfs.tistory.com/custom/blog/151/1512341/skin/images/timeline.css" rel="stylesheet" type="text/css" />

를 추가해 줍니다.



최 하단에 

을 추가 해 줍니다.

 

 

 

1. skin.html


<link href="./style.css" rel="stylesheet" type="text/css" />

<link href="http://cfs.tistory.com/custom/blog/150/1504077/skin/images/timeline.css" rel="stylesheet" type="text/css" />

</head>

<body>

...

...

...

 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><!-- juery가 없을 경우만!!! -->

 

<script src="http://cfs.tistory.com/custom/blog/150/1504077/skin/images/timeline.js"></script>

</body>


2. 티에디션

 

 



<h2 class="tt-item-title"><span class="tt-item-title-bg"><span class="tt-item-title-inner"></span></span></h2>
<ol class="timeline clearfix">
    <s_tabloid>
<li class="left">
<i class="pointer"></i>
<div class="unit">
<!-- Story -->
<div class="storyUnit">
        <div class="imageUnit">
          <div class="imageUnit-content">
            <h4><a href=""><span class="cmt">+</span></a></h4>
            <p> </p>
          </div>
        </div>
<p></p>
</div>
<div class="photoUnit" style="display:none;text-align:center">
          <a href="" ><img 
          src="http:////" alt=""/></a>
        </div>
      <!-- / Story -->
    </div>
  </li>
  
<li class="right">
<i class="pointer"></i>
<div class="unit">
<!-- Story -->
<div class="storyUnit">
<div class="imageUnit">
  <div class="imageUnit-content">
            <h4><a href=""><span class="cmt">+</span></a></h4>
            <p> </p>
  </div>
</div>
<p></p>
</div>
<div class="photoUnit" style="display:none;text-align:center">
          <a href="" ><img 
          src="http:////" alt=""/></a>
        </div>
<!-- / Story -->
</div>
</li>
</s_tabloid>
</ol>



여기서 굵은 글자 부분을 수정 하시면 됩니다.

<ol class="timeline clearfix"> 기본 900px

<ol class="timeline clearfix" id="w740"> 740px

<ol class="timeline clearfix" id="w580"> 580px


잘 안되시는 부분은 질문 남겨 주세요.


저작자표시 비영리 동일조건

Recent Comments