Programming$/Web Develop

티스토리 사이드 바에 검색 창 추가하기

ch4rli3kop 2018. 1. 14. 00:53
반응형

글을 점점 쓰면서, 글의 카테고리나 페이지가 늘어나기 시작했습니다 :D 
그런데 그렇게 늘어난 글이나 카테고리같은 것들을 까먹는 일들 덕분에, 가끔 제가 썻던 글을 다시 찾는데 시간이 들기 시작했습니다..(허허..)

제가 잘 사용하고 있는 스킨에는 아쉽게도 검색 기능이 없어서, 직접 검색 기능을 추가해보기로 했습니다.
Html만 살짝 겉핥기로 해보았지만, 구글신만 믿으면 어떻게든 될 것 같습니다.

이것저것 뒤적거리고 난 후에, 다음과 같은 코드를 짜봤습니다.

1
2
3
4
5
6
7
8
<s_sidebar_element>
    <div class=”search”
        <s_search>
            <input class="input" type="text" onkeypress="if (event.keyCode == 13) { try{window.location.href='/search/' + document.getElementsByName('search')[0].value.replaceAll('%', '%50');document.getElementsByName('search')[0].value = ''; return false;}catch(e){} }" value="" name="search" style="margin-left:40px; width:159px;height:25px;border:3px;padding:0px 0px 0px 6px;">
            <input class="submit" type="button" onclick="try{window.location.href='/search/' + document.getElementsByName('search')[0].value.replaceAll('%', '%25');document.getElementsByName('search')[0].value = ''; return false;}catch(e){}" value="Search" style="width:53px; height:26px;border:3px;background-color:#dce6ea">
        </s_search>
    </div>
</s_sidebar_element>
cs

검색 창 기능에 대한 코드는 다음 블로그를 참고했습니다. http://gskool.tistory.com/84 
정말 정리를 잘 해놓으셔서 자주 방문하면 좋을 것 같습니다.

이 코드를 검색 창을 만들고 싶은 영역에 이렇게 잘 추가를 합시다.

성공적으로 추가를 한 뒤, 블로그에 접속해보면, 

(짜란~!) 요롷게 아주 예쁜 검색 창을 확인할 수가 있겠습니다~! :D



(+추가)

티스토리 블로그 관리의 사이드 바 설정에 기본적으로 검색기능을 추가할 수가 있네요 ㅠㅠ

편하게 하실 분들은 그냥 그렇게 추가하시는것도 좋을 것 같습니다. :)


반응형

'Programming$ > Web Develop' 카테고리의 다른 글

[.CSS] z-index element 우선순위  (0) 2019.02.26
[.CSS] 구글 폰트 적용하기  (1) 2019.02.26
[.HTML/CSS] Font Awesome's Free CDN 사용하기  (0) 2019.02.24
[.CSS] Position: absolute, relative  (0) 2019.02.24
HTML5  (0) 2017.09.01