[모바일] 티스토리 Odyssey 스킨에서 검색 메뉴를 위로 올리는 방법

티스토리에서는 기본적으로 '모바일 페이지 사용하기' 기능이 활성화되어있지만, 블로그 스킨이 반응형이면서 모바일에서도 스킨의 통일된 모습을 유지하고 싶다면 해당 기능을 끄면 됩니다.

 

다만, Odyssey 스킨의 모바일 반응형 페이지(가로길이 1060px 이하)에서는 검색 메뉴가 사이드바 맨 밑으로 가 있습니다. 저는 모바일에서 제가 쓴 글을 다시 찾아보는 경우가 많아 불편했습니다.

 

그래서 정말 어쩔 수 없이(단순한 걸 좋아하는 사람이라) HTML을 직접 편집해야 했습니다. '블로그 관리 - 스킨 편집' 메뉴로 들어가서 'HTML 편집' 버튼을 누르고 확인버튼을 누르면 편집기가 열립니다.

 

순정 Odyssey 스킨을 기준으로 HTML 758줄이 사이드바의 프로필 태그가 끝나는 곳입니다. 그 빈 줄에 아래와 같은 HTML을 붙여넣습니다. 이 코드는 원래 900줄 이후에 존재하는데, 이를 프로필 태그가 끝나는 758줄에 끼워넣는 작업입니다.

<!-- search-bar for MOBILE -->
<div class="util use-sidebar">
  <div class="search">
    <label for="searchInput" class="screen_out">블로그 내 검색</label>
    <input id="searchInput" class="searchInput" type="text" name="search" value="" placeholder="블로그 내 검색" onkeypress="if (event.keyCode == 13) { requestSearch('.util.use-sidebar .searchInput') }">
  </div>
</div>

 

그러면 이렇게 맨 아래로 스크롤하지 않아도 검색 메뉴가 보입니다.

 

끝.