Caixa de buscas personalizada para Blogger

Por Matheus Araújo em agosto 21, 2016

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.

Diicas

domingo, 21 de agosto de 2016