반응형 티스토리 스킨 상단 메뉴바에 검색창 위치 변경하기!!!

마크쿼리 웹 반응형 스킨 상단 메뉴 검색창 넣기

Spider’s Web 3.0.5 기준으로 작성했습니다.

위에 그림을 보면 스킨을 적용하면 처음 위치는 중앙? 사이드바 위쪽에 있습니다.
검색창이 있어도 방문자가 잘 사용 안 하지만...
그리고, 그대로 사용해도 되지만 저 같은 경우 검색창과 같은 위치에 있는 페이스북, 트위터, 구글플러스, 모바일에만 나타나는 카카오톡, 카카오스토리 공유 버튼 및 글꼴이랑 크기 변경하는 부분을 본문에 옮겨 쓸려고 처음에는 사이드바에 넣었다가 지금은 상단으로 옮긴 상태입니다.

제가 사용한 방법은 일단 알려드릴게요 ;;

skin.html

<li role="menuitem"><a href="/guestbook">Guestbook</a></li>
<li role="menuitem"><a href="/location">Location</a></li>
<li role="menuitem">
<s_sidebar_element>
    <s_search>
    <!-- Search -->
     <form class="navbar-form">
    <input role="search" type="text" class="form-control" placeholder="Search" name="[*#_search_name_##]" value="[*#_search_text_##]" onkeypress="if (event.keyCode == 13) { [*#_search_onclick_submit_##] }">
    </form>
    </s_search>
    </s_sidebar_element>
   </li>
</ul>
</nav>
</header><!-- /.container skeleton-nav -->

style.css

.navbar-form{
padding: 5px 15px;
}

1. 꾸미기에 HTML/CSS편집에서 상단 메뉴바 부분을 찾아서 제일 아래 부분을 복사해서 바로 밑에 붙혀넣기.
<li role="menuitem"><a href="/location">Location</a></li>

2 <a>..</a> 태그 부분 삭제.

3. 삭제한부분에

<s_sidebar_element>
    <s_search>
    <!-- Search -->
     <form class="navbar-form">
    <input role="search" type="text" class="form-control" placeholder="Search" name="[*#_search_name_##]" value="[*#_search_text_##]" onkeypress="if (event.keyCode == 13) { [*#_search_onclick_submit_##] }">
    </form>
    </s_search>
</s_sidebar_element>

여기까지만 해도 상단에 넣어집니다 하지만 위치가 조금 거시기합니다.

4.그래서 CSS 이용해서 조금 추가.
style.css 부분에 제일하단이나 알수있는부분에 붙혀넣기.

.navbar-form{
padding: 5px 15px;
}

Download 메뉴바에 검색창넣기.txt

검색창이 두 개 있음 제일 처음 거만 검색되니 원래 위치에 검색창을 삭제해주면 됩니다.
두 개 이상 사용하려면 구글 애드센스나 다른 검색폼을 이용해야 됨

<div class="col-sm-3 mid-aside">
	<s_sidebar_element>
	<s_search>
		<!-- Search -->
		<div class="input-group">
			<span class="input-group-btn"><button type="button" onclick="[*#_search_onclick_submit_##]" class="btn btn-none btn-xs"><span class="search-icon svgicon">검색</span></button></span>
			<input role="search" type="text" class="search-input" placeholder="Search" name="[*#_search_name_##]" value="[*#_search_text_##]" onkeypress="if (event.keyCode == 13) { [*#_search_onclick_submit_##] }">
		</div>
	</s_search>
	</s_sidebar_element>
</div><!-- /.col mid-aside -->

Plus

정리해보면

저같은경우는 검색창은 원래 위치나 상단에 있으나 방문자가 잘 사용 안 하는 거 같다. ㅎㅎ
하지만 사이드바 모바일에서 안 보이게 설정해놔서 혹시나 해서 상단으로 옮겼어요.
그리고 상단 메뉴 하나는 오른쪽 정렬해놨는데 그건 다음으로...
하나 더 본문 제목 밑에 공유 버튼들 옮기는 것도 ;;; 궁금한 분들 있으면... 다음 기회에...

제가 글 쓰는 제주가 없어서 설명이 힘들게 돼있어서 죄송해요 '';;