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.
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
<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
<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
<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
<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
<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
<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”
3 Abrir “Añadir un gadget”
4 Busca el widget que dice “HTML/Javascript” ábrelo
5 Escoge cualquier código y pégalo en su interior
6 Un clic en “Guardar”
7 Ubica tu widget Buscador personalizado arriba de las entradas de tu blog de Blogger o donde tú quieras
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
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
Gracias Luis,ya estrenando buscador en mi blog.
ResponderEliminargs
ResponderEliminar