Divisor

Éste sitio web usa cookies, puedes ver la política de cookies, Aquí. ⤵ ⤵


Agrega un Buscador Interno muy Vistoso




De nuevo estamos aquí escribiendo sobre un buscador que me ha gustado mucho desde que lo vi y desearía compartirlo con todos ustedes, se trata de un buscador interno con un diseño realmente espectacular, y que se puede modificar coloradamente para que se adapte mejor a tu sitio web o blog. El que voy ha publicar es negro completamente, pero podéis cambiar los colores hexadecimales, perfectamente. Para ver de lo que estoy intentando relatar, mirar:






  1. Una vez concluido las demostraciones vayamos a implantar este fantástico buscador interno en tu site. A continuación verás, el código formado por CSS y Html. Copia y pega. Por ejemplo, en Blogger lo deberías de insertar, en un elemento Html/Javascript, dónde quieras que se visualice este buscador magnífico:

  2. <br />
    <form action="URL DE TU BLOG/search/" class="formulariodemo cf" method="get">
    <input name="q" placeholder="INGRESAR TEXTO..." required="required" type="text" />
      <button type="submit">Buscar</button>
    </form>
    <br />
    <style>
    
      .cf:before, .cf:after {
        content:"";
        display:table;
      }
      .cf:after {clear:both; }
      .cf { zoom:1; }
    
       /* el formulario en si mismo */
      .formulariodemo {
        background-color: #0A0A0A;
        border-radius: 10px;
        box-shadow: 0 0 2px #606971 inset;
        margin: 0 auto;
        padding: 15px;
        width: 450px;
      }
    
       /* la caja donde se ingresa el texto a buscar */
      .formulariodemo input {
        background-color: #EEE;
        border: none;
        border-radius: 3px 0 0 3px;
        float: left;
        font-family: Tahoma;font-size:15px;font-weight: bold;
        height: 20px;
        padding: 10px 5px;
        width: 330px;
      }
      .formulariodemo input:focus {
        outline: 0;
        background: #FFF;
        box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
      }
    
      /* el estilo de del atributo placeholder debe ser declarado para cada navegador de modo separado */
      .formulariodemo input:-moz-placeholder { color: #999; font-weight: normal; font-style: italic; }
      .formulariodemo input::-webkit-input-placeholder { color: #999; font-weight: normal; font-style: italic; }
      .formulariodemo input:-ms-input-placeholder { color: #999; font-weight: normal; font-style: italic; }
    
      /* aquí iría el estilo de del atributo required si es que se desea definirlo */
      .formulariodemo input:required { box-shadow: none; }
    
       /* el botón de envio */
      .formulariodemo button {
        background-color: #161616 ;
        border: none;
        border-radius: 0 3px 3px 0;
        color: #FFF;
        cursor: pointer;
        float: right;
        font-family: Tahoma;
        font-size: 15px;
        font-weight: bold;
        height: 40px;
        overflow: visible;
        padding: 0;
        position: relative;
        text-transform: uppercase;
        text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
        width: 110px;
      }
      .formulariodemo button:hover{ background: #161616 ; }
      .formulariodemo button:active, .formulariodemo button:focus{ background: #161616; }
      .formulariodemo button:before { /* el detalle del triángulo izquierdo */
        content: "";
        border-color: transparent #161616 transparent;
        border-style: solid solid solid none;
        border-width: 8px 8px 8px 0;
        left: -6px;
        position: absolute;
        top: 12px;
      }
      .formulariodemo button:hover:before { border-right-color: #161616; }
      .formulariodemo button:focus:before { border-right-color: #161616; }  
    </style>
    <br/>


  3. Ahora debes de cambiar TÚ URL DE TU BLOG, que está resaltado en mayúsculas e Ingresar texto, por la URL de tu Blog y el nombre que tu desees a Ingresar Texto... Busca en el código para encontrar lo referente.


Aizum Blog, domingo, septiembre 29, 2013


Divisor Star

✏ Buscador!

En las redes ⤵

✏ Vídeos!

 

Publicidad!

Subir hacia arriba ▲ Modificated & Designed by Iván Dangerfield © 2014. Converted by Bloggertheme9