사이드바에 추천글 넣기

Posted by Readiz
2014.05.26 21:54 반응형 티스토리/FastBoot

사이드바에 추천글 넣기


  우선 이 방법은 수동으로 추천글을 관리해야 함을 밝힙니다. 굳이 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="http://cfile8.uf.tistory.com/C80x80/257A9F435326FE06146E02" 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="http://cfile28.uf.tistory.com/C80x80/2309C94D532D5EF10B470D" 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="http://cfile6.uf.tistory.com/C80x80/271E183F53366BB31FF765" 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="http://cfile9.uf.tistory.com/C80x80/22351434533FDD9B11ED99" 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="http://cfile9.uf.tistory.com/C80x80/22351434533FDD9B11ED99" 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에 추가해주시면 됩니다. 이것은 위치의 제약이 없으므로 아무 곳에나 넣어주시면 됩니다. (나중에 수정된 부분을 따로 관리하시려면 하단에 몰아두시는게 낫습니다)


저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로
  1. 댓글 갯수까지 수동으로 넣는거였군요..ㅋㅋㅋ
    • 실망하셨나요.. ㅋㅋ
      ajax로 불러오면 됩니다만 언제나 속도의 문제가 걸리죠. 모든 작업은 못해서가 아니라 속도 문제때문에 못하는 것입니다. ㅠㅠ
      사실 현재 ajax로 불러오는 다른 요소들도 2000년대였다면 꿈에도 못꿀 행동이었을 거에요. 속도 느려터져서 어떻게 그걸 감당하겠습니까.. 인터넷 인프라가 좋아지고 하니까 이제 티스토리에도 ajax로 부담없이 가져올 수 있게 된거죠.. ㅎㅎ
      뭐하라님은 디스커스 쓰시니까 쉽게 가져올 수 있을텐데요. 차라리 이럴 때는 외부 플러그인이 낫네요 ㅎㅎ
    • 디스커스에 그런기능도 있나요~?
      애드디스 기능에도 recommended 가 있긴한데 수정하기가 만만치않을것 같네요..
      딱히 인기글이랄것도 없어서 이부분은 나중에나 적용해봐야겠습니다
  2. 링크타고 들어오면 그글만 딸랑 읽고 나가는 분들이 90%가 넘는지라 꼭 필요한 기능인데도 다음측에서 성의를 안보여 주는군요. 이번 간담회때 모바일 스킨 개방에 대해서 직접 이야기 해서 긍정적인 답변을 듣고 왔는데 시기는 전달받지 못했습니다. 이번 6월경에 티스토리 메인홈도 바뀌고 강화된 웹부분 어플리케이션이 새로 나온답니다. (아시겠지만 카카오톡도 다음에 흡수되는 모양입니다.) 바뀌는 메인에는 스킨부분을 따로 독립시켜서 개발자 들에게도 베네핏이 돌아갈수 있도록 꾸며보겠다고 하네요.
    • 간담회 정보 감사합니다. 아마 당분간에는 카카오톡 융합사업을 하느라 티스토리에 관심을 가질지 의문이네요.. 아니면 애초에 티스토리를 녹이려는 생각을 하고 있을지도 모르겠습니다. 어떤 식으로든 긍정적인 변화였으면 좋겠습니다.
  3. 저기 궁금한 것이 있는데요. 본문에 표를 작성하여 넣었을 때 본문 범위를 넘어가는 것은 교정할 수 없는 건가요?
    • http://nubiz.tistory.com/445
      여기있습니다!
    • 좋은 정보 감사합니다. 도움이 되었네요.^^ 하지만 표 자체를 잘리지 않게 할 수 있는 방법은 없는건가요?
    • 표를 삽입하실 때 티스토리 에디터말고 다른에디터로 생성하시면됩니다.
      티스토리에디터는 표를 전부 px단위로 만들어버려서 안됩니다
      • 꼴라숑
      • 2014.05.26 23:45 신고
      아 그렇군요. 그럼 위에서 알려주신 방법을 사용해야겠네요.^^ ㅎㅎㅎ 감사합니다. ㅎ
  4. 이거 응용해서 써야겟네요 ㅎㅎ
    잘보고갑니다
  5. 이거 그토록 찾던거긴 한데.. 전 Readiz님 블로그 소스보기로 일주일동안 뻘짓해가면서 완벽하게 따라해버렸지요 ㅎㅎ
    쫌만 일찍 포스팅 해주셨으면 일주일동안 뻘짓 안했을텐데 ㅎㅎ 아쉽네요..
    참고로 스킨은 참 좋은데.. 다들 추천글을 배너광고로 인식한다는게 문제에요..
    너무 이쁘다보니 배너광고로 착각들 하시더라구요 ㅋㅋㅋ
    • ㅋㅋ 언제 올릴지 기약이 없어서 마냥 기다리시라고 할 수가 없었습니다.
    • 2014.05.27 08:54
    비밀댓글입니다
    • 그런가요. ㅋㅋ 저는 초대 안해주려나요. ㅎㅎ
  6. 잘보고 갑니다.
  7. 오래 전부터 이것을 하고 싶었는데 수동으로 해야 되는군요..ㅎㅎ
    나중에 시간 날때 후다닥 해야 되겠어요...^^
  8. 좋은 기능이네요 ㅎㅎ
    직접 해봤는데 간단하게 완료됬습니다 감사합니다
  9. 역시 좋습니다. ㅎㅎ
    요즘 취업하셔서 바쁘신듯..^^
    추천 카테고리의 위력은 엄청나네요.
    페이지뷰가 엄청 늘었습니다.
  10. 적용해보니 썸네일 화면이 조금 크게 나오는데 무엇이 문제인지요?
    썸네일 주소는 사이드에 최신글의 썸네일을 우클릭해서 주소를 따왔습니다.
  11. 감사합니다!!
  12. Readiz 님 부탁드립니다. 사이드바 위치를 오른쪽에서 왼쪽으로 바꿀 수 있는방법이 있는지요. 있다면 포스팅에 혹시 나와있는지 알 수 있을까요? 정말 알고싶습니다. ㅠㅠ..

티스토리 툴바