티스토리 블로그 인기글 최신글 사이드바에 넣기

 

안녕하세요. 예화 사랑입니다. 오늘은 티스토리 블로그 인기글 최신글목록을 사이드바에 넣는 방법에 대해 알아보도록 하겠습니다. 정보공유 차원도 있지만 나중에 제가 다시 설정할때 편하게 하기 위해서 이렇게 포스팅을 합니다. 사이드바에 인기글과 최신글 리스트를 넣어놓으면 검색해서 들어온 사람을 자신의 블로그에 보다 오래 있게 해서 이탈률을 줄여주는 역활을합니다. 저처럼 구글 에드샌스나 다음 에드핏 광고등으로 돈을 버시는 분들에게는 조금이라도 이탈율을 줄이고 블로그에 오래 머무르게 하는게 매우 중요합니다. 그런 의미에서 이번 포스팅은 매우 중요하다고 보시면 될것 같네요~^^ 

1. 티스토리 블로그 사이드바에 최신글 인기글 목록 넣기

먼저 당부의 말씀을 드립니다. 아래 소스를 적용하실때에는 적용하기 전에 소스를 백업해두시는걸 잊지 마세요~ 백업방법중 한가지 방법은 관리자화면에서 "스킨변경" 누르시고 오른쪽에 "스킨보관"을 클릭하셔서 이름지정하시고 확인누르시면 됩니다. 백업한것을 적용할때는 관리자 화면에서 "스킨변경"  누르시고 "스킨보관함" 누르셔서 저장했던 스킨 이름을 선택하시면 됩니다. 

두번째 방법은 그냥 메모장에  "HTML" 과 "CSS" 두가지 항목을 각각 따로 복사해 넣고 다른이름으로 각각 저장하시면 됩니다. 저장하실때 하단에 보시면 인코딩항목이 나오는데 "UTP-8" 로 지정하시는게  좋습니다.그렇지 않으면 나중에 글자가 깨지거나 손실될 위험이 있답니다. 

이렇게 두가지 방법을 알아보았는데 이왕이면 두가지방법 모두 사용해서 백업해두시길 권해드립니다. 스킨보관함에서 저장한것을 복원하였을경우는 사이드바에 끄고켰던 목록들이 초기화 되고 이외에도 몇가지 항목들이 초기화 되는 현상이 있어서 새로 설정해야하는 번거로움이 있습니다.그렇기에 메모장에 백업한 소스가 있다면 더 편리하겠지요~

<s_sidebar_element> <!-- 블로그 최신글--> <div class="box_aside"> <div class="tit_aside"> 블로그 최신글</div>                         <s_rctps_rep>                                                          <ul class="recent-posts">   <s_rctps_rep>     <li>       <a href="" class="link_item">         <s_rctps_rep_thumbnail>           <span class="thum">             <img src="//i1.daumcdn.net/thumb/C60x40/?fname="/>           </span>         </s_rctps_rep_thumbnail>         <span class="title"></span>       </a>          </li>   </s_rctps_rep> </ul>                                     </s_rctps_rep>  </div> </s_sidebar_element> Colored by Color Scripter

cs

블로그 최신글은 위의 소스를 응용하시면 됩니다.

관련 css 는 직접 편집하셔야 이쁘게 테두리를 꾸밀수가 있습니다.

인기글은 위의 소스와 매우 비슷하지만 4군데만 변경이 됩니다.

바로 아래와 같습니다.

<s_sidebar_element> <!-- 블로그 인기글 -->         <div class="box_aside"> <div class="tit_aside"> 블로그 인기글</div>                         <s_rctps_popular_rep>                                                      <ul class="recent-posts"> <s_rctps_popular_rep>     <li>       <a href="" class="link_item">         <s_rctps_rep_thumbnail>           <span class="thum">             <img src="//i1.daumcdn.net/thumb/C60x40/?fname="/>           </span>         </s_rctps_rep_thumbnail>         <span class="title"></span>       </a>     </li>  </s_rctps_popular_rep> </ul>                                      </s_rctps_popular_rep> </div> </s_sidebar_element>     Colored by Color Scripter

cs

css 는 직접 꾸미는것이 맞지만 대략적인 기본만 잡아 드릴께요.

이미지오른쪽에 제목이 나오는데 지금은 한줄로만 나오게 되어 영 볼품이 없습니다. 2줄이상으로 나오도록해주는 css 설정입니다.

아래를 복사해서 css 제일 하단부분에 넣어주세요.

.recent-posts .thum img {
  margin: 0 10px 5px 0;
  float: left;
}
.recent-posts .title {
  display: block;
  white-space: normal;
  line-height: 1.3;
}

설정해줘야 할것이 하나더 있습니다. 관리자 화면으로 들어가셔서 사이드바 메뉴를 클릭하시면 최근글 갯수와 글자수를 얼마나 할지 입력하는곳이 나오는데요 최근글은 알아서 적으시고 글자수는 45 정도로 설정하시면 썸네일 이미지 옆에 글자가 두줄정도로 적당하게 나오게 되더라구요 참고하시길 바랍니다.

이 소스들을 기본으로 하여서 응용한다면 원하는 스타일의 최신글,그리고 인기글 목록을 꾸밀수가 있을겁니다. fastboot 스킨 사용자라면 아래에 더 자세히 설명해 두었으니 참고하시기 바랍니다.

2. FASTBOOT 스킨 사용자 사이드바에 인기글 목록 추가하기

FASTBOOT 스킨 사용자라면 지난번에 HTTPS 설정한후 아이콘이 나오지 않아서 이미 다른 스킨으로 넘어간분들도 많은걸로압니다. 하지만 간단하게 해결할수가 있는 문제 였는데 많은분들이 몰라서 다른스킨으로 갈아 타셨더군요.아이콘 나오게 하는 방법은 여기로 가시면 해결하실수가 있습니다.이미 몇몇 분들은 이 방법으로 고비를 넘기시고 잘 사용하시고 계시더군요~인기글 목록 추가하기 포스팅이 끝나면 또 스킨 커버기능 이식하는 방법도 포스팅 할 예정입니다.기대해주세요~최근 생성한 블로그에서는 티에디션이 안된다는걸 알고게셨나요? 이 티에디션 기능이 지원 안되면 FASTBOOT 스킨 사용자는 첫 메인 화면을 더이상 꾸밀수가 없습니다. 하지만 방법이 있습니다. 티에디션기능은 없어졌지만 커버기능이 새롭게 생겼기 때문입니다. 이것을 FASTBOOT 스킨에 이식하는 방법을 곧 포스팅할 예정이니 관심 있으신 분들은 구독 꾹 눌러주시기 바랍니다~^^ FASTBOOT 스킨이 아니더라도 적용방법은 아마 비슷할것이기때문에 커버기능을 제대로 사용하고자 하시는 분들은 기대하셔도 좋을것 같습니다.

자 이제 본론으로 들어가서 인기글 목록을 추가하는 방법에 대해 알아보도록 하겠습니다. 이미 FASTBOOT 제작자분께서 아주 멋지게 최신글 목록을 세팅해두셨습니다. 최근글 소스에서 살짝 몇개만 바꿔 놓았으니 아래 코드를 복사하셔셔 최근글 목록 바로 아래또는 바로 위에 복사해 넣으시면 되겠습니다. 혹시모르니 백업은 필수입니다. 자신의 소중한 데이터는 항상 소중하게 여기시길 바랍니다~^^

<s_sidebar_element>
<!-- 최근 인기글 모듈 -->
<div id="recentPost" class="panel panel-default">
<h4 class="panel-heading">
<i class="fa fa fa-flash"></i> 블로그 인기글</h4>                
<ul class="list-group list-group-flush">
<s_rctps_popular_rep>        
<li class="list-group-item">
<a href="">
<s_rctps_rep_thumbnail>
<span class="thumb">  
<img src="//i1.daumcdn.net/thumb/C60x40/?fname="/>
</span>
<div style="text-indent:-4px">
<i class="fa fa-angle-right"></i>  
 
<span class="name">

</span>
</s_rctps_rep_thumbnail>
<div class="clearfix"></div>
</div>
</a>
</li>
</s_rctps_popular_rep>
</ul>
</div>
</s_sidebar_element>