Nueva barra de búsqueda de Google en Blogger

Estoy seguro de que habrá notado el nuevo diseño de Google como se explica en el puesto de evolución en el diseño y la experiencia de Google en la página oficial blog.While Google los cambios han sido más sutiles se destacan como el nuevo y elegante barra de búsqueda en los resultados paginas.la nueva barra de búsqueda tiene un aspecto más moderno minimista con esquinas redondeadas y se ciernen effect.But una nueva función y tranquilo como es que usted escriba su texto en el campo de búsqueda aparece una X que se puede hacer clic para eliminar sus texto



En Google



En Blogger

Agregue el estilo de Nueva barra de búsqueda de Google en Blogger

Recuerde siempre una copia de tu plantilla, antes de hacer cambios

Paso 1. En el diseño de Blogger> Haga clic en Edición de HTML



. Paso 2 Busque el siguiente fragmento de código en sus blogs Html: (Haga clic en la tecla Ctrl y F para una barra de búsqueda para ayudar a encontrar el código

]]></b:skin>

Paso 3 Copia y pega el siguiente código desde arriba / Antes de]]> </ 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/AVvXsEjikdDrX9ua0WGn3SVeGJ6cUBjVIc13tJTyA8u6mSSnqLqzofQvGNA8JTinRs8Wcq8TjOcsBpAyU8gRtvytEw31-N5ZKY5KCY2R54vVsmSW46tYOAI63oQ6f_gBJa12PRqb55Jtfq1chCr6/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/AVvXsEjikdDrX9ua0WGn3SVeGJ6cUBjVIc13tJTyA8u6mSSnqLqzofQvGNA8JTinRs8Wcq8TjOcsBpAyU8gRtvytEw31-N5ZKY5KCY2R54vVsmSW46tYOAI63oQ6f_gBJa12PRqb55Jtfq1chCr6/s1600/ico-search.png) no-repeat center #357AE8;
border: 1px solid #2F5BB7;
}
/* Clear floats */
.fclear {clear:both}
/**/

Nota - Para cambiar el ancho de la barra de búsqueda, simplemente cambie la línea resaltada en rojo de hasta 200 píxeles o hacia abajo.

. Paso 4 Buscar el siguiente fragmento de código en sus blogs Html: (Haga clic en la tecla Ctrl y F para una barra de búsqueda para ayudar a encontrar el código -

</head>

Paso 5. Ahora copie y pegue este código desde arriba / Antes de </ head>

Nota - Si ya ha agregado un script jQuery a su plantilla que puede eliminar el código resaltado en verde.

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

Paso 6. Guardar la plantilla, tenemos la Css añadido al estilo de la barra de búsqueda y el jQuery para el botón X ahora añadimos el código HTML.

Paso 7. Vuelve a la página de diseño de blogs y haga clic en Añadir un gadget> elige HTML / Javascript.


Paso 8 Copiar y pegar el siguiente código en el gadget HTML / Javascript:

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

Paso 9. Guardar el gadget HTML / JavaScript y usted puede arrastrar y colocar en su lugar.

guarda todo y listo.