검색창 만들기



블로거를 개설하고 스킨을 편집하고 즐거운 마음으로 컴퓨터를 가지고 놀며 시간 가는줄 모르며 살아가는 50중반의 중치 인생 블로그를 가지고 노는 재미도 좋아 설치형 블로그인 티스토리에 가입하고부터 웹페이지 만들기에 취미가 붙어 컴퓨터랑 아주 친해지는 바람에 컴퓨터 실력이 조금 늘어나는 기분 처음에는 스킨을 티스토리에서 제공하는 것만 쓰다가 남들과 같은 것이 식상해서 나만의 독특한 모양의 블로그를 만들어 보고싶어 스킨을 직접 편집해보기로 하여 지금의 녹색제국 블로그를 만들게 되었습니다.

 

블로그에 검색창을 달고 포털사이트처럼 네티즌들이 정보검색을 할 수 있게 종합 검색창도 달아 사용해보니 이것이 참 편리한 점이 많아요 한번의 검색어로 5대 포털의 검색 결과를 가져올 수 있어 정보를 찾는데는 이보다 편리한 검색창은 없다고 봅니다.

 

이 검색창의 결점은 사양이 낮은 브라우저는 문자가 깨져 나오는 것! 하지만 요즘은 브라우저들이 다 사양이 높아 익스플러 7이상이면 문제없이 구동 됩니다.

 

지금 이 블로거 상단에 있는 검색창은 어디에 달아도 이상 없이 검색을 할 수 있는 것으로

여러분의 블로그에 가져다 사용해도 좋을 것입니다. 소스는 공개용이니 아래의 소스를 복사하여 반듯시 메모장에 갔다 붙여넣고 다시 메모장에서 복사를 하여 사용하시기 바랍니다.

 

그냥 그대로 복사하여 사용하면 아무른 작동도 하지않고 문자로만 표현됩니다.

소스를 복사하였다면 이제 여러분의 블로그나 웹에 넣고싶은 위치에 코드를 삽입하면 됩니다. 웹은 자신이 만들었기 때문에 넣기가 싶지만 블로그는 좀 복잡한 점이 있습니다.

블로그 HTM 스킨편집에서 코드의 위치를 잘사펴보아야 실 수 없이 검색창을 달 수 있습니다. 성급하게 저장을 하지 말고 미리보기를 하여 이상없이 되었다면 저장을 하세요 함부로 저장을 하면 블로그 자체를 망가뜨릴 수 있습니다 주위를 요합니다.

 

[아래는 검색창 코드입니다 복사하여 메모장으로 가서 붙여넣고 다시 복사해서 사용하세요]

<table border="0" width="100%" cellspacing="0" cellpadding="0">

<tr>

<td width="32%"></td>

<td width="39%">

<div align="left">

<table border="0" width="164" height="40" bgcolor="#008000" cellspacing="0" cellpadding="0">

<tr>

<td width="533" height="40"><table border="0" width="463" height="40" cellspacing="0" cellpadding="0">

<tr>

<td width="5" height="40" bgcolor="#008000"></td>

<td width="457" height="40">

<form onsubmit="return doSearch()" method="post" name="searchforit">

 

<script language="javascript">

 

<!--

 

function addplus(items)

 

{

 

var plussed = "";

 

for (var t = 1; t<= items.length ; t++)

 

{

 

if (items.substring(t-1,t) == " ")

 

{ plussed+="+"; }

 

else

 

{ plussed+=items.substring(t-1,t); }

 

}

 

return plussed;

 

}

 

// Do the Search

 

function doSearch()

 

{

 

var words;

 

words = document.searchforit.query.value;

 

var searchitems;

 

searchitems=addplus(words);

 

var index;

 

// obtain the selectedIndex properties from the search engines option for

 

index = document.searchforit.service.selectedIndex;

 

if (index>= 0)

 

{

 

var site;

 

site = document.searchforit.service.options[index].value;

 

site+=searchitems;

 

if (notEmpty(searchitems))

 

{

 

//window.open("","mainWin");

 

window.open(site,"_blank");

 

//window.location=site;

 

}

 

}

 

else

 

{alert("검색 엔진을 선택하세요.");}

 

return false;

 

}

 

// Check for empty contents in search searchitems

 

function notEmpty(word)

 

{

 

if (word == "" || word == null)

 

{

 

self.status="ENTER SEARCH searchitems";

 

alert("[알림] 검색어를 입력하세요.");

 

document.searchforit.query.focus();

 

return false;

 

}

 

else

 

{

 

self.status = word + "을(를) 찾고 있습니다.";

 

return true;

 

}

 

}

 

function clearIt()

 

{

 

document.searchforit.query.value="";

 

document.searchforit.query.focus();

 

}

 

function FocusOn() {

 

document.searchforit.query.focus();

 

return;

 

}

 

//-->

 

</script>

 

<table width="451" cellspacing="0" cellpadding="0">

 

<td bgColor="#ffffff" width="374" align="middle"><span style="FONT-SIZE: 9pt">

 

<select style="BACKGROUND-COLOR: #ffffff; HEIGHT: 20px; FONT-SIZE: 9pt" name="service">

 

<option selected value="http://search.daum.net/cgi-bin/nsp/search.cgi?w=tot&amp;q=">통합</option>

 

<option value="http://search.naver.com/search.naver?query=">네이버</option>

 

<option value="http://kr.search.yahoo.com/search?fr=kr-front_sb&KEY=&p=">야후</option>

 

<option value="http://esearch.ilikeclick.com/ilikeclick/?ec=20001414&amp;MD=P&amp;TT=%BC%D5%BD%AC%BF%EE+%B0%CB%BB%F6+-+%C0%CC%C1%F6%BC%AD%C4%A1&amp;HK=&amp;AT=Y&amp;PL=10&amp;TP=2&amp;BT=2&amp;query=">이지서치</option>

 

<option value="http://www.google.co.kr/search?hl=ko&amp;q=">구글</option>

 

<option value="http://search.nate.com/search/all.html?s=&amp;q=">NATE</option>

 

<option value="http://search.daum.net/cgi-bin/nsp/search.cgi?w=tot&amp;q=">다음</option>

 

<option value="http://search.paran.com/search/index.php?Query=">파란</option>

 

</select> </span><input style="position: relative; background-color: #ffffff; ime-mode: active; width: 280px; height: 20px; color: #000000; font-size: 12px; border: 1px solid #ffffff; padding-left: 6px; padding-top: 8px" size="42" name="query"></td>

 

<td width="68" bgcolor="#00bd0">

<p align="center">&nbsp;<a onclick="javascript:doSearch()" href="#"><img border="0" align="absMiddle" src="http://cfs.tistory.com/custom/blog/50/509291/skin/images/gogo-t.gif?=7873725320.2472354663076075"></a></p>

</td>

 

</form>

 

</table>

</td>

</tr>

</table></td>

</tr>

</table>

</div>

</td>

<td width="32%"></td>

</tr>

</table>

이것으로 검색창 달기는 끝입니다.