Cara Membuat Google Search Keren Di Blog

 Bagaimana Cara Membuat Google search Di Blog?Lalu Bagaimana Memasang Kolom pencarian/Search Box Google Itu Sendiri? Pada Kesempatan Ini Blog Facewoman Akan Share Papan Pencarian Blog Facewoman Yang Terdahulu.Karena Tepatnya pada hari ini Vitur Papan Pencarian Blog Facewoman sudah Kami ganti dengan Tampilan Yang Terbaru.Untuk tampilan yang terbaru Ini tergolong manggunakan Background Image,Tidak Seperti Pencarian Facewoman Yang terdahulu yang senderung menggunakan Backgroud CSS.Lalu apa Kelebihan Pencarian Yang sekarang di banding dengan pencarian Yang Terdahulu? Jawabannya : KLIK DISINI.

Hasil screensoot paling pencarian facewoman

Jika anda Tertarik untuk membuatnya Ikuti langkah demi langkah di bawah ini :

1.Pertama - tama Login Blogger.
2.Langkah Kedua Dashboard - Template - Edit HTML - Centang Expand Template Widget - Lalu Cari Kode ]]></b:skin> Untuk mempercepat Proses Pencarian Kode Gunakan Ctrl + F lalu Masukkan Kode ]]></b:skin> Jika sudah anda ketemukan Kemudian Letakkan Kode Di bawah Ini Tepat Di atas Kode ]]></b:skin> :

.menupic3{background:#fff;width:970px;margin:0 auto;}

.menuhorisontal3{background:#fff;border-bottom:0px solid #ccc;width:970px;height:45px;overflow:hidden;margin:0 auto;padding:0 auto}

.menuhorisontal3 ul{padding-left:5px;font:normal 12px Arial;color:#000;text-transform:none;list-style-type:none;letter-spacing:.01em;margin:0}

.menuhorisontal3 li a{float:left;display:block;text-decoration:none;border-right:0 solid #999;color:#000;margin:0;padding:8px 5px}

.menuhorisontal3 li a:visited{color:#000}

.menuhorisontal3 li a:hover,.menuhorisontal3 li.selected a{background:none;color:#FA3200;text-decoration:none}



.cariform {

background: #ccc;

background: -webkit-gradient(linear, left top, left bottom, from(#111111), to(#555555)); /* CSS gradient */

background: -moz-linear-gradient(top, #111111, #555555); /* CSS gradient */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#111111', endColorstr='#555555'); /* CSS gradient ie7 */

-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#111111', endColorstr='#555555'); /* CSS gradient ie8 */

display: inline-block;

zoom: 1; /* hack untuk ie7 */

*display: inline;

border: solid 1px #555555;

padding: 3px 5px;

-webkit-border-radius: 20px; /* rounded corner */

-moz-border-radius: 20px; /* rounded corner */

border-radius: 20px; /* rounded corner */

-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1); /* CSS shadow */

-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); /* CSS shadow */

box-shadow: 0 1px 0px rgba(0,0,0,.1); /* CSS shadow */

}



.caributton {

color: #fff;

border: solid 1px #b80000;

font:bold 14px/32px  Arial;

height: 28px;

width: 55px;

text-shadow: 0 1px 1px #222222; /* CSS text shadow */

-webkit-border-radius: 20px;

-moz-border-radius: 20px;

border-radius: 20px;

background: #ff0000;

background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#b80000)); /* CSS gradient */

background: -moz-linear-gradient(top, #ff0000, #b80000); /* CSS gradient */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#b80000'); /* CSS gradient ie7 */

-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#b80000'); /* CSS gradient ie8 */

}

3.Langkah Ketika Sama Dengan urutan Langkah-langkah yang Kedua - Kemudian Anda Tinggal Cari Kode  <div id='outer-wrapper'> Jika tidak ada cari lagi alternatif Kode HTML Laiinya Misalkan saja Kode  ..................   Jika sudah Anda Ketemukan Patelkan Kode di Bawah Ini Tepat Di bawah Kode Tersebut :

<div class='menupic3'>

<div class='menuhorisontal3'>

<div style='float:center;text-align:center;padding:6px 6px 6px 6px;'>

<form action='http://facewoman.blogspot.com/2012/06/pencarian-from-facewoman.html' class='cariform ' id='cse-search-box'>

<input name='cx' type='hidden' value='partner-pub-2069536687365993:9998642887'/>

<input name='cof' type='hidden' value='FORID:10'/>

<input name='ie' type='hidden' value='ISO-8859-1'/>

<input name='q' size='80' type='text'/>

<select onchange='javascript:window.open(this.options[this.selectedIndex].value);'>



<option value='#'>facewoman.com</option>

<option value='#'>Hiburan</option>

<option value='#'>Edukasi</option>

<option value='#'>Review</option>

</select>

<input class='caributton' name='sa' type='submit' value='Cari'/></form>

<script src='http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en' type='text/javascript'/></script>

</div>

</div>

</div>

4.Langkah Terakhir simpan Template.

Note :
 Untuk menghindari sesuatu yang tidak di inginkan terhadap Template anda saya sarankan anda untuk memback Up Template anda atau untuk lebih mudah Klik Pratinjau Template.

 Uppppzzzzzzz...!!!!!Jangan senang dulu sobat apabila cara di atas anda terapkan sudah berhasil , Karena masih ada cara selanjutnya.sebagai penutup untuk hasil pencarian Yaitu dengan anda membuat posting sendiri di Blog anda :

• Buatlah Postinagn Beri Judul posting Blog anda dengan nama Pencarian Facewoman ( Ganti Facewoman dengan nama Blog Sobat ) Atau bisa dengan judul yang lainnya misalkan saja Facewoman search Atau kata yang anda sukai.
• Langkah selanjutnya geser ke posting HTML Kemusdian Masukkan Kode di bawah ini dan masukkan ke dalam posting HTML :

<form action="http://facewoman.blogspot.com/2012/06/pencarian-from-facewoman.html" id="cse-search-box"><input name="cx" type="hidden" value="partner-pub-8218248256383401:0027829997" /> <input name="cof" type="hidden" value="FORID:10" /> <input name="ie" type="hidden" value="ISO-8859-1" /><br />

<input name="q" size="31" type="text" /><input name="sa" type="submit" value="Search" /></form><script src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=in" type="text/javascript">



</script> <br />

<div id="cse-search-results"></div><script type="text/javascript">

 var googleSearchIframeName = "cse-search-results"; var googleSearchFormName = "cse-search-box"; var googleSearchFrameWidth = 940; var googleSearchDomain = "www.google.com"; var googleSearchPath = "/cse"; 

</script><br />

<script src="http://www.google.com/afsonline/show_afs_search.js" type="text/javascript">



</script> 

      3.Terbitkan Posting Anda.

 Eh jangan seneng dulu sobat cara di atas juga sepenuhnya belum selesai 100% hehehe ..  ( Kok ribet amat sih yang buat tutorial ini ) Santai aja gan!!!untuk proses finishing yang mesti anda lakukan adalah anda tinggal mengganti Link : http://facewoman.blogspot.com/2012/06/pencarian-from-facewoman.html Dengan Link alamat Postingan anda Tadi yang anda barusan buat.

 Gimana Sobat Facewoman Hasilnya??? Jika anda Tidak berhasil dengan trik diatas, CobaTeliti kembali apa kesalahan anda dalam penerapannya mungkin ada sesuatu kesalahan dalam trik di awal pembuatan anda Tadi.