Membuat Kotak Search 4 in 1

• J-GazaWidget
• Kirim ke teman
• Print this page
• Facebook
• Gbookmarks
• 3 comments

Ponari Bukan Dukun Cilik

Waktu blogwalking ke blognya suhu Jaloe, saya tertarik melihat kotak searchnya. Mantab bos, 4 in 1 ! Apaan 4 in 1 ? itu lho kotak search yang ga hanya buat ngesearch di blog kita atau di Google tapi juga di blogsearchnya Google dan blogsearchnya Technorati seperti yang saya pakai di blog ini

Kebetulan template Catalognya di share di blog templatenya, jadi bagi saudara yang ingin mendownload silahkan kesana ya. Tertarik ingin memasang kotak search 4 in 1 seperti milik saya ? Berikut langkah - langkahnya :

1. Copy skrip ini

<!-- widget search -->
    <div id='pm-search'><div align='center'>
<ul>
<li id="li-h" class="pm-search-selected" onclick="selectH()">here</li><li id="li-g" class="pm-search-unselected" onclick="selectG()">google</li><li id="li-b" class="pm-search-unselected" onclick="selectB()">blogger</li><li id="li-t" class="pm-search-unselected" onclick="selectT()">technorati</li>
</ul>
<div id="pm-search-h">
<form action="http://ponarijombang.blogspot.com/search" method="get">
<input id="pm-f-h" value="" name="q" size="15" type="text"/>
<input value="Search" type="submit"/>
</form>
</div>
<div id="pm-search-g">
<form action="http://blogsearch.google.com/blogsearch" method="get">
<input id="pm-f-g" value="" name="as_q" size="15" type="text"/>
<input value="Search" type="submit"/>
<input value="http://ponarijombang.blogspot.com" name="bl_url" type="hidden"/>
</form>
</div>
<div id="pm-search-b">
<form action="http://search.blogger.com/" method="get">
<input id="pm-f-b" value="" name="as_q" size="15" type="text"/>
<input value="Search" type="submit"/>
<input value="http://ponarijombang.blogspot.com" name="bl_url" type="hidden"/>
</form>
</div>
<div id="pm-search-t">
<form action="http://www.technorati.com/search.php" method="post">
<input id="pm-f-t" maxlength="255" name="s" size="15" type="text"/>
<input value="Search" type="submit"/>
<input value="searchlet" name="sub" type="hidden"/>
<input value="http://ponarijombang.blogspot.com" name="from" type="hidden"/>
<input value="n" name="authority" type="hidden"/>
<input value="n" name="language" type="hidden"/>
</form>
</div>
</div>
</div>

INGAT : GANTI ALAMAT BLOG SAYA DENGAN ALAMAT BLOG SOBAT

Untuk memasukkannya skrip tadi ada dua cara :

Cara pertama : Masuk ke Layout -> Page Elements -> Add a Page Element pilih yang HTML dan Javascript, Pastekan disitu

Cara kedua : Masuk ke Layout -> Edit HTML ( Centang Expand Template Widgatenya ) -> Cari Kode <div id='content-wrapper'> -> Pastekan diatas kode tadi

Cara 1 dan 2 sama saja

2. Langkah berikutnya, copy script ini :

/** 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: transparent;
  border: 1px dotted #999;
  color: #999;
}
.pm-search-selected { /* which search service is currently selected */
  color: #999;
  border-bottom: 1px dotted #999;
}
.pm-search-unselected { /* which search services are not selected */
  color: #777;
  border-bottom: 1px dotted #777;
}

Masuk ke Layout -> Edit HTML -> Cari Kode ]]></b:skin> -> Pastekan diatas kode tadi

3. Langkah Terakhir, copy script ini

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

/***********************************************
* Javascript functions for the search box
* 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>

Masuk ke Layout -> Edit HTML -> Cari Kode </head> -> Pastekan diatas kode tadi

TOLONG JANGAN HAPUS SCRIPT INI :

/***********************************************
* Javascript functions for the search box
* made by PurpleMoggy :)
* http://purplemoggy.blogspot.com/
***********************************************/

karena itu merupakan hak cipta milik http://purplemoggy.blogspot.com

Thanks to : Catalog - Tutorial dan PurpleMoggy

Related Posts by Categories