티스토리 검색창 추가하기(치환자/출력 갯수/디자인 변경)

기존에 관련 글이 꽤 많이 있었는데 소스를 보니 적용되는 부분이 모두 달랐습니다. 글이 점점 많아지니 제 글도 쉽게 찾지 못하는 경우가 생겨서 급하게 티스토리 검색창을 추가했습니다. 위치는 개인의 취향에 맞게 조정해서 쓰면 되고 HTML을 조금 다루실 줄 아시는 분은 그대로 소스를 긁어서 원하는 위치에 추가하시면 될 것 같습니다.

다만 Submit 출력 버튼은 Display: none; 설정을 한 상태라서 검색 버튼을 활성화시키실 경우에는 CSS를 수정하셔야 합니다.

HTML

<div class="search">
  <input type="text" class="article_search_field" placeholder="Search" name="search" value="" onkeypress="if (event.keyCode == 13) { try{window.location.href='/search/' + document.getElementsByName('search')[0].value.replaceAll('%', '%25');document.getElementsByName('search')[0].value = ''; return false;}catch(e){} }" id="article_search" />
  <input type="submit" class="article_search_submit" value="검색" onclick="try{window.location.href='/search/' + document.getElementsByName('search')[0].value.replaceAll('%', '%25');document.getElementsByName('search')[0].value = ''; return false;}catch(e){}" />
</div>

 

CSS

/* 검색창 */
.search {
    max-width: 1200px;
    margin: 0 auto;
    text-align: right;
}
input#article_search {
    margin: auto;
    text-align: center;
    background: transparent;
    color: #777;
    font-size: 12px;
    font-family: inherit;
    border-bottom: 1px solid #d6d6d6;
    border-top: 0;
    border-left: 0;
    border-right: 0;
}

input[type=submit] {
    -webkit-appearance: none;
    background: transparent;
    font-family: inherit;
    border: 0;
    padding: 2px 9px!important;
    border: 1px solid #e2e2e2;
    border-radius: 3px;
    font-size: 9px;
    letter-spacing: 1px;
    color: #4e4e4e;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    margin-right: 10px;
    display: none;
}

input::-webkit-input-placeholder {
    color: #b9b9b9;
}
input::-moz-placeholder {
    color: #b9b9b9;
}
input::-ms-input-placeholder {
    color: #b9b9b9;
}

 

Conversion

위의 코드는 현재 제가 적용하고 있는 코드이나 각 사이트 디자인에 맞게 변경해서 사용하시면 될 것 같습니다. 간단하게 수정을 할 줄 아시고 검색창이 없으신 분들은 위치만 잘 설정하셔서 추가하시면 깔끔한 검색창을 구성할 수 있습니다.

추가적으로 티스토리 내에서 검색했을 때 출력되는 갯수를 별도로 수정하는 방법을 찾아보았었는데, 스킨편집 기본설정에서 글 목록 글 수를 수정하시면 됩니다. 기본 설정에서 아래의 글 목록 글 수를 수정하시길 바랍니다.