Sabtu, 13 September 2008

Membuat Search Engine

membuat search engine di blog lebih menarik dengan background gambar dan tombol sumbit juga ada gambarnya, menurut kamu menarik gak sih search engine yang kaya begini... kalau kamu belum faham juga ni dibawah aku kasih contoh search engine yang menarik

Gimana? Dari gambar diatas kamu tertarik gak pengen buat search engine yang kaya gituan wkakaak pastinya penegen dunk orang menarik iya kan?

Iya itu adalah background karya aku sendiri dan nanti kamu juga bisa buat Backgroundnya sendiri dan juga tombol submit buatan kamu sendiri okey

langsung aja deh ke cara pembuatanya


1. Log in ke blogger dahulu kalau sudah masuk menu Layout kemudian masuk Edit HTML

2. Lalu taruh Code Dibawah diatas Code ]]></b:skin>


#searchform {
position:letf;
top: 20px;
right: 0px;
background: url(http://anas.ku93.googlepages.com/search-back.png) no-repeat right bottom;
height: 59px;
width: 210px;
}
#searchform #s{
background: #ffffff url(http://anas.ku93.googlepages.com/form-field-bg.gif) no-repeat ;
height: 17px;
width: 148px;
margin: 30px 5px 0px 10px;
padding: 3px 7px 2px 5px;
color: #999999;
border: none;
}
#searchform #searchsubmit {
background: url(http://anas.ku93.googlepages.com/searchbtnnk7.png) no-repeat left top;
height: 24px;
width: 24px;
border: none;
text-indent: -999%;
line-height: 1px;
margin-top: 6px;
}



3. Kemudian Simpan Template

4. Lalu langkah selanjutnta adalah masuk menu Layout ---> Page Elements

5. Pilih tempat yang mau dipasangi Search engine kemudian Add A Gadget

6. Lalu pilih HTML/JavaScript kemudian Taruh Code Dibawah Kedalamnya


<form id="searchform" action="/search" method="get">
<div>
<input ;} onfocus="if (this.value == " value="Search" type="text" id="s" onblur="if (this.value == " ) {this.value = search name="q"/>
<input id="searchsubmit" value="Go" type="submit"/>
</div>
</form>


7. Lalu Simpan dehh


Nah jika kamu ingin membuat karyamu sendiri silahkan ganti link backroundnya yahh dan atur penempatanya okey

http://anas.ku93.googlepages.com/search-back.gif ---> Ini adalah Link Backgroundya

http://i254.photobucket.com/albums/hh92/eblogtemplates/itheme/form-field-bg.gif -----> Ini Background Form

http://i254.photobucket.com/albums/hh92/eblogtemplates/itheme/searchbtnnk7.png ---> Ini Tombol Submitnya

Gimana trik aq... jadul tapi manjur kan wkakakakak okelah silahkan menjoba jangan lupa isi komentar yahh...........

BACKGROUND YANG BISA KAMU GUNAKAN


http://anas.ku93.googlepages.com/search-back.png


http://anas.ku93.googlepages.com/search-qwu.png

Tidak ada komentar:

Posting Komentar