이 블로그는 더이상 운영되지 않고 Archive 용도로 사용되고 있습니다.
새로운 블로그를 방문해주세요.

[gabriel] 2.0에 있던 상단 검색바를 3.0에 다는 방법


※ 이 가이드는 gabriel 스킨 전용입니다. 다른 스킨에는 적용되지 않습니다.




Gabriel 스킨은 2.0 이던 시절엔 상단 메뉴 위쪽에 검색창이 있었습니다.


3.0 으로 패치되면서 없어졌는데요,


간단하게 다시 추가하는 방법을 소개합니다.



ski.html 파일 편집

43번째 줄에 <div class="nav">가 끝나는걸 알리는 </div> 가 있습니다. 그 바로 다음줄에 아래 소스를 추가해주세요.

<div class="search-bar">
		<input placeholder="blog search… :)" type="text" name="search" value="" onkeypress="if (event.keyCode == 13) { try{window.location.href='/search/' + looseURIEncode(document.getElementsByName('search')[0].value);document.getElementsByName('search')[0].value = ''; return false;}catch(e){} }" />
		<button href="#" onclick="try{window.location.href='/search/' + looseURIEncode(document.getElementsByName('search')[0].value);document.getElementsByName('search')[0].value = ''; return false;}catch(e){}"><i class="fa fa-search"></i></button>
</div>



skin.html 편집추가한 모습



style.css 파일 편집

60번째 줄에 다음 소스가 있습니다.

.header-wrap .nav ul li a:active { background-color: #fefefe; }

이 바로 다음줄에 아래 소스를 추가해주세요.

.header-wrap .search-bar { position: absolute; top: -70px; right: 0; padding: 0; width: 220px; border-bottom: 1px solid #ddd; }
.header-wrap .search-bar input { float: left; padding: 10px; width: 83%; border: none; font-size: 15px; color: #555; }
.header-wrap .search-bar button { display: block; float: left; padding: 13px 0 12px; width: 17%; border: none; background-color: transparent; font-size: 15px; color: #888; cursor: pointer; }



style.css 편집 1추가한 모습



위 소스를 넣었다는 가정 하에 163번째 줄로 이동하면 아래 소스가 있습니다.

    .footer-wrap .widget { float: none; width: 100%; }

그 바로 다음 다음줄에 아래 소스를 추가해주세요. (엔터 두번)

    .header-wrap .search-bar { position: static; padding: 5px; width: 100%; }
    .header-wrap .search-bar input { width: 90%; }
    .header-wrap .search-bar button { width: 10%; }



style.css 편집 2추가한 모습



이걸로 검색바 추가는 끝입니다.

티스토리 툴바