New Google Search Style Search Bar For Blogger

Carilah code di bawah ini

]]></b:skin>

Setelah itu, copy code di bawah ini tepat di atas ]]></b:skin>

/* 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/AVvXsEi7yt4RcsxxVCOfPU-o38SE_ryrrLQ0qsBKv3pRhs4MtiPuWS3SglxvMg9Ym8nVS_Cj8JqWO3dGIfJkmHJd0D29Xx3JLPezaM4luCZDa2Cxt8ko3OJow1OMwNruAbJGsNxVLihKrdX9v4EI/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/AVvXsEi7yt4RcsxxVCOfPU-o38SE_ryrrLQ0qsBKv3pRhs4MtiPuWS3SglxvMg9Ym8nVS_Cj8JqWO3dGIfJkmHJd0D29Xx3JLPezaM4luCZDa2Cxt8ko3OJow1OMwNruAbJGsNxVLihKrdX9v4EI/s1600/ico-search.png) no-repeat center #357AE8;
border: 1px solid #2F5BB7;
}
/* Clear floats */
.fclear {clear:both}

Dan temukan code

</head>

Lalu letakkan code di bawah ini

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

Save Template.


Tambahkan Gadget HTML/Javascript baru

1. Design --> Elements --> Add Gadget
2. Pilih "HTML/Java Script"
3. Tambahkan code berikut

x

Save