add

¿Cómo insertar un buscador flotante en mi página web?


¿Buscador flotante en mi blog? ¿Cómo agregar un buscador de forma flotante en mi blog de Blogger? ¿Cómo agregar un buscador de forma flotante en mi blog de Wordpress? ¿Codigo buscador flotante para cualquier página web? Partimos a insertar un buscador flotante en nuestro blog de Blogger de una forma fácil y segura, lo que vamos hacer es insertar un código CSS3 en un widget HTML/javascript y luego lo guardaremos, esto dará el efecto de mostrarse un buscador flotante en la parte superior derecha de nuestro blog de Blogger y al ir avanzando por la página nos perseguirá a donde vayamos. Este truco de Blogger sirve para mostrarse en blogs de Blogger, Wordpress, Joomla o cualquier plataforma web que estén utilizando. Solo tienen que copiar un código y guardarlo.

¿Cómo insertar un buscador flotante en mi página web?

Mire su demostración en la siguiente página de demos

DEMO

¡Te gusto verdad!

Vamos a trabajar

1 Ir a Blogger

2 Un clic en “Diseño

¿Cómo insertar un buscador flotante en mi página web?

3 Un clic en “Añadir un gadget

¿Cómo insertar un buscador flotante en mi página web?

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

¿Cómo insertar un buscador flotante en mi página web?

5 Ingresa las siguientes líneas de código en su interior

<!-- Start by ayudadeblogger.com -->
        <div class='noop-searchbox' id='noop-searchbox'>
          <form action='/search' id='noop-searchform' method='get'>
            <input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' type='text' value='Search...'/>
            <button id='sbutton' type='submit'>
              <span id='simg'/>
            </span></button>
          </form>
        </div>
    <style type="text/css">
    #sbutton {
    background: -moz-linear-gradient(center top , #4D90FE 0%, #4787ED 100%) repeat scroll 0pt 0pt transparent;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#4787ed));
    background: -webkit-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
    background: -o-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
    background: -ms-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
    background: linear-gradient(top, #4d90fe 0%,#4787ed 100%);background-color: #4d90fe;
    border: 1px solid #3079ED;
    border-radius: 2px 2px 2px 2px;
    color: #FFFFFF;
    height: 27px;
    min-width: 76px;
    padding: 0 21px;padding-bottom: 2px;
    }
    #sbutton:hover{ background-color: #357AE8;
    background-image: -moz-linear-gradient(center top , #4D90FE, #357AE8);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#357ae8));
    background: -webkit-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
    background: -o-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
    background: -ms-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
    background: linear-gradient(top, #4d90fe 0%,#357ae8 100%);
    border: 1px solid #2F5BB7;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}
    #simg {
    background: url("http://4.bp.blogspot.com/-gAHYfEEtPjg/T0t5-AtLCmI/AAAAAAAAAJ8/w87kGhEAYyQ/s1600/searchicon.png") no-repeat scroll 0 0 transparent;
    display: inline-block;
    height: 14px;
    margin: 0;
    width: 17px;z-index:101;
    }#s:hover {box-shadow: 0 1px 2px #C1C1C1 inset;}
    #s {border: 1px solid #BCBCBC;border-radius: 4px 4px 4px 4px;font: italic 14px times New Roman;padding: 4px 2px;width: 146px; -moz-transition: width 0.2s ease-in 0s; -webkit-transition: width 0.2s ease-in; -o-transition: width 0.2s ease-in;}
    #s:focus {width: 200px;}
    .noop-searchbox {
    display: block;
    position: fixed;
    right: 0;
    top: 1%;
    max-width: 300px;min-width: 238px;
    z-index: 100;
    }
    </style>
    <!-- End buscador Google -->

6 Un clic en “Guardar

Eso es todo, ahora mira tú nuevo Buscador flotante insertado en tu blog

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber

Más información:

Buscador personalizado para página web
Agregar un buscador en Blogger con un solo widget

1 comentarios:

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios