PONARI UNOFFICIAL BLOG

Memasang Widget Translator

2009-03-11T02:23:00.010+07:00

Translator sangat penting keberadaannya pada sebuah blog, karena mempermudah pengunjung dari negara lain untuk ikut membaca content blog kita. Sejak lahirnya versi beta Google Translate makin beragam saja layout widget translator pada blogger. Alasannya jelas selain untuk mempermudah pengunjung juga untuk mempercantik tampilan blog.

Widget translator yang akan Ponari share disini adalah buatan Hoctro yang demonya bisa dilihat disini. Cara membuatnya adalah...

1. Login ke account blogger

2. Menuju ke Tata Letak -> Edit HTML

3. CENTANG Expand Template Widget

4. Cari kode yang mirip dengan ini

<b:section class='sidebar' id='sidebar' preferred='yes'>

5. Jika sudah ketemu kopi kode dibawah ini dan pastekan di bawah kode tadi


<b:widget id='HTML200' locked='false' title='Translate to your Language' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<form action='http://translate.google.com/translate_c?'>
<table id='webtb'>
<tr><td> <select name='tl' style='width: 15em;'>
<option value='ar'>Arabic</option>
<option value='bg'>Bulgarian</option>
<option value='ca'>Catalan</option>
<option value='zh-cn'>Chinese (Simplified)</option>
<option value='zh-tw'>Chinese (Traditional)</option>
<option value='hr'>Croatian</option>
<option value='cs'>Czech</option>
<option value='da'>Danish</option>
<option value='nl'>Dutch</option>
<option value='en'>English</option>
<option value='tl'>Filipino</option>
<option value='fi'>Finnish</option>
<option value='fr'>French</option>
<option value='de'>German</option>
<option value='el'>Greek</option>
<option value='iw'>Hebrew</option>
<option value='hi'>Hindi</option>
<option value='id'>Indonesia</option>
<option value='it'>Italian</option>
<option value='ja'>Japanese</option>
<option value='ko'>Korean</option>
<option value='lv'>Latvian</option>
<option value='lt'>Lithuanian</option>
<option value='no'>Norwegian</option>
<option value='pl'>Polish</option>
<option value='pt'>Portuguese</option>
<option value='ro'>Romanian</option>
<option value='ru'>Russian</option>
<option value='sr'>Serbian</option>
<option value='sk'>Slovak</option>
<option value='sl'>Slovenian</option>
<option value='es'>Spanish</option>
<option value='sv'>Swedish</option>
<option value='uk'>Ukrainian</option>
<option selected='vi' value='vi'>Vietnamese</option>
</select>
<input expr:value='data:blog.url' id='url' name='u' type='hidden'/>
<input name='sl' type='hidden' value='id'/>
<input name='hl' type='hidden' value='id'/>
<input name='ie' type='hidden' value='UTF-8'/>
<input style='width: auto;' type='submit' value='Go'/>
</td></tr></table></form>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

6. Save Template

Ganti value id pada kode <input name='sl' type='hidden' value='id'/> jika bahasa dasar pada blog anda memakai bahasa Indonesia

Salam manis dan damai dari Jombang, Ponari

Cara Meringkas Label Dengan Scroll

2009-03-10T04:24:00.004+07:00

Setelah dalam postingan sebelumnya Ponari mencoba "mengakali" tampilan Label dengan cara menghapus angka label, tutorial kali ini kembali bermain - main dengan Label. Label kali ini akan dipermak seperti "Blogroll Auto Scroll", baca disini . Ternyata auto scroll pada Blogroll ( Linklist ) juga bisa diterapkan pada label, ga percaya ? ayo cepetan disimak...

1. Seperti biasa, kita login ke account blogger masing - masing

2. Seperti biasa juga kita menuju ke Tata Letak -> Edit HTML

3. Jangan lupa "CENTANG" Expand Template Widget

4. Cari Kode Yang MIRIP dengan ini :

<b:widget id='Label1' locked='false' title='Label' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>

Perhatikan tulisan Label yang berwarna MERAH, itu adalah nama label blog Ponari. Jika anda menamai label anda dengan KATEGORI, maka tulisan yang berwarna merah akan bertuliskan KATEGORI

5. Jika sudah ketemu, Copy kode dibawah ini dan letakkan di bawah kode tadi

<div style='width:100%; height:100px; overflow:auto;'>

6. Setelah itu, cari kode ini

<data:label.name/>
</a>
</b:if>
<span dir='ltr'/>
</li>
</b:loop>
</ul>

7. Tambahkan kode </div> , di bawah kode tadi

8. Save Template

Hasilnya akan terlihat seperti blog ini, lumayan kan buat meringkas banyaknya tabel kita :)

Menghapus Angka Pada Label Dan Arsip Blog

2009-03-10T02:04:00.012+07:00

Sebagian orang pasti merasa risih dengan adanya angka pada Label dan Arsip Blog. Padahal angka tersebut menunjukkan jumlah posting blog tentang suatu pokok bahasan dan produktivitas kita dalam posting, bahkan karena dianggap tidak sedap dipandang mata sebagian orang rela tidak menyertakan adanya label dan arsip blog

Padahal kalau alasannya hanya tidak sedap dipandang mata, itu bisa diakali kok dengan cara Menghapus Angka Pada Label dan Arsip blog. Langsung aja deh Ponari akan berbagi triknya...

1. Login dulu ke akun blogger kita

2. Lalu masuk ke menu Layout -> Edit HTML -> Centang Expand Template Widget

3. Untuk "MENGHAPUS ANGKA PADA LABEL", cari kode ini :

(<data:label.count/>)

Kemudian HAPUS

4. Sedangkan untuk "MENGHAPUS ANGKA PADA ARSIP BLOG", cari kode ini :

(<data:i.post-count/>)

Kemudian HAPUS

5. Simpan Template

Selesai deh, mudah kan ? sekarang angka yang tidak sedap dipandang mata itupun pergi entah kemana. Baca juga tutorial Cara Membuat Arsip Blog Ala Kalender sebagai alternatif untuk mempercantik Arsip Blog.

Salam manis dan damai dari Jombang, Ponari

Mendaftarkan Blog Ke Google

2009-03-02T00:13:00.015+07:00

Cara promosi blog memang bermacam - macam mulai dari bertukar link, blogwalking melalui shoutbox hingga " bermesraan " dengan SEO ( Search Engine Optimazion ). Untuk yang terakhir banyak yang mengatakan bahwa promosi dengan SEO itu seni dan sulit, Ponari sendiri tidak mengerti apa yang sebenarnya diinginkan oleh Bapak Google agar bisa menduduki peringkat satu di rumahnya.

Tapi bagaimana kita bisa bermesraan dengan Google jika blog kita belum kita daftarkan di Search Engine Google ? Boro - boro bermain SEO dengan memainkan keyword atau kata kunci jebakan, lha wong blog kita kedaftar aja belum ? Sebenarnya sudah banyak blog tutorial yang membahas tentang ini, tapi Ponari ingin membahas lagi yah itung - itung buat bahan update :)

Langsung aja yak...

1. Buka google webmaster tools kemudian daftar mengunakan gmail account kita.

2. Setelah kita login maka akan terlihat gambar seperti dibawah ini kan ?

masukkan alamat blog sobat tanpa diawali dengan http:// misalnya alamat blog Ponari adalah http://ponarijombang.blogspot.com maka Ponari cukup menuliskan ponarijombang.blogspot.com pada kotak Add Site, lalu sobat klik tombol OK.

3. Lalu Klik pada tulisan Verify Your Site. ( lihat gambar )

4. Pilih Add a Meta Tag pada box

5. Kemudian pilih semua tulisan <meta name="verify-v1"...dst lalu copy

6. Lalu buka blog kita pada halaman Template -> buka tab Edit Html. pastekan dan simpan meta name verifikasi yang tadi kita copy setelah tag : <title><data:blog.pageTitle/></title>.

tambahkan kode ini <meta name="robots" content="INDEX, FOLLOW"/> dibawah kode meta verifikasi tadi -> Simpan Template

7. Kembali google webmaster tool. klik tombol Verify, untuk mengkorfirmasi pendaftaran. Jika berhasil akan menampilkan you have sucessfully verified.

8. Masih di google webmaster tool klik link tulisan Dashboard setelah terbuka halaman Dashboard, klik tulisan Add di samping kanan ( atau di bawah kolom Sitemap )

9. Setelah masuk Add Sitemap dalam kotak pilih Add general web sitemap. setelah itu isi kotak kosong di samping kanan alamat blog dengan dua pilihan apakah type rss.xml atau atom.xml -> klik Add General Web Sitemap

10. Proses pendaftaran di Google webmaster tool telah selesai. Daftarkan juga blog sobat di http://www.google.com/addurl/ dan blogsearch.google.com disana sobat hanya perlu memasukkan alamat url blog sobat.

Selesai, kita tinggal menunggu Google mencrawl blog kita. Salam manis dan damai dari Jombang :)

Cara Meringkas Blogroll ( Linklist ) dengan Scroll

2009-02-20T19:48:00.004+07:00

Apa jadinya jika link di blog kita sudah sangat banyak dan menjamur ? begitu sesak blog kita dan tidak sedap dipandang bukan ? untuk mengakali linklist sebenarnya ada banyak macam cara, salah satunya memakai teknik expand collapse widget seperti di blog ini. Atau bisa saja menggunakan teknik marquee dan masih banyak lainnya.

Tutorial kali ini, saya akan mencoba memodif linklist dengan cara memasangkan scroll.

Ingin tahu cara membuatnya ? ikuti tutorial ini satu persatu :

1. Login ke account Blogger anda, kemudian pilih menu Layout pada blog anda.

2. Pilih Page Elements -> Add Gadget. Lalu click tanda + di samping tulisan Link List -> SAVE

3. Masih di menu Layout lalu pilih tab Edit HTML -> Centang pada Expand Widget Templates ( sebelumnya backup dulu template anda )

4. Cari script yang mirip dengan script dibawah ini :

<b:widget id='LinkList1' locked='false' title='BlogRoll' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>

Jika sudah ketemu, Copy script ini dan letakkan di bawah script tadi

<div style='width:100%; height:100px; overflow:auto;'>

Lau cari juga script berikut

Lalu tambahkan kode ini di bawahnya :

</div>

5. Save Template dan selesai

Akhirnya selesai deh, untuk contoh hasil tutorial tadi anda bisa lihat disini

Membuat Arsip Blog Ala Kalender

2009-02-11T10:11:00.006+07:00

Seperti biasa, pagi tadi saya blogwalking ke purplemoggy tempat saya belajar ~~ngerusak~~ blog. Hari ini saya mendapat ilmu baru yakni membuat Arsip Blog Model Kalender. Contohnya seperti dalam blog ini disidebar sebelah kanan

Meskipun sobat semua mungkin sudah banyak yang tahu tentang tutorial ini, saya tetap ingin mempublish lagi ~~agar tidak lupa kalau membuat blog baru~~. Cara Membuatnya :

1. Copy script ini

<script type="text/javascript" src="http://yui.yahooapis.com/2.2.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.0/build/calendar/calendar-min.js"></script> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.0/build/calendar/assets/calendar.css"/>

Masuk ke Template -> Edit HTML -> cari kode </head> -> pastekan diatas kode tadi

2. Langkah kedua, copy script ini :

<script type="text/javascript">
//<![CDATA[
 /*
  Created by: PurpleMoggy
  http://purplemoggy.blogspot.com
 */
 
 var _yourBlogUrl = "http://ponarijombang.blogspot.com"; //edit this
 var _yourBlogTimeZone = "+07:00";
 
 _yourBlogTimeZone = encodeURIComponent(_yourBlogTimeZone);
 
 var _dayTitles = new Array("","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","");

 YAHOO.namespace("example.calendar");
 
 function cal1Init() {
  YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
  YAHOO.example.calendar.cal1.addMonthRenderer(1, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
  YAHOO.example.calendar.cal1.addMonthRenderer(2, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
  YAHOO.example.calendar.cal1.addMonthRenderer(3, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
  YAHOO.example.calendar.cal1.addMonthRenderer(4, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
  YAHOO.example.calendar.cal1.addMonthRenderer(5, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
  YAHOO.example.calendar.cal1.addMonthRenderer(6, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
  YAHOO.example.calendar.cal1.addMonthRenderer(7, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
  YAHOO.example.calendar.cal1.addMonthRenderer(8, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
  YAHOO.example.calendar.cal1.addMonthRenderer(9, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
  YAHOO.example.calendar.cal1.addMonthRenderer(10, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
  YAHOO.example.calendar.cal1.addMonthRenderer(11, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
  YAHOO.example.calendar.cal1.addMonthRenderer(12, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
  YAHOO.example.calendar.cal1.selectEvent.subscribe(mySelectHandler, YAHOO.example.calendar.cal1, true); 
  YAHOO.example.calendar.cal1.changePageEvent.subscribe(myChangePageHandler, YAHOO.example.calendar.cal1, true);
  YAHOO.example.calendar.cal1.renderEvent.subscribe(syncMonthYear);
  YAHOO.example.calendar.cal1.render();
  myChangePageHandler();
 };
 
 
 var myChangePageHandler = function(type,args,obj) {
  var month = YAHOO.example.calendar.cal1.cfg.getProperty("pagedate").getMonth() + 1;
  if (month.toString().length == 1) {
   month = "0" + month;
  }
  var year = YAHOO.example.calendar.cal1.cfg.getProperty("pagedate").getFullYear();
  
  document.getElementById("cal1Titles").innerHTML = "";
  _dayTitles = new Array("","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","");
  
  checkPostsForMonth(month, year);
 };
 
 function checkPostsForMonth(month,year) {
  document.getElementById("cal1loadimg").style.display = "block";
 
  var script = document.createElement("script");
  script.setAttribute("type", "text/javascript");
  var theUrl = _yourBlogUrl +"/feeds/posts/summary?alt=json-in-script&callback=checkPostsCallback&published-min=" + year + "-" + month + "-01T00%3A00%3A00" + _yourBlogTimeZone + "&published-max=" + year + "-" + month + "-31T23%3A59%3A59" + _yourBlogTimeZone + "&max-results=100";
  script.setAttribute("src", theUrl);
  document.documentElement.firstChild.appendChild(script);
 };
 
 function checkPostsCallback(json) {
 
  if (json.feed.entry) {
   for(i = 0; i < json.feed.entry.length; i++) {
    var month = json.feed.entry[i].published.$t.substr(5,2);
    var year = json.feed.entry[i].published.$t.substr(0,4);
    var day = json.feed.entry[i].published.$t.substr(8,2);
    var date = month + "/" + day + "/" + year;
    var href = json.feed.entry[i].link[0].href;
    var title = json.feed.entry[i].title.$t;
    
    if (day.substr(0,1) == "0") {
     day = day.substr(1);
    }
    
    document.getElementById("cal1Titles").innerHTML += "<li><a href='" + href + "'>" + title + "</a>";
    _dayTitles[day] += "<li><a href='" + href + "'>" + title + "</a>";
   
    YAHOO.example.calendar.cal1.addRenderer(date, myCustomRenderer);

   }
   YAHOO.example.calendar.cal1.render();
  }
  
  document.getElementById("cal1loadimg").style.display = "none";

 };
 
 
 function showDayTitles(day) {
  document.getElementById("cal1Titles").innerHTML = _dayTitles[day];
 }
 
 
 var myCustomRenderer = function(workingDate, cell) {
 
  var day = workingDate.toString().substr(8,2);
  if (day.substr(0,1) == "0") {
   day = day.substr(1);
  }
 
 
  cell.innerHTML = '<div onmouseover="showDayTitles(' + day + ');"><a href="javascript:void(null);" >' + YAHOO.example.calendar.cal1.buildDayLabel(workingDate) + "</a></div>";
  YAHOO.util.Dom.addClass(cell, YAHOO.example.calendar.cal1.Style.CSS_CELL_SELECTABLE);
  YAHOO.util.Dom.addClass(cell, YAHOO.example.calendar.cal1.Style.CSS_CELL_HIGHLIGHT1);
  return YAHOO.widget.Calendar.STOP_RENDER; 
  
  
 }
 
 var mySelectHandler = function(type,args,obj) {
  var dates = args[0];
  var date = dates[0];
  var year = date[0];
  var month = date[1];
  if (month.toString().length == 1) {
   month = "0" + month;
  }
  var day = date[2];
  
  var element = YAHOO.util.Dom.getElementsByClassName("d" + day, "td", "cal1Container")[0];
  
  if (day.toString().length == 1) {
   day = "0" + day;
  }
  
  if (element.className.indexOf("highlight1") != -1) {
   window.location = _yourBlogUrl + "/search?updated-min=" + year + "-" + month + "-" + day + "T00%3A00%3A00" + _yourBlogTimeZone + "&updated-max=" + year + "-" + month + "-" + day + "T23%3A59%3A59" + _yourBlogTimeZone;
  }

 };
 
 var changeDate = function() {
  YAHOO.example.calendar.cal1.setMonth(parseInt(YAHOO.util.Dom.get("cal1monthselect").value));
  YAHOO.example.calendar.cal1.setYear(parseInt(YAHOO.util.Dom.get("cal1yearselect").value));
     YAHOO.example.calendar.cal1.render(); 
     myChangePageHandler();
 }
 
 var syncMonthYear = function(type) { 
  YAHOO.util.Dom.get("cal1monthselect").value = parseInt(YAHOO.example.calendar.cal1.cfg.getProperty("pagedate").getMonth());
  
  var fullYear = parseInt(YAHOO.example.calendar.cal1.cfg.getProperty("pagedate").getFullYear());
  
  var isYearFound = false;
  var i = 0;
  while(i < document.getElementById("cal1yearselect").options.length && !isYearFound) {
   if (document.getElementById("cal1yearselect").options[i].value == fullYear) {
    isYearFound = true;
   }
   i++;
  }
  if (!isYearFound) {
   var option = document.createElement("option");
   option.setAttribute("value", fullYear);
   var text = document.createTextNode(fullYear);
   option.appendChild(text);
   document.getElementById("cal1yearselect").appendChild(option);
  }
  
     YAHOO.util.Dom.get("cal1yearselect").value = fullYear; 
 };
 
 YAHOO.util.Event.addListener(window, "load", cal1Init);
 YAHOO.util.Event.addListener("cal1dateselect", "click", changeDate);
//]]>

</script>

Ganti alamat blog saya menjadi alamat blog sobat, tapi jangan ganti alamat blog purplemoggy

Masuk ke Template -> Edit HTML -> cari kode <div id='content-wrapper'> -> pastekan diatas kode tadi -> Simpan

3. Terakhir, Copy script ini

<div id="cal1wrapper">

<div id="cal1select">

<select name="cal1monthselect" id="cal1monthselect">
 <option value="0">January</option>
 <option value="1">February</option>

 <option value="2">March</option>
 <option value="3">April</option>
 <option value="4">May</option>
 <option value="5">June</option>

 <option value="6">July</option>
 <option value="7">August</option>
 <option value="8">September</option>
 <option value="9">October</option>

 <option value="10">November</option>
 <option value="11">December</option>
</select>
<select name="cal1yearselect" id="cal1yearselect">

 <option value="2009">2009</option>
 <option value="2010">2010</option>
 <option value="2011">2011</option>

 <option value="2012">2012</option>
 <option value="2013">2013</option>
 <option value="2014">2014</option>
 <option value="2015">2015</option>

 <option value="2016">2016</option>
 <option value="2017">2017</option>
 <option value="2018">2018</option>
 <option value="2019">2019</option>

</select>
<input type="button" value="-->" id="cal1dateselect"/>

</div>

<div id="cal1Container"><img src="http://img239.imageshack.us/img239/9057/40lf8.gif" style="vertical-align:middle;"/> Loading...</div>
<div style="clear:both;"></div>

<div id="calbackloadimg">
 <pre id="cal1loadimg" style="display:none;"><img src="http://img239.imageshack.us/img239/9057/40lf8.gif" style="vertical-align:middle;"/> Loading...</pre>
 <pre id="cal1Titles"></pre>
</div>

</div>

Masuk ke Template -> Page Elements dan tambahkan HTML/Javascript baru -> Pastekan disitu -> Simpan

Selesai dan jadilah Blog Archive versi Kalender

Membuat Kotak Search 4 in 1

2009-02-10T16:57:00.010+07:00

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