SOLO WHATSAPP 654 60 77 43 hola@elperrodepapel.com
      Cómo poner una lupa en el buscador de blogger

      Seguimos personalizando el diseño del blog para adaptarlo completamente a nuestra idea. Hoy vamos a ver cómo poner una lupa en el buscador de Blogger, un pequeño detalle que nos hará diferentes ¿no crees?

      1.- El código que vamos a usar es:

      <form action=’/search’ id=’buscador’ method=’get’>
      <input id=’texto’ name=’q’ onblur=’if (this.value == &quot;&quot;) {this.value = &quot;Buscar&quot;;}’ onfocus=’if (this.value == &quot;Buscar&quot;) {this.value = &quot;&quot;;}’/><input id=’botonbuscar’ type=’submit’ value=’LUPA‘/>
      </form>

      Si lo añadimos como gadget HTML/Javascript desde el panel de Diseño de Blogger, veremos ésto:

      Un buscador de lo más sencillo sin formato ninguno. Vamos a ponerlo bonito y a añadir una lupa donde pone LUPA.

      2.- Ahora que hemos copiado nuestro código en un gadget HMTL/Javascript y podemos verlo en vivo en nuestro blog, le daremos el formato desde la plantilla HTML.

      Pinchamos en cualquier zona dentro de nuestra plantilla, donde aparece el código, y pulsamos a la vez: Control y la tecla F. Se abrirá el buscador interno de Blogger. Buscamos:

      ]]></b:skin>

      Y justo encima pegamos el siguiente código:

      /* Buscador con Lupa*/

      #buscador { /*El buscador-form*/

      height:34px;

      width:300px;

      padding:15px;

      text-align:center;

      background:#f5f5f5; /*color de fondo del buscador*/

      }

      #buscador #texto{ /*Texto*/

      width:185px;

      height:19px;

      background:#fff;   /*color de fondo*/

      border:none;

      padding:2px 5px;

      font-weight:normal;

      border:1px solid #969696;  /*borde del buscador*/

      color:#b0b0b0;  /*color de la letra*/
      }

      #buscador #botonbuscar{ /*Botón buscar*/

      background:url(URL DE TU IMAGEN) no-repeat left top;

      width:70px;  /*ancho del botón donde irá tu imagen de la lupa*/

      height:24px;  /*alto del botón donde irá tu imagen de la lupa*/

      margin-left:5px;

      border:none;

      color:#348bab;  /*color de la letra, por si decides prescindir de la imagen*/

      }

      IMPORTANTE: recuerda adaptar tu imagen de la lupa con lupa al ancho y el alto del botón. En este caso:


      width:70px;  /*ancho del botón donde irá tu imagen de la lupa*/

      height:24px;  /*alto del botón donde irá tu imagen de la lupa*/


      3.- Si miras ahora en Vista Previa tienes ésto:

      Si te fijas la palabra LUPA aparece encima del dibujo de nuestra lupa.

      4.-  La forma más sencilla de eliminar el texto del botón es poniendo en color transparente la letra. Aparece en el último fragmento del código, así:

      #buscador #botonbuscar{ /*Botón buscar*/

      background:url(URL DE TU IMAGEN) no-repeat left top;

      width:70px;  /*ancho del botón donde irá tu imagen de la lupa*/

      height:24px;  /*alto del botón donde irá tu imagen de la lupa*/

      margin-left:5px;

      border:none;

      color: transparent;  /*color de la letra, por si decides prescindir de la imagen*/

      }

      5.- También podemos eliminar la imagen y quedarnos solo con el texto:

      #buscador #botonbuscar{ /*Botón buscar*/
      background: #000000 url(#) no-repeat left top;
      width:70px;  /*ancho del botón donde irá tu imagen de la lupa*/
      height:24px;  /*alto del botón donde irá tu imagen de la lupa*/
      margin-left:5px;
      border:none;
      color: #ffffff;  /*color de la letra, por si decides prescindir de la imagen*/
      }

      Si decides usar el texto, tienes que modificar la palabra LUPA que pusimos en el gadget HTML/JAVASCRIPT desde diseño por la que quieras:

      Así:

      <form action=’/search’ id=’buscador’ method=’get’>
      <input id=’texto’ name=’q’ onblur=’if (this.value == &quot;&quot;) {this.value = &quot;Buscar&quot;;}’ onfocus=’if (this.value == &quot;Buscar&quot;) {this.value = &quot;&quot;;}’/><input id=’botonbuscar’ type=’submit’ value=’BUSCAR‘/>
      </form>

      6.- Modificando los colores del código de la plantilla podemos conseguir integrar el formulario completamente en el diseño de nuestro blog:

      Buscador minimalista black & white:

      /* Buscador con Lupa*/

      #buscador { /*El buscador-form*/
      height:34px;
      width:300px;
      padding:15px;
      text-align:center;
      background:#ffffff;
      }

      #buscador #texto{ /*Texto*/
      width:185px;
      height:19px;
      background:#000000;
      border:none;
      padding:2px 5px;
      font-weight:normal;
      border:0px solid #969696;
      color:#ffffff;
      }

      #buscador #botonbuscar{ /*Botón buscar*/
      background: #000000 url(#) no-repeat left top;
      width:70px;  /*ancho del botón donde irá tu imagen de la lupa*/
      height:24px;  /*alto del botón donde irá tu imagen de la lupa*/
      margin-left:5px;
      border:none;
      color: #ffffff;  /*color de la letra, por si decides prescindir de la imagen*/
      }

      Recuerda que puedes escoger los colores que quieras DE ESTA WEB, que es la que yo uso siempre.



      Buscador en Rosa:

      /* Buscador con Lupa*/

      #buscador { /*El buscador-form*/
      height:34px;
      width:300px;
      padding:15px;
      text-align:center;
      background:#ffffff;
      }

      #buscador #texto{ /*Texto*/
      width:185px;
      height:19px;
      background:#F5A9BC;
      border:none;
      padding:2px 5px;
      font-weight:normal;
      border:0px solid #969696;
      color:#000000;
      }

      #buscador #botonbuscar{ /*Botón buscar*/
      background: #F5A9BC url(#) no-repeat left top;
      width:70px;  /*ancho del botón donde irá tu imagen de la lupa*/
      height:24px;  /*alto del botón donde irá tu imagen de la lupa*/
      margin-left:5px;
      border:none;
      color: #000000;  /*color de la letra, por si decides prescindir de la imagen*/
      }

      Buscador integrado con el fondo en azul:

      /* Buscador con Lupa*/

      #buscador { /*El buscador-form*/
      height:34px;
      width:300px;
      padding:15px;
      text-align:center;
      background:#81DAF5;
      }

      #buscador #texto{ /*Texto*/
      width:185px;
      height:19px;
      background:#ffffff;
      border:none;
      padding:2px 5px;
      font-weight:normal;
      border:1px solid #ffffff;
      color:#81DAF5;
      }

      #buscador #botonbuscar{ /*Botón buscar*/
      background: #81DAF5 url(#) no-repeat left top;
      width:70px;  /*ancho del botón donde irá tu imagen de la lupa*/
      height:24px;  /*alto del botón donde irá tu imagen de la lupa*/
      margin-left:5px;
      border:none;
      color: #ffffff;  /*color de la letra, por si decides prescindir de la imagen*/
      }

      Y reducir el tamaño del fondo para que no quede tan ancho y puedas colocarlo bien encajado en tu sidebar, en color lavanda:

      /* Buscador con Lupa*/

      #buscador { /*El buscador-form*/
      height:34px;
      width:250px; /*ancho total del buscador*/
      padding:15px; /*margen exterior del buscador*/
      text-align:center;
      background:#E2A9F3;
      }

      #buscador #texto{ /*Texto*/
      width:150px; /*ancho de la caja de búsqueda*/
      height:19px;
      background:#ffffff;
      border:none;
      padding:2px 5px;
      font-weight:normal;
      border:1px solid #ffffff;
      color:#E2A9F3;
      }

      #buscador #botonbuscar{ /*Botón buscar*/
      background: #E2A9F3 url(#) no-repeat left top;
      width:80px;  /*ancho del botón donde irá tu imagen de la lupa*/
      height:19px;  /*alto del botón donde irá tu imagen de la lupa*/
      margin-left:0px; /*margen entre la caja de búsqueda y el botón BUSCAR o la LUPA*/
      border:none;
      color: #ffffff;  /*color de la letra, por si decides prescindir de la imagen*/
      }



      Solo con bordes naranjas, muy minimalista:

      /* Buscador con Lupa*/

      #buscador { /*El buscador-form*/
      height:34px;
      width:250px;
      padding:15px;
      text-align:center;
      background:#ffffff;
      border: 1px solid #F7BE81;
      }

      #buscador #texto{ /*Texto*/
      width:150px;
      height:19px;
      background:#ffffff;
      border:none;
      padding:2px 5px;
      font-weight:normal;
      border:1px solid #F7BE81;
      color:#F7BE81;
      }

      #buscador #botonbuscar{ /*Botón buscar*/
      background: #ffffff url(#) no-repeat left top;
      width:80px;  /*ancho del botón donde irá tu imagen de la lupa*/
      height:19px;  /*alto del botón donde irá tu imagen de la lupa*/
      margin-left:0px;
      border: 0px solid #F7BE81;
      color: #F7BE81;  /*color de la letra, por si decides prescindir de la imagen*/
      }

      BUSCADORES CON LUPA
      Modelo Azul
      /* Buscador con Lupa*/
      #buscador { /*El buscador-form*/
      height:34px;
      width:225px;
      padding-top: 6px;
      padding-left: 5px;
      margin-left: -6px;
      text-align:center;
      background:#A9E4F2; /*color de fondo del buscador*/
      }
      #buscador #texto{ /*Texto*/
      width:141px;
      height:18px;
      background:#fff;   /*color de fondo*/
      border:none;
      padding:2px 5px;
      font-weight:normal;
      border:1px solid #A9E4F2;  /*borde del buscador*/
      color:#3BA7C3;  /*color de la letra*/
      outline: transparent;
      }
      #buscador #botonbuscar{ /*Botón buscar*/
      background:url(https://lh3.googleusercontent.com/-9AdHjDDwYzM/VU3wKYHO8ZI/AAAAAAAAk9Q/is5BbVpOPoY/w70-h24-no/lupa_azul.png) no-repeat left top;
      width:70px;  /*ancho del botón donde irá tu imagen de la lupa*/
      height:25px;  /*alto del botón donde irá tu imagen de la lupa*/
      margin-left: 0px;
      border:none;
      color:transparent;  /*color de la letra, por si decides prescindir de la imagen*/
      }

      Modelo Verde

      /* Buscador con Lupa*/
      #buscador { /*El buscador-form*/
      height:34px;
      width:225px;
      padding-top: 6px;
      padding-left: 5px;
      margin-left: -6px;
      text-align:center;
      background:#D9FFDF; /*color de fondo del buscador*/
      }
      #buscador #texto{ /*Texto*/
      width:141px;
      height:18px;
      background:#fff;   /*color de fondo*/
      border:none;
      padding:2px 5px;
      font-weight:normal;
      border:1px solid #D9FFDF;  /*borde del buscador*/
      color:#82CC8D;  /*color de la letra*/
      outline: transparent;
      }
      #buscador #botonbuscar{ /*Botón buscar*/
      background:url(https://lh3.googleusercontent.com/-prppvEIorC8/VU3zIHth_BI/AAAAAAAAk9o/Zt9U5ZKvxlA/w70-h24-no/lupa_verde.png) no-repeat left top;
      width:70px;  /*ancho del botón donde irá tu imagen de la lupa*/
      height:25px;  /*alto del botón donde irá tu imagen de la lupa*/
      margin-left: 0px;
      border:none;
      color:transparent;  /*color de la letra, por si decides prescindir de la imagen*/
      }
      Modelo Rosa

      /* Buscador con Lupa*/

      #buscador { /*El buscador-form*/
      height:34px;
      width:225px;
      padding-top: 6px;
      padding-left: 5px;
      margin-left: -6px;
      text-align:center;
      background:#FCE8EA; /*color de fondo del buscador*/
      }

      #buscador #texto{ /*Texto*/
      width:141px;
      height:18px;
      background:#fff;   /*color de fondo*/
      border:none;
      padding:2px 5px;
      font-weight:normal;
      border:1px solid #FCE8EA;  /*borde del buscador*/
      color:#F5B2B6;  /*color de la letra*/
      outline: transparent;
      }

      #buscador #botonbuscar{ /*Botón buscar*/
      background:url(https://lh5.googleusercontent.com/-S89VD9-ApHQ/VU3z-1WF0lI/AAAAAAAAk-E/ukG-sE8SjLU/w70-h24-no/lupa_rosa.png) no-repeat left top;
      width:70px;  /*ancho del botón donde irá tu imagen de la lupa*/
      height:25px;  /*alto del botón donde irá tu imagen de la lupa*/
      margin-left: 0px;
      border:none;
      color:transparent;  /*color de la letra, por si decides prescindir de la imagen*/
      }

      ¿Quieres diseñar tu propio botón con lupa?
      Descarga el archivo en .EPS y modifícalo a tu gusto en cualquier programa de diseño gráfico (Corel, Photoshop, Illustrator, Inkscape…)

      ¿Te animas a añadir un botón personalizado con los colores de tu blog?
      Si lo haces ¡déjame el enlace en comentarios para verlo!

      ¡EMPEZAMOS EN JULIO!
      APRENDE A DISEÑAR Y PROGRAMAR BLOGS BONITOS, ORIGINALES Y OPTIMIZADOS PARA TI Y TUS AMIGAS

      ¡HOLA EMPRENDEDORA!

      ¿Cansada de pasar tantas horas delante del ordenador sin ver resultados?

      DESCARGA GRATIS MI GUÍA DE MARKETING EMOCIONAL + PLANTILLA PROFESIONAL PARA BLOGGER

      Aprende a conectar con tu público ideal
      ¡Y DISFRUTA DE TU TIEMPO LIBRE!

      RESUMEN SEMANAL

      Cada Viernes Novedades en tu Correo: Últimas entradas, novedades y noticias sobre blogging, marketing y emprendimiento.
      Tu Correo

      ME APUNTO

      Powered by ConvertKit

      /* Layout */
      .ck_form.ck_minimal {
      /* divider image */
      background: #f9f9f9;
      font-family: ‘Helvetica Neue’, Helvetica, Arial, Verdana, sans-serif;
      line-height: 1.5em;
      overflow: hidden;
      color: #666;
      font-size: 16px;
      border: solid 1px #d1d1d1;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
      clear: both;
      margin: 20px 0px;
      text-align: center;
      }

      .ck_form.ck_minimal h3.ck_form_title {
      text-align: center;
      margin: 0px 0px 10px;
      font-size: 28px;
      }

      .ck_form.ck_minimal h4 {
      text-align: center;
      font-family: ‘Open Sans’, Helvetica, Arial, sans-serif;
      text-transform: uppercase;
      font-size: 18px;
      font-weight: normal;
      padding-top: 0px;
      margin-top: 0px;
      }

      .ck_form.ck_minimal p {
      padding: 0px;
      }

      .ck_form, .ck_form * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      }

      .ck_form.ck_minimal .ck_form_fields {
      width: 100%;
      float: left;
      padding: 5%;
      }
      /* Form fields */

      .ck_errorArea {
      display: none; /* temporary */
      }

      #ck_success_msg {
      padding: 10px 10px 0px;
      border: solid 1px #ddd;
      background: #eee;
      }

      .ck_form.ck_minimal input[type=”text”], .ck_form.ck_minimal input[type=”email”] {
      font-size: 18px;
      padding: 10px 8px;
      width: 68%;
      border: 1px solid #d6d6d6; /* stroke */
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px; /* border radius */
      background-color: #fff; /* layer fill content */
      margin-bottom: 5px;
      height: auto;
      float: left;
      margin: 0px;
      margin-right: 2%;
      height: 42px;
      }

      .ck_form input[type=”text”]:focus, .ck_form input[type=”email”]:focus {
      outline: none;
      border-color: #aaa;
      }

      .ck_form.ck_minimal .ck_subscribe_button {
      width: 100%;
      color: #fff;
      margin: 0px;
      padding: 11px 0px;
      font-size: 18px;
      background: #33CCCC;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px; /* border radius */
      cursor: pointer;
      border: none;
      text-shadow: none;
      width: 30%;
      float: left;
      height: 42px;
      }

      .ck_form.ck_minimal .ck_guarantee {
      color: #626262;
      font-size: 12px;
      text-align: center;
      padding: 15px 0px 0px;
      display: block;
      clear: both;
      }
      .ck_form .ck_powered_by {
      display: block;
      color: #aaa;
      font-size: 12px;
      }

      .ck_form .ck_powered_by:hover {
      display: block;
      color: #444;
      }

      .ck_converted_content {
      display: none;
      padding: 5%;
      background: #fff;
      }

      .ck_form.ck_minimal.width400 .ck_subscribe_button, .ck_form.ck_minimal.width400 input[type=”email”] {
      width: 100%;
      float: none;
      margin-top: 5px;
      }

      .ck_slide_up, .ck_modal, .ck_slide_up .ck_minimal, .ck_modal .ck_minimal {
      min-width: 400px;
      }

      .page .ck_form.ck_minimal {
      margin: 50px auto;
      max-width: 600px;
      }

      Te encantará:

      The following two tabs change content below.
      Mamá, emprendedora y bloguera a tiempo completo. Ayudo a otras mujeres y madres soñadoras a emprender un negocio online de éxito para encontrar el equilibrio entre su vida personal y profesional.

      Pin It on Pinterest

      Share This

      COMPAGINA TU VIDA PERSONAL Y PROFESIONAL

      CURSO-GUÍA GRATIS DE 5 DÍAS PARA MAMÁS EMPRENDEDORAS

      ¡Bienvenida! Ahora revisa tu correo ;)