시작페이지 만들기



사람들은 즐거움을 찾는 것도 여러 가지로 삼습니다.

개인 홈 페이지를 만들어 놓고 보고 즐기는 사람들이 있는데 이분들은 자신의 홈페이지를 여러 사람들이 사용해주기를 바라고 있는 사람들 중에도 그 욕구가 남다른 사람들입니다.

친구나 친지들이 자신의 사이트를 어쩌다가 들어가기는 하나 1회성으로 그치고 말아 홈피 주인은 매우 서운하지요 그래서 자신의 홈페이지를 시작페이지로 설정 하게 하려고 합니다.

일일이 찾아다니면서 시작페이지로 만들어 놓을 수 는 없는지라 포털사이트처럼 한번 클릭만으로 시작페이지로 설정되는 기술이 필요한 것을 느낄 것입니다.

 

하지만 내 사이트를 친구들이 시작페이지로 사용하는 데는 무리가 있지요 왜 그러냐고 하면

시작 페이지로 사용하는 사이트는 검색기능도 같이 있어야 가능합니다. 검색 기능도 없는 것을 시작페이지로 삼으라고 하면 억지소리입니다. 시작페이지 기능은 웹 검색에 있는데

검색창도 없는 사이트를 시작페이지로 하면은 얼마나 불편하겠습니까.

 

그래서 그분들을 위하여 제가 알고 있는 방법을 제 블로거에 게재하여 블로그 방문자 여러분들이 하나라도 얻어가는 소득이 있어야 되지 않겠나 싶어 알고있는 스크립트를 소개하려고 합니다.

 

[먼저] 시작페이지 만드는 코드부터 설명하고 아래에 검색창코드까지 설명해드리겠습니다.

 

시작페이지 만드는 코드입니다

<a style="CURSOR: pointer" onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://내사이트주소');"><img alt="##### 를 시작페이지로" src="이미지가 있는 주소/이미지명.확장자" border="0" width="34" height="28"></a>

 

위의 코드소스는 네이버의 시작페이지 만드는 소스를 바탕으로 만든 것입니다. #### 를 지우고 자신의 홈페이지 이름으로 하시면되고 그리고 이미지가있는주소는 사용할 이미지 경로를 말합니다.

 

이미지 명은 이미지이름이 daoel 이면 daoel 학장장자는 jpg면 jpg 로하면되고 gif는 gif로해야합니다. 예를 들어 이미지가 daoel.jpg 이면 이렇게 내사이트주소내에있는 이미지라면

 

src="내사이트 주소/폴드명/daoel.jpg 로 하면 됩니다.

[예제]

<a style="CURSOR: pointer" onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://g-korea.tistory.com');"><img alt="g-korea.tstory.com을 시작페이지로" src="https://t1.daumcdn.net/cfile/tistory/131CF8204CDCAB4704" border="0" width="140" height="15"></a>

 

[주위] 위에있는 소스를 드래그하여 복사하여 받듯시 메모장으로 가서 붇여 넣기 하시고 그기 메모장에서 다시 드래그하여 복사하여 사용해야 정상적인 코드가 완성됩니다.

 

그러지 않고 여기서바로 복사한 것을 사용하시면 아무 기능도 없는 문자나부랭이에 지나지 않습니다.

 

[다음은 검색창소스입니다. 이검색창 소스도 위에 코드와 같은 방법으로 사용하시면 됩니다.

멀티검색창 소스라고 이검색창은 5대 포털의 검색결과를 불러오는 기능이 있어 아주 편리합니다.

 

 

[검색창소스]

<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="600">

<td bgColor="#ffffff" width="521" align="middle"><span style="FONT-SIZE: 9pt">&nbsp;&nbsp;&nbsp;&nbsp;

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

<option selected value="http://search.naver.com/search.naver?query=">통합</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: 400px; height: 20px; color: #000000; font-size: 12px; border: 5px solid #006f00; padding-left: 6px; padding-top: 8px" size="42" name="query"></td>

<td width="68" bgcolor="#FFFFFF"><a onclick="javascript:doSearch()" href="#"><img border="0" align="absMiddle" src="http://cfs16.tistory.com/image/36/tistory/2010/05/06/03/48/4be1bd87c1c92" width="65" height="40"></a></td>

</form>

여기 까지가 소스입니다.

 

소스 중에 이미지 주소는 여러분 것으로 바꾸어주세요!

색상도 여러분 취향따라 바꾸어 주시면 됩니다 #006f00은 녹색계열입니다 이코드의 숫자나 문자를 바꾸면 색상이 바꾸어지는 것입니다.

 

이들 코드를 html 연습장같은 곳에서 시험해보시고 여러분의 사이트 소스에 삽입하여 사용하시면 되겠습니다. 유용한 정보가 되었으면 좋겠습니다.