Google Search Bar For Blogger


Google dengan design barunya yang tampil lebih elegan dan sempurna memang patut diacungi jempol, dengan ciri khasnya yang simple dan unik itulah yang patut ditiru para Bloggers Indonesia lantas apa salahnya mencoba-coba mengcoding sesuatu yang mirip dengan desainnya si google ini.


Yap, pada kali ini MWcrew akan mencoba memberikan sedikit ILmu kepada kalian semua dengan Membuat Tombol Search seperti Google.


Tempatkan kode CSS berikut tepat diatas ]]></b:skin>

CSS

/*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(http://4.bp.blogspot.com/-GX7E4j3jwR0/ThMXKjuQ9VI/AAAAAAAAEsE/rJE5Ip1qDEg/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(http://4.bp.blogspot.com/-GX7E4j3jwR0/ThMXKjuQ9VI/AAAAAAAAEsE/rJE5Ip1qDEg/s1600/ico-search.png) no-repeat center #357AE8;
border: 1px solid #2F5BB7;
}
/* Clear floats */
.fclear {clear:both}

/*End Google Style Search Bar*/

Untuk mengganti lebarnya ganti kode yang berlatar kuning sesuai ukuran yang di inginkan

Setelah itu cari kode </head> dan taruh kode ini tepat diatasnya.

Javascript

<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>

Letakkan HTML dibawah ini dimanapun yang anda suka


HTML

<div id="searchContainer">
<form name="MWcrew" 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>
12 Comments
Related Post

Join the Discussion!

Jack H
March 17, 2016 12:47 PM | Delete comment

A Guide to minimize personal discomfort of moving
Humans are emotional creatures. No matter how strong we portray ourselves to be, we always end up in a puddle of tears, when we are forced to leave behind something or someone who happened to be very close. However, as life would have it, often due to academic or professional commitments we are forced to leave a familiar town, city, country and at times even the continent.

There is nothing wrong about feeling homesick. From Hollywood actors to dare devil sportspeople, everyone at some point of time has suffered from this problem. So next time when you feel like crying when you come across something that reminds you of Mumbai don’t blame yourself for it, instead learn to deal with it.
Here are some tips that shall help you to get ready for a new life in a new city.
Accept All Type of Invitation
Once your movers and packers from Mumbai delivers your goods to your new home, do not shut your door and remain isolated. Instead make an effort to know your neighbors. Accept all kind of invitations that you come across. Join a new club or indulge in a new hobby and soon you shall make new friends. If you have small kids, the support system at their school can be very helpful.
Do Not Visit Your Old Home Too Soon
Homesickness kicks in a few weeks or months after you have settled in your new place. Once the initial business of settling down is over, theadreline high of moving to a new place wears off. That is when things start to get gloomy. Do not give into your desire of visiting your old place too soon. Instead focus on your new home. If you happen to miss your extended family and friends you can ask them to come and spend some time with you.
Stay Busy
Staying busy perhaps is the best medicine for almost all types of emotional problem. Understand the fact that you have to function in your new environment and feeling depressed would only add to your problems. Focus your attention on your work and make use of modern age technology to like Skype to stay connected with your friends. Spend time in cooking your local delicacy, once your packers and movers from Mumbai deliver all the kitchen supplies.
Feeling down is a common symptom after moving to a new space. Give yourself some time and develop a support system. Gradually as your heart settles in the new place, you shall discover that you have created a new home in a new city that once used to be a foreign place.

movers and packers from Mumbai

Dont give a spam please!
Untuk menyisipkan video, gunakan
Untuk menyisipkan gambar, gunakan
Untuk menyisipkan kode, gunakan
Untuk menyisipkan beberapa baris kode, gunakan
Untuk menyisipkan catatan, gunakan
Untuk menciptakan efek teks tebal gunakan