[티스토리] 구글, 네이버 검색창(+테두리) 삽입

티스토리 구글, 네이버 검색창 삽입방법

 - 검색창: html 코드, 테두리 변경: css 코드

 본 블로그 사이드바에는 자주이용하는 구글, 네이버 검색창이 삽입되어 있다.

블로그 전용 검색창이 아닌 일반검색창이다.

# 검색창 삽입방법

 1. 첨부파일 다운로드 및 압축 해제

다운로드> 구글,네이버 로고파일:  Site_Logo.zip

 2. 티스토리 관리자모드의 '꾸미기' -> '스킨편집' -> 우측상단의 'html 편집' -> '파일업로드' -> '+추가' 순서대로 클릭 후 '1'에서 압축해제한 구글/네이버 로고 업로드

 

 3. 업로드 된 파일 우클릭 '링크 주소 복사' 후 메모장 등에 저장

 4. 티스토리 관리자모드의 '꾸미기' -> '사이드바' -> 'HTML 배너출력 추가' -> 'HTML 배너추가 편집' 순서대로 클릭

 5. 원하는 이름입력 후 HTML 소스에 이미지 아래 코드 입력

HTML 코드

다운로드> 구글네이버_검색창.txt

<!--구글검색창--> <center> <img src="3.에서 저장한 구글 이미지 링크 주소" Width=220 > <FORM name=google_search action=http://www.google.co.kr/search method=get> <INPUT type="text" class="search_google" size=22 height=10 placeholder="검색은 여기서 하세요." name=query>  <INPUT type='submit' value=' 검색 '> </FORM> <!--구글검색창--> <br> <!--네이버검색창--> <img src="3.에서 저장한 구글 이미지 링크 주소" width=220> <FORM name='form' method='get' action='https://search.naver.com/search.naver'> <INPUT type='hidden' name='ie' value='UTF-8'> <INPUT type='text' class="search_naver" size=22  placeholder="검색은 여기서 하세요." name=query> <INPUT type='submit' value=' 검색 '> </FORM> </center> <!--네이버검색창--> <br>

# 검색창 테두리 삽입방법

 1. 티스토리 관리자모드의 '꾸미기' -> '스킨편집' -> 우측상단의 'html 편집' -> 'CSS' 하단에 이미지 아래 코드 입력

CSS 코드

다운로드> 구글네이버_검색창_테두리.txt

.search_google{border:solid 3px #4285f4;font-size:1.0em} .search_naver{border:solid 3px #62bb46;font-size:1.0em}