Search Engine Custome for Blogger

Semakin susah saja mencari tutorial blogger gaya punya sob. Mungkin sudah mentok disitu, mundurnya para master tut's, dan setrilyun faktor-x lainnya :P Sehingga membuat kita harus lebih kreatif lagi membuat satu artikel supaya bisa update terus nih ;)) Mengangkat lagi mengenai search style sob. Tidak terhingga apa yang dapat kita lakukan pada sesi searchbox!
Google sendiri sudah memberikan kepada pemakai guna mengcustome sendiri search box yang kita miliki Google Custome Search. Basic serta cara tercepat mendapatkan google blog search Dashboard ► Design ► Add a Gadget ► Basics, pilih opsi Search Box.

Kalau sobat kepengen manual cara membuat search engine maka begini kode yang dibutuhkan...

<form action="http://NAMA-BLOGMU.blogspot.com/search" method="get">
<input name="q" size="20" type="text" style="background-color:#ffe;"/>
<input value="Search" type="submit" style="background-color:#f00;color:#fff;font-weight:bold;"/>
<form>

Sekarang bagaimana jika kita kasih sentuhan dikit dengan jQuery script menjadi

<form action="http://NAMA-BLOGMU.blogspot.com/search" method="get">
<label class="search moveable">
<input name="q" size="20" type="text" style="background-color:#ffe;"/>
</label>
<input value="Search" type="submit" style="background-color:#f00;color:#fff;font-weight:bold;"/>
<form>

<script type="text/javascript">
$('label.search input').focus(function() {
$('div.search').addClass('search-expanded');
$(this).animate({
width: 250
}, 400);
});
$('label.moveable input').blur(function() {
if (!$(this).val()) {
$(this).animate({
width: 150
}, 400, function() {
$('div.search').removeClass('search-expanded');
});
}
});
</script>

Maka nanti itu si kotaknya bisa memanjang & kembali lagi ke semula :D
Kita lanjutkan sob, Beben Koben si bloglang anu ganteng kalem tea mau berbagi salah satu artikel mengenai multiple search karya http://purplemoggy.blogspot.com/ yang blognya diseting "This blog is open to invited readers only" :-/

Masukin semua bumbu kedalam metode Add a Gadget ► HTML/Javascript

<script type='text/javascript'>
//<![CDATA[

/***********************************************
* made by PurpleMoggy :)
* http://purplemoggy.blogspot.com/
***********************************************/
var search_which_one = "pm-f-h";
function selectH() {
 document.getElementById('li-h').className = 'pm-search-selected';
 document.getElementById('li-g').className = 'pm-search-unselected';
 document.getElementById('li-b').className = 'pm-search-unselected';
 document.getElementById('li-t').className = 'pm-search-unselected';
 document.getElementById('pm-search-h').style.display = 'block';
 document.getElementById('pm-search-g').style.display = 'none';
 document.getElementById('pm-search-b').style.display = 'none';
 document.getElementById('pm-search-t').style.display = 'none';
 document.getElementById('pm-f-h').value = document.getElementById(search_which_one).value;
 search_which_one = "pm-f-h";
}
function selectG() {
 document.getElementById('li-h').className = 'pm-search-unselected';
 document.getElementById('li-g').className = 'pm-search-selected';
 document.getElementById('li-b').className = 'pm-search-unselected';
 document.getElementById('li-t').className = 'pm-search-unselected';
 document.getElementById('pm-search-h').style.display = 'none';
 document.getElementById('pm-search-g').style.display = 'block';
 document.getElementById('pm-search-b').style.display = 'none';
 document.getElementById('pm-search-t').style.display = 'none';
 document.getElementById('pm-f-g').value = document.getElementById(search_which_one).value;
 search_which_one = "pm-f-g";
}
function selectB() {
 document.getElementById('li-h').className = 'pm-search-unselected';
 document.getElementById('li-g').className = 'pm-search-unselected';
 document.getElementById('li-b').className = 'pm-search-selected';
 document.getElementById('li-t').className = 'pm-search-unselected';
 document.getElementById('pm-search-h').style.display = 'none';
 document.getElementById('pm-search-g').style.display = 'none';
 document.getElementById('pm-search-b').style.display = 'block';
 document.getElementById('pm-search-t').style.display = 'none';
 document.getElementById('pm-f-b').value = document.getElementById(search_which_one).value;
 search_which_one = "pm-f-b";
}
function selectT() {
 document.getElementById('li-h').className = 'pm-search-unselected';
 document.getElementById('li-g').className = 'pm-search-unselected';
 document.getElementById('li-b').className = 'pm-search-unselected';
 document.getElementById('li-t').className = 'pm-search-selected';
 document.getElementById('pm-search-h').style.display = 'none';
 document.getElementById('pm-search-g').style.display = 'none';
 document.getElementById('pm-search-b').style.display = 'none';
 document.getElementById('pm-search-t').style.display = 'block';
 document.getElementById('pm-f-t').value = document.getElementById(search_which_one).value;
 search_which_one = "pm-f-t";
}

//]]>
</script>


<style>
/** css for the search box */
div#pm-search ul { /* unordered list */
margin-top: 0;
margin-right: 0;
margin-left: 0px;
margin-bottom: 5px;
padding: 0;
}
div#pm-search li { /* each list element */
list-style-type: none; /* don't edit this */
display: inline; /* don't edit this */
cursor: pointer; /* don't edit this */
margin-top: 0;
margin-bottom: 0;
margin-right: 5px;
margin-left: 0px;
text-indent: 0px;
padding: 0;
}
div#pm-search form { /* the search form */
margin: 0;
padding: 0;
}
div#pm-search-h {
display: block; /* don't edit this */
}
div#pm-search-g,
div#pm-search-b,
div#pm-search-t {
display: none; /* don't edit this */
}
div#pm-search input { /* the textbox and submit button */
background-color: #EFEFEF;
border: 1px solid #555;
color: #000;
}
.pm-search-selected { /* which search service is currently selected */
color: #CC0000;
border-bottom: 1px solid #CC0000;
}
.pm-search-unselected { /* which search services are not selected */
color: #000;
border-bottom: 1px dotted #B7AFFF;
}
</style>

<div id="pm-search">
<ul>
<li id="li-h" class="pm-search-selected" onclick="selectH()">BLOG NAME</li><li id="li-g" class="pm-search-unselected" onclick="selectG()">Blogger</li><li id="li-b" class="pm-search-unselected" onclick="selectB()">Yahoo!</li><li id="li-t" class="pm-search-unselected" onclick="selectT()">Technorati</li>
</ul>
<div style="display: block;" id="pm-search-h">
<form action="http://NAMA-BLOG.blogspot.com/search" method="get">
<input id="pm-f-h" value="" name="q" size="30" type="text">
<input value="Search" type="submit">
</form>
</div>

<div style="display: none;" id="pm-search-g">
<form action="http://blogsearch.google.com/" method="get" target="top">
<input id="pm-f-g" value="" name="as_q" size="35" type="text">
<input value="Search" type="submit">
<input value="NAMA-BLOG.blogspot.com" name="bl_url" type="hidden">
</form>
</div>

<div style="display: none;" id="pm-search-b">
<form action="http://www.ysearchblog.com/" method="get" target="top">
<input id="pm-f-b" value="" name="s" size="40" type="text">
<input value="Search" type="submit">
<input value="NAMA-BLOG.blogspot.com" name="bl_url" type="hidden">
</form>
</div>

<div style="display: none;" id="pm-search-t">
<form action="http://www.technorati.com/search.php" method="post" target="top">
<input id="pm-f-t" name="s" size="45" type="text">
<input value="Search" type="submit">
<input value="searchlet" name="sub" type="hidden">
<input value="NAMA-BLOG.blogspot.com" name="from" type="hidden">
<input value="n" name="authority" type="hidden">
<input value="n" name="language" type="hidden">
</form>
</div>

Gantilah hurup yang ditebalin dengan link blog sobat. Tulisan berwarna seting sesuai dengan kebutuhan. Keempat search engine ini terhubungkan langsung dengan blog sobat. Jadi ketika melakukan pencarian, ya dari blog tercinta :x :)
Happy search engine \m/