studiopress adsense 스킨 사이드바 수정하기(최근댓글)

사이드바를 수정하는것중에서 최근댓글을 넓은 곳(사이드바 위쪽부분)으로 올리는 방법을 알아보겠습니다.

대략 나머지도 비슷하니 참고하시면 될듯합니다.

먼저 스킨을 저장해주세요.

사이드바의 너비는 아래와 같습니다.

  사이드바(320px) = 왼쪽사이드바(170px) + 오른쪽사이드바(140px) + padding(10px)

최근댓글은 170사이즈의 왼쪽 사이드바에 있습니다.

html에서의 수정

html 편집창에서 <div id="recentComment"> 를 찾기를 통해 찾아주세요.
아래 코드를 모두 복사한후 지워주세요.

<s_sidebar_element><!-- 최근에 달린 댓글 --> 

	<div id="recentComment"> 

	<h4>Recent Comment</h4>

	<ul> 

		<s_rctrp_rep>

		<li> 

			<a href="[#\#_rctrp_rep_link_##]">[#\#_rctrp_rep_desc_##]

			<div class="name">[#\#_rctrp_rep_name_##] <span class="date">[#\#_rctrp_rep_time_##]</span></div> </a>

		</li>

		</s_rctrp_rep>

	</ul>

	</div> 
</s_sidebar_element>

그다음 최근글 <div id="recentPost"> 아래쪽에 넣으시면 됩니다.
정확하게 <div id="recentPost">아래쪽에 </s_sidebar_element> 을 삭제하고 그 부분에 넣으시면 됩니다.

그다음 <div id="recentComment">부분위에 <s_sidebar_element>부분을 삭제합니다.
완성된 html 코드 최근글과 최근댓글 부분 코드를 올려드립니다.

<s_sidebar_element><!-- 최근에 올라온 글 --> 

	<div id="recentPost"> 

		<h4>Recent Post </h4>

			<ul> 

				<s_rctps_rep> 

					<li> 

						<a href="[#\#_rctps_rep_link_##]"> [#\#_rctps_rep_title_##]

						<span class="cnt">[#\#_rctps_rep_rp_cnt_##]</span> </a>

				</li>

			</s_rctps_rep>

		</ul>

	</div>


	<!-- 최근에 달린 댓글 --><div id="recentComment"> 

		<h4>Recent Comment</h4>

			<ul> 

				<s_rctrp_rep>

					<li> 

						<a href="[#\#_rctrp_rep_link_##]">[#\#_rctrp_rep_desc_##]

						<div class="name">[#\#_rctrp_rep_name_##] <span class="date">[#\#_rctrp_rep_time_##]</span></div> </a>

					</li>

				</s_rctrp_rep>

			</ul>

			</div>        

	</s_sidebar_element>

css 창에서의 수정

css창에서 recentComment 로 검색을 하시면 아래와 같은 화면을 보실수 있을겁니다.
아래 빨강색 부분의 #recentComment, 를 삭제하세요.

#notice, #category,#recentComment,#recentTrackback,#tagbox{
	width:150px;
}

그리고 윗부분에 아래와 같은 코드에 #recentComment 를 추가해줍니다.

#blogImage,#recentPost,#recentComment{ 

	background:url(images/sidebartop.gif) repeat-x 0 0 #ffffff;

	border:1px solid #dddddd;

	float:left;

	margin:0 0 10px;

	 padding:9px;

	 width:300px;

}

그럼 바로 완료가 됩니다.
아래 파랑색부분이 변경된 부분입니다.
변경된 부분만 소스 완성작을 올려드립니다.

#blogImage,#recentPost,#recentComment{ 

	background:url(images/sidebartop.gif) repeat-x 0 0 #ffffff;

	border:1px solid #dddddd;

	float:left;

	margin:0 0 10px;

	padding:9px;

	width:300px;

}

#notice, #category,#recentTrackback,#tagbox{

 width:150px;

}

이 부분은 다른부분도 적용이 되므로 한번만 보시면 얼마든지 올렸다 내렸다 또는 왼쪽 오른쪽 서로 바꿀수도 있습니다.

사이드바의 구조는 전부 공통적으로 구성이 됐기때문에 css는 그냥 div id 값만 없애주고 , 추가해주고 하면 적용이 됩니다.
그리고 html 에서 순서만 바꿔주면 되죠.