INFO TERKINI

Saya yakin pasti anda sudah tahu kan tentang desain terbarunya pencarian google . Yang memiliki gaya bar dengan desain lebih ramping pada hasil pencariannya . dan selain itu pencarian google juga kini lebih memiliki tampilan yang modern minimalis dengan sudur membulat dengan disertai efek hover . Nah untuk artikel kali ini saya akan menunjukkan bagaimana  anda bisa membuat pencarian google terbaru ini bisa masuk kedalam blog anda .

Nah berikut ini saya mempunyai demo screenshot .

• Kotak Pencarian Di google

• Kotak Pencarian Di Blogger

Itulah screenshot pencarian google terbaru ini , mungkin jika saya memberikan contoh dalam bentuk screenshot pasti kurang cukup , nah untunglah saya mempunyai demo on page nya . Contoh Kotak pencarian berikut ini saya letakkan di bagian atas postingan blog test saya . mungkin jika anda ingin melihat demo on pagenya anda bisa mengklik demo dibawah ini .




Jika anda berminat untuk memasang kotak pencarian ini , langsung saja kita ikuti langkah dibawah ini.

• Cara Memasang Kotak Pencarian Google

Note: Anda bisa menbackup template anda jika takut ada kesalahan dalam memasukkannya. Klik download full template untuk menbackup.

2. Setelah masuk pada menu html di blog anda , langkah selanjutnya adalah mencari kode ]]></b:skin> dan copy kode dibawah ini lalu paste sebelum atau diatas kode
]]></b:skin>. Untuk memudahkan pencarian anda bisa menggunakan F3

/*Start Css For Google Style Search Box*/
/* div container containing the form */
#searchContainer {
margin:20px;
}
/* Style the search input field. */
#field {
float:left;
width:200px;
height:27px;
line-height:27px;
text-indent:10px;
font-family:arial, sans-serif;
font-size:1em;
color:#333;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-right:none;
}
/* Style the "X" text button next to the search input field */
#delete {
float:left;
width:16px;
height:29px;
line-height:27px;
margin-right:15px;
padding:0 10px 0 10px;
font-family: "Lucida Sans", "Lucida Sans Unicode",sans-serif;
font-size:22px;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-left:none;
}
/* Set default state of "X" and hide it */
#delete #x {
color:#A1B9ED;
cursor:pointer;
display:none;
}
/* Set the hover state of "X" */
#delete #x:hover {
color:#36c;
}
/* Syle the search button. Settings of line-height, font-size, text-indent used to hide submit value in IE */
#submit {
cursor:pointer;
width:70px;
height: 31px;
line-height:0;
font-size:0;
text-indent:-999px;
color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoHSOS6tHdbpHKbcYNtNA8sDx1qCMPlahxDaKZtHpbaUMq5hd9m5g_4NfTCGfs7u99wEZGaeouU-n0sjYQQoHijZQzeBgbMdeuCTyfNkIgB6oRXHAFnectjU2ermj3_sqPHOEVjPabwLPi/s1600/ico-search.png) no-repeat #4d90fe center;
border: 1px solid #3079ED;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
/* Style the search button hover state */
#submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoHSOS6tHdbpHKbcYNtNA8sDx1qCMPlahxDaKZtHpbaUMq5hd9m5g_4NfTCGfs7u99wEZGaeouU-n0sjYQQoHijZQzeBgbMdeuCTyfNkIgB6oRXHAFnectjU2ermj3_sqPHOEVjPabwLPi/s1600/ico-search.png) no-repeat center #357AE8;
border: 1px solid #2F5BB7;
}
/* Clear floats */
.fclear {clear:both}
/*End Google Style Search Bar - Info @ http://vianjb.blogspot.com*/

3. Setelah selesai memasukkan kode tersebut , kembali cari lagi kode </head> dan copy lagi kode dibawah ini lalu paste dibagian sebelum kode </head>.

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script type='text/javascript'>
$().ready(function() {
// if text input field value is not empty show the &quot;X&quot; button
$(&quot;#field&quot;).keyup(function() {
$(&quot;#x&quot;).fadeIn();
if ($.trim($(&quot;#field&quot;).val()) == &quot;&quot;) {
$(&quot;#x&quot;).fadeOut();
}
});
// on click of &quot;X&quot;, delete input field value and hide &quot;X&quot;
$(&quot;#x&quot;).click(function() {
$(&quot;#field&quot;).val(&quot;&quot;);
$(this).hide();
});
});
</script>

4. Jika sudah benar memasukkan kodenya anda bisa menekan save template .

5. Sekarang anda kembali ke bagian design > add gadget > html / javascript.





6. Pada kotak html / javascript , copy paste kode dibawah ini dan letakkan di kotak html / javascript tadi.

<div id="searchContainer">
<form name="SUYB" action="/search" method="get">
<input type="text" id="field" id="s" name="q"/>
<div id="delete"><span id="x">x</span></div>
<input type="submit" name="submit" id="submit" value="Search" />
</form>
</div>

7. Save dan selesai , kini anda sudah memiliki kotak pencarian google terbaru.

Kotak pencarian google terbaru ini tidak ada bedanya bukan dengan pencarian google , mungkin hari ini pembahasan widget kali ini cukup sekian . Mungkin jika anda mempunyai widget yang lain dan yang belum pernah di publish oleh orang , anda bisa mengirimkannya DISINI , itupun jika anda berkenan.