>Mengubah Tampilan Google Custom Search


> h1 a:hover {background-color:#888;color:#fff ! important;} div#emailbody table#itemcontentlist tr td div ul { list-style-type:square; padding-left:1em; } div#emailbody table#itemcontentlist tr td div blockquote { padding-left:6px; border-left: 6px solid #dadada; margin-left:1em; } div#emailbody table#itemcontentlist tr td div li { margin-bottom:1em; margin-left:1em; } table#itemcontentlist tr td a:link, table#itemcontentlist tr td a:visited, table#itemcontentlist tr td a:active, ul#summarylist li a { color:#000099; font-weight:bold; text-decoration:none; } img {border:none;}

Mengubah Tampilan Google Custom Search


Mengubah Tampilan Google Custom Search

Posted: 29 Mar 2011 07:52 PM PDT

Setiap template biasanya sudah dibekali dengan kotak searc box atau alat pencari artikel.Model template bagus, model search box nya bagus juga menyesuaikan templatenya. Namun, ada beberapa alasan kenapa kita lebih baik beralih dari search box standart template ke Google CSE (Google Custom Search Enginee).

– Hasil search template standart kurang relevan (Rujukan: Gunakan Kotak Search Google di Blog Anda). Pada artikel rujukan tersebut dijelaskan perbandingan result/hasil pencarian kotak pencari standart dan kotak pencari dengan gadget Search Google. Tentu lebih baik yang gadget Search Google. Yang akan kita gunakan kali ini adalah Google CSE versi pengembangan dari gadget Search Google.
– Hasil cari dengan Google CSE dapat mendongkrak posisi Anda di Google. Ini sungguh membantu kekuatan SEO Anda.

Masalah lain muncul ketika hati telah mantap untuk menggunakan Google CSE. Ya, tampilannya tidak bisa di kustomisasi dengan CSS sebagaimana gadget bawaan template. Sebenarnya Google menyediakan alat kustomisasi mudah, namun itu untuk Google CSE berbayar. Wiiiiiiw….. Untuk keluar uang sepertinya tidak perlu, karena kita bisa mengakalinya…

Masukkan kode CSS berikut di atas ]]></b:skin>

#search_menu {
border-left:1px solid #CCCCCC;
height:90px;
margin-left:523px;
margin-right:0;
margin-top:-105px;
padding-bottom:0;
padding-left:10px;
}
#search_menu #search {
padding:0 0 0 5px;
}
input.search_input {
-moz-background-inline-policy:continuous;
background:url(“http://4.bp.blogspot.com/_iI6SgnnhWEM/S2Hxopom1nI/AAAAAAAABJE/tqkCCtB4ZA4/s1600/input.png“) no-repeat scroll 0 0 #FFFFFF;
border:0 none;
color:#E0691A;
float:left;
font-weight:bold;
margin:0;
padding:5px;
width:292px;
}
input.submit_input {
-moz-background-inline-policy:continuous;
background:url(“http://2.bp.blogspot.com/_iI6SgnnhWEM/S2Hx0e7pNbI/AAAAAAAABJM/gRhPg9AbHMQ/s1600/submit.png“) no-repeat scroll 0 0 transparent;
border:0 none;
color:#FFFFFF;
float:left;
font:bold 0.9em arial,sans-serif;
height:24px;
margin:0 0 0 5px;
padding:0;
width:65px;
}
.mast4 {
font-family:helvetica;
font-size:0.8em;
font-weight:bold;
letter-spacing:0.1em;
margin-bottom:10px;
margin-top:5px;
padding:3px 0 0;
text-transform:uppercase;
}

Yang berwarna biru adalah background untuk kotak ketikan dan kotak tombol. Anda bisa edit css yang lain sesuai keinginan Anda. Jika sudah silahkan simpan template Anda.

Sekarang, silahkan Anda buat gadget HTML. (Dashboard –> Rancangan –> Elemen Halaman –> Add Gadget). Masukkan kode berikut:

<div align=”center”>
<table style=”width: 700px;”><tbody>
<tr> <td align=”center”>
<a href=”http://www.masdoyok.co.cc“><img src=”http://3.bp.blogspot.com/-uOG4INVR76A/TZBmvCzJUaI/AAAAAAAADu0/wVbq_OYUODw/s1600/a.png” /></a></td> <td align=”center”>
<div class=”column first” id=”search”>
<div id=”search-form”>
<form action=”http://www.masdoyok.co.cc/2008/12/hasil-pencarian-mas-doyok.html” id=”searchform” method=”get” target=”_blank”>
<div>
<input class=”search_input” id=”s” name=”q” type=”text” value=”” />
<input class=”submit_input” id=”searchsubmit” type=”submit” value=”Search” /></div>
<input name=”cx” type=”hidden” value=”007737737555262419625:5hrz_kthoju” />
<input name=”cof” type=”hidden” value=”FORID:11” />
<input name=”ie” type=”hidden” value=”UTF-8” /></form>
<script src=”http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en&#8221; type=”text/javascript”>
</script></div>
</div>
</td> </tr>
</tbody></table>
</div>

Bagian yang berwarna biru berurutan silahkan ganti dengan:
http://www.masdoyok.co.cc silahkan ganti dengan Alamat blog Anda
http://3.bp.blogspot.com/-uOG4INVR76A/TZBmvCzJUaI/AAAAAAAADu0/wVbq_OYUODw/s1600/a.pngadalah logo blog saya, silahkan ganti dengan logo blog Anda sendiri.
  http://www.masdoyok.co.cc/2008/12/hasil-pencarian-mas-doyok.html adalah halaman hasil cari. Silahkan ganti dengan halaman hasil cari Anda
007737737555262419625:5hrz_kthoju adalah id unik Google CSE saya. Silahkan ganti dengan kode unik Google CSE Anda. Jika bagian FORID:11 dan UTF-8 Google CSE Anda berbeda, maka ganti jugalah sesuai Google CSE Anda.

Bagi yang belum pernah membuat Google CSE, silahkan Anda baca dulu tuorial: Cara Membuat Google Custom Search Enginee.

Semoga bermanfaat dan menambah look blog Anda. Selamat pagi, salam blogger…. salam fresh…

About lassun

The first child of three brothers who try to exist in the blogging world, to be able to search for identity

Posted on 30 March 2011, in Tak terkategori. Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: