Buscador personalizado para página web


¿Necesito un buscador personalizado para mi blog de Blogger? ¿Buscador personalizado varios colores para mi blog? ¿Un código simple de Buscador personalizado para mi página web? En una página web, blog o Blogger debe existir un buscador simple y rápido. Los usuarios que visitan sus blogs o páginas web, buscan utilizando palabras clave en los Buscadores personalizados de sus sitios en los cuales encontraran más rápido la información necesaria a sus preguntas. Existen varios artículos destacados dentro de una página web o blog que solo se los encuentra por medio de un Buscador personalizado, es por esta razón que todo sitio web o blog debe de tener un Buscador personalizado en su sitio. Una ventaja principal al utilizar un Buscador personalizado es que obtendrás más vistas de sus artículos. Podrás utilizar este código de Buscador personalizado en cualquier página web, blog, Blogger, Wordpress etc.

Inserta el código Buscador personalizado, abajo del menú principal, arriba de una “Entrada” “Post” “Artículos”, dentro de un artículo “Post” “Entrada”, debajo de una “Entrada” “Post” “Articulo”, debajo de los comentarios, en un widget, en el sidebar o donde mejor te parezca.

Buscador personalizado para página web

A continuación, podrás escoger el Buscador personalizado que mejor le sobresalga a su página web o blog.

Varios colores de Buscador personalizado para su sitio web

Utilice cualquiera de los siguientes códigos:


1

Buscador personalizado para página web

<style>
#search-box {
position: relative;
width: 100%;
margin: 0;
}

#search-form
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}

#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}

#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #4d90fe;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Búsqueda...' type='text'/>
<button id='search-button' type='submit'><span>Buscar</span></button>
</form>
</div>

2

Buscador personalizado para página web

<style>
#search-box {
position: relative;
width: 100%;
margin: 0;
}

#search-form
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}

#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}

#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #ff6c00;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Búsqueda...' type='text'/>
<button id='search-button' type='submit'><span>Buscar</span></button>
</form>
</div>

3

Buscador personalizado para página web


<style>
#search-box {
position: relative;
width: 100%;
margin: 0;
}

#search-form
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}

#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}

#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #18cf00;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Búsqueda...' type='text'/>
<button id='search-button' type='submit'><span>Buscar</span></button>
</form>
</div>

4

Buscador personalizado para página web


<style>
#search-box {
position: relative;
width: 100%;
margin: 0;
}

#search-form
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}

#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}

#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #f73846;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Búsqueda...' type='text'/>
<button id='search-button' type='submit'><span>Buscar</span></button>
</form>
</div>

5

Buscador personalizado para página web


<style>
#search-box {
position: relative;
width: 100%;
margin: 0;
}

#search-form
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}

#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}

#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #ff00f6;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Búsqueda...' type='text'/>
<button id='search-button' type='submit'><span>Buscar</span></button>
</form>
</div>

6

Buscador personalizado para página web


<style>
#search-box {
position: relative;
width: 100%;
margin: 0;
}

#search-form
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}

#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}

#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #00e0d3;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Búsqueda...' type='text'/>
<button id='search-button' type='submit'><span>Buscar</span></button>
</form>
</div>

Tutorial para Blogger

1 Ir a Blogger

2 Un clic en “Diseño

Buscador personalizado para página web

3 Abrir “Añadir un gadget

Buscador personalizado para página web

4 Busca el widget que dice “HTML/Javascript” ábrelo

Buscador personalizado para página web

5 Escoge cualquier código y pégalo en su interior

Buscador personalizado para página web

6 Un clic en “Guardar

7 Ubica tu widget Buscador personalizado arriba de las entradas de tu blog de Blogger o donde tú quieras

Buscador personalizado para página web

Eso es todo

¿Cómo insertar el Buscador personalizado en una página web que no sea Blogger?

1 Copia cualquier código Buscador personalizado, dependiendo de la plataforma que utilicen, solo tienes que guardarlo dentro del código HTML de su página, la ubicación depende de donde lo quieras mostrar

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber




Share:

Related post

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments: