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

Posted by Blozk
2018.05.23 20:17 INFORMATION


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

 - 검색창: 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}


이 댓글을 비밀 댓글로
    • honna
    • 2018.05.25 11:41 신고
    좋은정보 감사하고 잘보고 갑니다.!
    • @honna 앞으로도 좋은정보 많이 올리도록 하겠습니다. 감사합니다.

티스토리 툴바