Sekarang saya akan terangkan cara pasang pencarian pintar google untuk blog. Widget ini akan mencari atau memberikan result page yang berhubungan dengan artikel kita yang diindex google. Intinya sama dengan search engine google, namun kita hanya memasangnya di blog kita. Tampilannya sama dengan widget search bawaan blogger namun lebih baik dan dapat kita setting sesuai keinginan.
Sebelumnya coba dulu masukkan kata kunci pencarian atau judul artikel apa saja pada Pencarian Pintar Google untuk Blogonol yang terdapat sesudah artikel terkait. Bagaimana....tertarik? Ok sekarang mari kita bahas cara pasang pencarian pintar google untuk blog, ikuti langkah berikut
Kunjungi Google Custom Search
Klik Create a Custom Search Engine, seperti tampilan berikut
Selanjutnya isi form seperti pada gambar berikut
 |
| klik kanan - view image: untuk memperbesar gambar |
Selanjutnya pilih bentuk tampilan yang disukai. Saya pilih minimalis biar sesuai dengan template saya. Lanjutkan dengan klik next. Lihat gambar di bawah.
 |
| klik kanan - view image: untuk memperbesar gambar |
Selanjutnya klik look and feel, seperti gambar di bawah ini
 |
| klik kanan - view image: untuk memperbesar gambar |
Selanjutnya pilih layout atau penempatan sesuai yang diinginkan. Kalau saya pilih seperti gambar di bawah ini, lebih simple alias gak ribet. Jangan lupa klik Save and Get Code untuk melanjutkan atau mendapatkan kode widgetnya.
 |
| klik kanan - view image: untuk memperbesar gambar |
 |
| klik kanan - view image: untuk memperbesar gambar |
Selanjutnya Log in ke blog
Klik Rancangan
Klik Edit HTML
Centang Expand Template Widget
Setting dulu kode widget anda sperti ini
<b:if cond='data:blog.pageType == "item"'>Masukkan kode tersebut di bawah kode
<h4>Pencarian Pintar Google untuk Blogonol</h4>
KODE WIDGET SEARCH ANDA
</b:if>
menjadi seperti di bawah ini
<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'id', style : google.loader.themes.SHINY});
google.setOnLoadCallback(function() {
var customSearchOptions = {}; var customSearchControl = new google.search.CustomSearchControl(
'013238910433779632639:ofbvwfm6whm', customSearchOptions);
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
customSearchControl.draw('cse');
}, true);
</script>
<style type="text/css">
.gsc-control-cse {
font-family: Georgia, serif;
border-color: #ff0000;
background-color: #33ffff;
}
.gsc-control-cse .gsc-table-result {
font-family: Georgia, serif;
}
input.gsc-input {
border-color: #3333ff;
}
input.gsc-search-button {
border-color: #3333ff;
background-color: #D0D1D4;
}
.gsc-tabHeader.gsc-tabhInactive {
border-color: #ff0000;
background-color: #3366ff;
}
.gsc-tabHeader.gsc-tabhActive {
border-color: #3333ff;
background-color: #66ff99;
}
.gsc-tabsArea {
border-color: #3333ff;
}
.gsc-webResult.gsc-result,
.gsc-results .gsc-imageResult {
border-color: #ff0000;
background-color: #cccccc;
}
.gsc-webResult.gsc-result:hover,
.gsc-imageResult:hover {
border-color: #33ff33;
background-color: #33cc00;
}
.gsc-webResult.gsc-result.gsc-promotion:hover {
border-color: #33ff33;
background-color: #33cc00;
}
.gs-webResult.gs-result a.gs-title:link,
.gs-webResult.gs-result a.gs-title:link b,
.gs-imageResult a.gs-title:link,
.gs-imageResult a.gs-title:link b {
color: #3333ff;
}
.gs-webResult.gs-result a.gs-title:visited,
.gs-webResult.gs-result a.gs-title:visited b,
.gs-imageResult a.gs-title:visited,
.gs-imageResult a.gs-title:visited b {
color: #3333ff;
}
.gs-webResult.gs-result a.gs-title:hover,
.gs-webResult.gs-result a.gs-title:hover b,
.gs-imageResult a.gs-title:hover,
.gs-imageResult a.gs-title:hover b {
color: #3333ff;
}
.gs-webResult.gs-result a.gs-title:active,
.gs-webResult.gs-result a.gs-title:active b,
.gs-imageResult a.gs-title:active,
.gs-imageResult a.gs-title:active b {
color: #3333ff;
}
.gsc-cursor-page {
color: #3333ff;
}
a.gsc-trailing-more-results:link {
color: #3333ff;
}
.gs-webResult .gs-snippet,
.gs-imageResult .gs-snippet,
.gs-fileFormatType {
color: #000000;
}
.gs-webResult div.gs-visibleUrl,
.gs-imageResult div.gs-visibleUrl {
color: #000000;
}
.gs-webResult div.gs-visibleUrl-short {
color: #000000;
}
.gs-webResult div.gs-visibleUrl-short {
display: none;
}
.gs-webResult div.gs-visibleUrl-long {
display: block;
}
.gs-promotion div.gs-visibleUrl-short {
display: none;
}
.gs-promotion div.gs-visibleUrl-long {
display: block;
}
.gsc-cursor-box {
border-color: #ff0000;
}
.gsc-results .gsc-cursor-box .gsc-cursor-page {
border-color: #ff0000;
background-color: #cccccc;
color: #3333ff;
}
.gsc-results .gsc-cursor-box .gsc-cursor-current-page {
border-color: #3333ff;
background-color: #66ff99;
color: #3333ff;
}
.gsc-webResult.gsc-result.gsc-promotion {
border-color: #D2D6DC;
background-color: #D0D1D4;
}
.gsc-completion-title {
color: #3333ff;
}
.gsc-completion-snippet {
color: #000000;
}
.gs-promotion a.gs-title:link,
.gs-promotion a.gs-title:link *,
.gs-promotion .gs-snippet a:link {
color: #0066CC;
}
.gs-promotion a.gs-title:visited,
.gs-promotion a.gs-title:visited *,
.gs-promotion .gs-snippet a:visited {
color: #0066CC;
}
.gs-promotion a.gs-title:hover,
.gs-promotion a.gs-title:hover *,
.gs-promotion .gs-snippet a:hover {
color: #0066CC;
}
.gs-promotion a.gs-title:active,
.gs-promotion a.gs-title:active *,
.gs-promotion .gs-snippet a:active {
color: #0066CC;
}
.gs-promotion .gs-snippet,
.gs-promotion .gs-title .gs-promotion-title-right,
.gs-promotion .gs-title .gs-promotion-title-right * {
color: #333333;
}
.gs-promotion .gs-visibleUrl,
.gs-promotion .gs-visibleUrl-short {
color: #5F6A73;
}
</style>
<data:post.body/> atau <p><data:post.body/></p>bisa juga anda masukkan di bawah kode
<div class='post-footer-line post-footer-line-2'>Selanjutnya klik Simpan Template dan lihat hasilnya
Selamat mencoba dan sukses selalu...
