Adsense 에드센스 스킨 검색창 사이드바에 달기

demun
티스토리스킨수정/사이드바
2011. 12. 18. 11:26

제글에는 사이드바에 관련한 글들이 많이 있습니다.
기존의 스킨에서 변경할때 똑같은 스타일이 적용되게끔 변경하는 방법 말이죠.
이것도 그와 관련한 글입니다.

즉 해더에 배치된 검색창을 사이드바에 넣은 방법입니다.
질문으로 들어왔지만 글이 길어 포스팅하고 그와 관련한 방법도 참고가 되니 여기에 씁니다.

해결방법은 대략 이렇습니다.
1. 해더에 있는 html 검색코드를 지운다.
2. 사이드바에 검색창을 넣는다.
(여기서 티스토리의 태그입력,모듈추가로 입력합니다. 또는 html 입력창에서 입력해도 상관은 없습니다.)
3. 관련 스타일 코드를 추가해준다.

대략 이렇습니다. 자 시작해볼까요???.
먼저 해더쪽에 있는 검색창 코드를 지우고 사이드바 설정에서 모듈추가를 합니다.


<div id="headerMidRight" class="pngfix">
	<s_search>
		<input type="text" class="search_input" name="[#\#_search_name_##]" value="! 검색어를 입력해주세요." onkeypress="if (event.keyCode == 13) { [#\#_search_onclick_submit_##] }" onFocus="this.value=''" />
		<input value="검색" type="button" onclick="[#\#_search_onclick_submit_##]" class="submit"/>
	</s_search>
</div><!-- //headerMidRight close -->

<!-- 위의 검색을 아래처럼 바꿉니다. -->
<div id="headerMidRight" class="pngfix">
</div><!-- //headerMidRight close -->
<!-- 다음 사이드바 모듈추가로 아래의 코드를 추가합니다. -->

<s_sidebar_element><!-- 검색 -->
<div id="search" class="side_widget">
    <h4><span class="pngfix">Search</span></h4>
    <div class="widget">
        <s_search>
		  <input type="text" class="search_input" name="[#\#_search_name_##]" value="" onkeypress="if (event.keyCode == 13) {[#\#_search_onclick_submit_##] }" onFocus="this.value=''" />
		  <input value="검색" type="button" onclick="[#\#_search_onclick_submit_##]" class="submit"/>
        </s_search>
    </div>
</div>
</s_sidebar_element>

여기서 한가지 value="! 검색어를 입력해주세요. 부분이 수정됐으니 참고하세요.
그다음 검색창에 관련한 코드를 추가해줍니다.


/* sidebar search */
	#search .widget { 
	position:relative; 
	display:block; 
	background:url(images/img.png) no-repeat 0 -160px; 
	height:20px; 
	margin:10px 0 5px 30px; 
	width:250px; 
}
#search input.search_input { 
	position:absolute; 
	left:23px; 
	top:8px; 
	width:120px; 
	padding:3px; 
	height:22px; 
	background:none; 
	border:0 none; 
	vertical-align: middle; 
}
#search input.submit { 
	width:52px; 
	height:32px; 
	position:absolute; 
	left:154px; 
	top:3px; 
	margin:0; 
	text-indent:-9999px; 
	border:0 none; 
	background:none; 
	color:#333; 
	cursor:pointer; 
	vertical-align: middle; 
}

사실 스타일 코드는 기존의 코드에서 아이디만 변경해준겁니다. 그대로 사용하는거죠.
단 #search .widget 에 몇개만 코드를 추가했습니다.
이렇게 변경된것을 보시죠.

개 개

demun(대문블로그)

Adsense 에드센스 스킨 검색창 사이드바에 달기

티스토리툴바