티스토리 검색창 꾸미기

안녕하세요 별깡솔입니다 : )

별깡솔 블로그를 방문하신 모든 분들 진심으로 감사드립니다

티스토리 검색창 교체하기 그리고 꾸미기

티스토리 검색창

제가 사용중인 스킨은 Odyssey 입니다
검색창 디자인이 마음에 안들어서 교체를 하려고 합니다

사용중인 스킨의 html 소스를 수정해야 하기때문에 백업은 만드시 필요합니다
스킨 백업 방법은 관리 페이지 - 스킨 변경 - 다운로드 입니다

스킨 변경 페이지에서 파일 백업 하면서 다른 스킨들을 미리보기로 마음에 드는 검색창을 찾습니다

개인적으로 Book Club의 검색창 디자인이 마음에 들었습니다
조그만한 동그라미로 있다가 클릭하면 검색창이 늘어나면서
포커스를 잃으면 다시 원래 모습으로 돌아가는게 마음에 들었습니다

사용중인 스킨의 검색창 부분을 찾습니다

<!-- search-bar for PC -->
<div class="util use-top">
    <div class="search">
        <input class="searchInput" type="text" name="search" value="" placeholder="Search..." onkeypress="if (event.keyCode == 13) { requestSearch('.util.use-top .searchInput') }" />
    </div>
</div>

친절하게 주석이 달려있어서 금방 찾을 수 있습니다
스킨에 따라 코드 위치가 다릅니다

기존 검색창 부분을 주석 처리 또는 삭제합니다
스킨을 백업했으니까 얼마든지 자신있게 수정할 수 있습니다

Book Club 스킨에서 검색창 부분 코드를 찾습니다

<div class="search">					
    <input type="text" name="search" value="" placeholder="검색내용을 입력하세요." 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 type="submit" onclick="try{window.location.href='/search/'+looseURIEncode(document.getElementsByName('search')[0].value);document.getElementsByName('search')[0].value='';return false;}catch(e){}">검색</button>
</div>

Book Club CSS search, input, button을 참고합니다

html

별깡솔 블로그에 적용한 html 코드입니다

<!-- search bar -->
<div class="search-box">
    <div class="search">
    <s_search>
        <input class="searchInput" type="text" name="" value="" placeholder="검색내용을 입력하세요." onkeypress="if (event.keyCode == 13 ) { requestSearch('.search-box .searchInput') }">
        <button type="submit" onclick="{ requestSearch('.search-box .searchInput') }">검색</button>
    </s_search>
    </div>
</div>

search를 search-box로 감싸 놓았습니다

티스토리 앱의 검색창처럼 '이 블로그에서 검색' 이라는 문구를 사용하려면
placaholder 부분을 수정합니다

placeholder="검색내용을 입력하세요."
placeholder="이 블로그에서 검색"
큰 따옴표 또는 작은 따옴표 안에 사용할 문구를 삽입합니다

html 구조적으로 같은 부모를 두고 싶었는데 구독 버튼 치환자 정보가 없어서 
검색창을 header에 삽입했습니다

기존 검색창은 header 밑에 inner header 밑에 box-header 밑에 위치합니다

마우스 포인터가 header 영역을 벗어나면 늘어났던 검색창을 다시 줄이기 위해
<!-- // inner-header --> 바로 밑에 삽입하였습니다

css

Odyssey 스킨의 header 높이가 조금 내려져 있습니다

overflow: hidden; 으로 잃어버린 값을 찾습니다

css는 입맛에 따라 추가합니다

.header {overflow: hidden;}
.search-box {
    position: fixed;
    top: 20px;
    right: 190px;
    z-index: 9999;
}
.search-box .search {
    position: relative;
    float: left;
    overflow: hidden;
    width: 32px;
    box-sizing: border-box;
    transition: width .5s;
    -webkit-transition: width .5s
}

.search-box .search:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    z-index: 20;
    width: 32px;
    height: 32px;
    border: 1px solid #eee;
    border-radius: 50%;
    text-indent: -999em;
    background: url(./images/ico_package.png) no-repeat #fff;
    vertical-align: top;
    box-sizing: border-box;
    outline: 0;
    cursor: pointer
}

.search-box .search input {
    width: 32px;
    height: 32px;
    padding: 5px 15px;
    border: 0;
    background-color: transparent;
    font-size: .875em;
    line-height: 1;
    outline: 0;
    box-sizing: border-box
}
.search-box .search input:focus {border-color: #484848;}
.search-box .search input::placeholder {color: #969696;}

.search-box .search button {
    position: absolute;
    top: 1px;
    right: 1px;
    z-index: 10;
    width: 30px;
    height: 30px;
    text-indent: -999em;
    border: 1px solid #eee;
    border-radius: 50%;
    background: url(./images/ico_package.png) -1px -1px no-repeat #fff;
    vertical-align: top;
    outline: 0
}
.search-box .search.on button {z-index: 30;}

.search-box .search.on {width: 200px;}
.search-box .search.on:before {content: none;}
.search-box .search.on input {
	display: block;
	width: 100%;
	border: 1px solid #eee;
	border-radius: 32px;
}
.search-box .search.on button {border-color: transparent;}

/* Retina Display */
@media  only screen and (-webkit-min-device-pixel-ratio:1.5) {
	.search-box .search:before,
	.search-box .search button {
		background-image: url(./images/ico_package_2x.png);
		background-size: 200px auto;
    }
}

스크린 크기가 줄어들어 구독 버튼과 같이 없어지게 코드를 추가합니다
구독 버튼에 하트 넣기를 할때 사용한 코드 밑에 추가합니다

@media only screen and (max-width:768px){
    .menu_toolbar,
    .search-box {display: none !important;}
}

js

images 폴더 안에 common.js 파일을 수정합니다
스킨에 따라 js 파일명과 존재 위치가 다릅니다

/* search box */
var $header = $('header');
var $search = $header.find('.search');

$search.mouseenter(function (){
    $search.addClass('on').find('input').focus().val('');
});

$header.on('mouseleave', function(){
    $search.removeClass('on');
});

$header.on('click', function(){
    $search.removeClass('on');
});

기존 검색창은 클릭하면 늘어나는 구조였습니다
마우스 포인터를 가져가면 늘어나게 변경하였습니다

그리고 마우스 포인터가 header를 벗어나거나 input의 focus를 잃으면 다시 줄어들게 했습니다

추가하여야 할 제어 부분

input 값이 공백을 제거하고 비어있을 때 검색어를 입력하라는 제어 메세지

미 구독 상태 메세지 '구독하기'와 구독 상태의 '구독중' 넓이가 다름으로 검색창 위치 조절하기

제가 아는 선에서는 저 두가지를 추가하면 좋을 것 같습니다

별깡솔 블로그를 방문하신 모든 분들 다시 한번 진심으로 감사합니다

내일도 꼭 다시 만나요 : )

다음 글 예고 - 사이드바 꾸미기