구글 블로그 검색창 만들기는 만들면서 보여드리겠습니다
구글 블로그 검색창에는 두 가지 종류가 있습니다. 하나는 이 블로그 검색이라는 타이틀이 있고 그 아래 검색창이 나타나는 타입과 또 하나는 타이틀이 없이 검색창만 보이는 유형이 있습니다. 검색창은 주로 상단 메뉴와 사이드바에 하나씩 들어있는데, 상단 메뉴바에는 검색창과 검색 아이콘인 돋보기가 같이 있거나 돋보기 하나만 있고, 사이드바에는 일반적으로 이 블로그 검색이라는 타이틀과 함께 검색창을 제공하고 있습니다.
일반적으로 볼 수 있는 검색창입니다. 사이드바의 형태에 맞춰서 스킨 제작자가 만들었습니다만, 어떨 때는 타이틀이 있는 것이 어색할 때가 있습니다. 지금처럼 다른 배경도 없이 달랑 이 블로그 검색 글자만 보이니 이상합니다.
이런 검색창을 변경할 수 있는데요, 잠깐 살펴보겠습니다.
레이아웃에 들어가서 가젯 추가에서 검색창을 만들 수 있습니다. 하지만 블로그 검색 가젯을 이용할 때 제목이 없으면 차라리 괜찮죠. 그럼, 타이틀이 없는 검색창이 됩니다. 이렇게만 되면 아무것도 문제가 없는데,
그런데 검색창 제목을 넣지 않으면 검색창을 만들 수 없습니다.
그래서 이번에는 가젯 추가에서 블로그 검색이 아닌 그 아래에 있는 HTML/자바스크립트를 선택합니다, 이곳은 제목을 넣지 않아도 됩니다. 제목은 비워두고 아래 콘텐츠 자리에 아래 코드를 넣습니다.
<style>
#search-box {
position: relative;
width: 100%;
margin: 0;
}
#search-form {
height: 42px;
border: 1px solid #ebebeb;
background-color: #fff;
overflow: hidden;
display: flex;
align-items: center;
}
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
height: 42px;
line-height: 42px;
}
#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}
#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #fb4834;
cursor: pointer;
}
</style>
<div id="search-box">
<form action="/search" id="search-form" method="get" target="_top">
<input id="search-text" name="q" placeholder="Enter keyword..." type="text" />
<button id="search-button" type="submit"><span><i class="fa fa-search"></i></span></button>
</form>
</div>
그리고 결과를 보겠습니다.
두 개를 보여드립니다. 지금 이 상태라면 아래 검색창이 깔끔해 보입니다. 두 개의 검색창은 정상적으로 검색 기능을 합니다. 혹시 구글 블로그 스킨을 찾았는데, 검색창 하나가 마음에 들지 않는다면 이렇게 만들어버리면 되겠습니다.