Caixa de buscas personalizada para Blogger

Uma coisa que muitos de nossos leitores começam a procurar quando acessam nossos blogs é uma caixa de buscas funcional para procurar um artigo que não tenha encontrado. Por isso estou trazendo esse modelo de caixa de buscas.

Instalando

Para instalar vá em Layout > Adicionar um Gadget > HTML Java Script > Cole o código abaixo e Salve.

<style>
.cf:before, .cf:after{
    content:"";
    display:table;
}
.cf:after{
    clear:both;
}
.cf{
    zoom:1;
}
 /* Form wrapper styling */
.search-wrapper {
width: 252px;
margin: 15px auto;
box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
}
/* Form text input */
.search-wrapper input {
width: 150px;
height: 20px;
padding: 10px 15px;
float: left;
font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #EEE;
border-radius: 3px 0 0 3px;
}
.search-wrapper input:focus {
    outline: 0;
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.search-wrapper input::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
   font-style: italic;
}
.search-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}
.search-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}
/* Form submit button */
.search-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 72px;
font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: white;
text-transform: uppercase;
background: #80CBC4;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
}

.search-wrapper button:hover{
    background: #2196F3;
}

.search-wrapper button:active,
.search-wrapper button:focus{
    background: #c42f2f;
    outline: 0;
}
.search-wrapper button:before { /* left arrow */
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #80CBC4 transparent;
    top: 12px;
    left: -6px;
}
.search-wrapper button:hover:before{
    border-right-color: #2196F3;
}
.search-wrapper button:focus:before,
.search-wrapper button:active:before{
        border-right-color: #c42f2f;
}  
.search-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
    border: 0;
    padding: 0;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off" class="search-wrapper cf">
        <input type="text" name="q" placeholder="O que você procura..." required="" />
        <button type="submit" id="button-submit" >Buscar</button>
    </form>
As partes do código na cor vermelha são referentes a cor do botão, as partes na cor verde são referentes a cor do botão ao passar a seta do mouse sobre ele.  As partes em Azul do código você pode modificar para qualquer outro texto.
Compartilhar no Google Plus

Por Matheus Araújo

Web designer e jornalista amador, proprietário do site Mamfonline News. Trabalha desenvolvendo soluções para sites e blogs.

0 comentários:

Postar um comentário

Atenção não poste palavras obscenas, não publique spam