부트스트랩 스킨에서 태터데스크 사용하는 방법

부트스트랩 티스토리 스킨에서 태터데스크(첫화면 꾸미기)을 사용할때의 팁한가지를 알려드리겠습니다.

하나의 예제로 http://superzun.tistory.com/ 를 들겠습니다.

오해는 마세요. 방문자수가 늘면 늘었지 줄진 않을겁니다. ㅎㅎㅎㅎ

만약 그냥 사용하시면 아래 이미지처럼 배경이 없이 들어갑니다.

부트스트랩 스킨은 동일한 인터페이스를 가지고 있습니다.

바로 위젯(.widget)을 사용하는데요.

스킨에 기본적으로 스타일이 입혀져 있으니 아래의 코드를 활용해서 사용해보세요.

위젯 - html

<div class="widget">
	<div class="widget_header">
		제목이 들어가는 곳
	</div>
	<div class="widget_content">
		내용이 들어가는 곳
	</div>
</div>

첫페이지 꾸미기를 잠시 보자면 아래처럼 제목부분과 내용부분을 분리해서 작성하면 편합니다.

몇번 해보시면 잘 될겁니다. 만약 해도 안된다면 댓글 주세요.

그럼 대략 아래처럼 됩니다.

[티스토리/스킨배포] - 부트스트랩 티스토리 스킨 Bootstrap_TS_ver.3.2 배포

추가합니다.

아래 댓글에 잘 안된다고 해서 제가 사용하는 치환자 및 html 코드를 그대로 올려드립니다.

위와 같은 형식인데요. 코드를 올려드립니다.

티스토리 첫화면 꾸미기 html

<div class="widget">
	<div class="widget_header">
		<h3>
			<s_more>
				<i class="icon-bookmark"></i><a href=""></a>
			</s_more>
		</h3>
	</div>
	<div class="widget_content">
		<s_list>
			<div class="TD_list">
				<span class="TD_headline"><a href=""></a></span>	
				<span class="TD_date"> </span>
			</div>
		</s_list>
	</div><!-- //widget_content -->
</div><!-- //widget -->

관련된 스타일은 아래와 같으니 추가해주세요.

티스토리 첫화면 꾸미기 css

#ttDesk_Container .td_list3rd .widget_content {
	height: 280px;
	-ms-overflow-y: auto;
	overflow-y: auto;
}
#ttDesk_Container .widget_content {
	padding-top: 10px;
}

위에서 해당되는것은 .widget_content 밖에 없습니다.