사이드바에 추천글 넣기

사이드바에 추천글 넣기

  우선 이 방법은 수동으로 추천글을 관리해야 함을 밝힙니다. 굳이 FastBoot 스킨이 아니더라도 비슷하게 응용하시면 삽입이 가능하실 것이라 보입니다. 현재 티스토리에서 인기 있는 글을 가져오는 기능을 제공하고 있지 않기 때문에(지원을 할 리도 없죠..) 사용자가 직접 추천글을 넣을 수밖에는 없습니다. 외부 위젯을 이용하면 되긴 하겠지만(다음뷰 위젯이 쓸만했지만 이제 지원 종료되지요..) 이는 블로그 속도에 제약이 걸리는 단점이 있죠. 귀찮더라도 가장 빠르게 구동되는 방법은 직접 HTML을 수정하여 삽입하는 방식입니다.

사이드바 추천글

HTML

	
<s_sidebar_element>
<!-- 추천 포스트 모듈 -->
<div id="recommended" class="panel panel-default">
	<h4 class="panel-heading"><i class="fa fa-flash"></i> Recommended</h4>
	<ul class="list-group list-group-flush">
		<li class="list-group-item">
			<a href="/214"><span class="thumb"><img src="https://t1.daumcdn.net/cfile/tistory/257A9F435326FE0614" alt=""></span>
				<div style="text-indent:-4px"><i class="fa fa-angle-right"></i>  FastBoot v1.6.1 다운로드
				<span class="name"><span>100+</span></span><div class="clearfix"></div></div></a>
		</li>
		<li class="list-group-item">
			<a href="/173"><span class="thumb"><img src="https://t1.daumcdn.net/cfile/tistory/2309C94D532D5EF10B" alt=""></span>
				<div style="text-indent:-4px"><i class="fa fa-angle-right"></i>  FastBoot 기본 설정
				<div class="clearfix"></div></div></a>
		</li>
		<li class="list-group-item">
			<a href="/180"><span class="thumb"><img src="https://t1.daumcdn.net/cfile/tistory/271E183F53366BB31F" alt=""></span>
				<div style="text-indent:-4px"><i class="fa fa-angle-right"></i>  반응형 스킨을 달면 방문자수가 감소한다?
				<div class="clearfix"></div></div></a>
		</li>
		<li class="list-group-item">
			<a href="/65"><span class="thumb"><img src="https://t1.daumcdn.net/cfile/tistory/22351434533FDD9B11" alt=""></span>
				<div style="text-indent:-4px"><i class="fa fa-angle-right"></i>  반응형 스킨 애드센스 위치이동
				<div class="clearfix"></div></div></a>
		</li>
	</ul>
</div>
</s_sidebar_element> 
	

  티스토리에서 사이드바 요소는 <s_sidebar_element>로 구분이 됩니다. 나름 사이드바 요소를 분리하여 관리할 수 있게 하는 것이라고 할까요.. 위 스크린샷과 내용을 보시면 대충 어떤 형식인지 아실 것이라 봅니다. 예제를 참고하시면서 수정하셔야 할 부분은 크게 3가지인데요,

1. <a> 태그의 href부분에 이동하기 원하는 글의 주소를 넣으시면 됩니다. 숫자형이면 /20 과 같은 식으로 넣으시면 되고, 아니시려면 /entry/xxx-xx-xx 처럼 넣으시면 되겠죠.

2. <i class="fa fa-angle-right"></i> 의 오른쪽에 원하는 글 제목을 넣으시면 됩니다. 예제처럼 </i> 우측에 한칸 띄워야 이쁘게 보입니다.

3. 코멘트수처럼 보이게하는 빨간색 배찌는 첫번째 예시처럼 넣으시면 됩니다. <span class="name"><span>100+</span></span> 여기에 100+ 대신에 HOT과 같은 글자를 넣으셔도 되겠죠.

  그리고 좌측에 나오는 이미지 썸네일을 넣으실 때는 img태그의 src부분에 이미지 주소를 넣으시면 되는데, 한가지 주의하실 점은

	
<img src="https://t1.daumcdn.net/cfile/tistory/22351434533FDD9B11" alt=""> 
	

  처럼 이루어진 썸네일 부분인데요. 티스토리에 사진을 업로드 하시고 사진의 주소를 보려고 하면 원래는 주소가 

http://cfile~/original/223131213123

와 같은 식으로 되어 있습니다. 여기서 중간에 있는 original을 C80x80으로 바꿔주셔서 위 주소처럼 보이게 해야 브라우저가 지나치게 큰 썸네일을 로드하지 않습니다. 티스토리에서 주소 앞쪽에 나오는 부분이 원래 이미지를 어떤 사이즈로 자를 것인가를 표현하는 부분입니다. original 이미지를 쓰게 되면 큰 이미지일테니 로딩이 느려지겠죠.

  위 코드를 작성하신 뒤에 스킨에 넣는 방법은 skin.html을 수정하는 방식으로, 위 코드 전체를 아래와 같은 구성이 되도록 넣어주시면 됩니다.

	
<s_sidebar>
    <s_sidebar_element>
        ...
    </s_sidebar_element>

    ...

    <s_sidebar_element>
        ...
    </s_sidebar_element>
</s_sidebar> 
	

  skin.html에서 <s_sidebar> 부분을 찾으셔서 원하는 부분에 위 코드를 넣으시는 것이 첫번째 단계 되겠습니다.

CSS

	
#recommended .thumb img {
  width: 40px;
  height: 40px;
  margin-left: -5px;
  margin-right: 15px;
  float:left;
  border-radius: 0.5em;
}
#recommended span.name>span {
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: bold !important;
  line-height: 1;
  color: #fff !important;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  background-color: #da4453;
  border-color: #da4453;
  border-radius: 10px;
  padding-left:11px;
}
#recommended span.name>span:empty {
  display:none;
} 
	

  위 코드를 style.css에 추가해주시면 됩니다. 이것은 위치의 제약이 없으므로 아무 곳에나 넣어주시면 됩니다. (나중에 수정된 부분을 따로 관리하시려면 하단에 몰아두시는게 낫습니다)