Hey pessoal!
Primeiramente, peço-lhes desculpas por não ter postado mais cedo, como vocês devem saber hoje é domingo e aqui na minha cidade é dia de feira, e como a minha mãe ainda esta com o braço quebrado tive que sair com ela para auxilia-lá. Ah, e cansei de fazer aquelas ilustrações legendadas rsrs, agora vão ser essas normais mesmo. Bom, agora vamos falar das "barras".
Estava precisando urgentemente de uma barra de pesquisa legal para meu novo lay, pesquisei em várioooos blogs, mas todas são reblogadas do Kw, aff. Então peguei um código normal e fui modificando ele conforme minha necessidade, minha preferida foi a aumentativa, achei ela mais 'romântica'.
Vamos ver a PREVIEW da barra Rotativa & a PREVIEW² da barra Aumentativa
Gostaram? Me digam >3< mas quem quiser aplicar no blog faça o seguinte:
1. Barra de pesquisa rotativa:
Para usar essa linda barra, vá em Layout > Adicionar um Gadget > HTML/JavaScript, e nele cole o seguinte código:
<style>
/*---Barra De Pesquisa Personalizada Por sweeet-flower.blogspot.com---*/
.search{
float: center;
font-family: Arial; /*Fonte*/
}
.searchbar{
border: 1px transparent solid; /*Não mexer*/
outline: none; /*Não mexer*/
color:#777; /*Cor da letra ao digitar*/
height: 24px; /*Altura da barra*/
width: 220px; /*Largura da Barra*/
font: 12px Arial; /*Tamanho e tipo de fonte*/
-webkit-transition-duration: 2s; /*Não mexer*/
background: #eee; /*Cor do fundo da barra*/
text-align: center; /*Alinhamento do texto, troque por left para esquerda OU right para direita*/
-moz-box-shadow:inset 0 0 5px #8ca8f8; /*Cor da sombra*/
-webkit-box-shadow:inset 0 0 5px #8ca8f8; /*Cor da sombra, repita a de cima*/
box-shadow:inset 0 0 5px #8ca8f8;/*Cor da sombra, repita a de cima*/
box-shadow:0 0 1em #8ca8f8;/*Cor da sombra, repita a de cima*/
-webkit-border-radius:5px; /*Bordas arredondadas*/
-moz-border-radius:5px;/*Bordas arredondadas, repita a de cima*/
border-radius: 5px;/*Bordas arredondadas, repita a de cima*/
}
.searchbar:hover /*---Barra em Hover, ao passar o mouse por cima----*/{
border: 1px transparent solid; /*Não mexa ;)*/
outline: none;/*Não mexa ;)*/
height: 24px; /*Altura da barra hover*/
width: 220px; /*largura da barra hover*/
background: #f1e4fa; /*Cor do fundo hover*/
-moz-box-shadow:inset 0 0 5px #a562cc; /*Cor da Sombra*/
-webkit-box-shadow:inset 0 0 5px #a562cc; /*Cor da sombra, repita a de cima*/
-webkit-box-shadow:0 0 0.9em #a562cc;/*Cor da sombra, repita a de cima*/
box-shadow:inset 0 0 5px #a562cc;/*Cor da sombra, repita a de cima*/
box-shadow:0 0 1em #a562cc;/*Cor da sombra, repita a de cima*/
-webkit-border-radius:5px; /*Bordas arredondadas*/
-moz-border-radius:5px; /*Bordas arredondadas, repita a de cima*/
border-radius: 5px;/*Bordas arredondadas, repita a de cima*/
-webkit-transform: rotate(360deg); /*Não mexa ;)*/
-moz-transform: rotate(360deg);/*Não mexa ;)*/
-khtml-transform: rotate(360deg);/*Não mexa ;)*/
-z-transform: rotate(360deg);/*Não mexa ;)*/
transform: rotate(360deg);/*Não mexa ;)*/
-webkit-transition-duration: 2.3s;/*Não mexa ;)*/
}
.searchbut{ /*----Não mexa em NADA aqui ;)*/
background: none;
height: 0;
width: 0;
border: 0;
border-radius: 0px;
color: none;
padding:0px;
}
</style>
<center>
<center>
<form action="/search" class="search" method="get"> <input class="searchbar" id="s" name="q" placeholder='Search' type="text" value="" /> <input class="searchbut" type="submit" value="" /> </form></center>
</div>
</div></center>
2. Barra de pesquisa Aumentativa
Para usar essa linda barra², vá em Layout > Adicionar um Gadget > HTML/JavaScript, e nele cole o seguinte código:
<style>
/*---Barra De Pesquisa Personalizada Por sweeet-flower.blogspot.com---*/.search{
float: center;
font-family: Arial; /*Fonte*/
}
.searchbar{
border: 1px transparent solid; /*Não mexer*/
outline: none; /*Não mexer*/
color:#777; /*Cor da letra ao digitar*/
height: 24px; /*Altura da barra*/
width: 220px; /*Largura da Barra*/
font: 12px Arial; /*Tamanho e tipo de fonte*/
-webkit-transition-duration: 2s; /*Não mexer*/
background: #eee; /*Cor do fundo da barra*/
text-align: center; /*Alinhamento do texto, troque por left para esquerda OU right para direita*/
-moz-box-shadow:inset 0 0 5px #93664a; /*Cor da sombra*/
-webkit-box-shadow:inset 0 0 5px #93664a; /*Cor da sombra, repita a de cima*/
box-shadow:inset 0 0 5px #93664a;/*Cor da sombra, repita a de cima*/
box-shadow:0 0 1em #93664a;/*Cor da sombra, repita a de cima*/
-webkit-border-radius:5px; /*Bordas arredondadas*/
-moz-border-radius:5px;/*Bordas arredondadas, repita a de cima*/
border-radius: 5px;/*Bordas arredondadas, repita a de cima*/
}
.searchbar:hover /*---Barra em Hover, ao passar o mouse por cima----*/{
border: 1px transparent solid; /*Não mexa ;)*/
outline: none;/*Não mexa ;)*/
height: 24px; /*Altura da barra hover*/
width: 220px; /*largura da barra hover*/
background: #e5eefb; /*Cor do fundo hover*/
-moz-box-shadow:inset 0 0 5px #80aef2; /*Cor da Sombra*/
-webkit-box-shadow:inset 0 0 5px #80aef2; /*Cor da sombra, repita a de cima*/
-webkit-box-shadow:0 0 0.9em #80aef2;/*Cor da sombra, repita a de cima*/
box-shadow:inset 0 0 5px #80aef2;/*Cor da sombra, repita a de cima*/
box-shadow:0 0 1em #80aef2;/*Cor da sombra, repita a de cima*/
-webkit-border-radius:5px; /*Bordas arredondadas*/
-moz-border-radius:5px; /*Bordas arredondadas, repita a de cima*/
border-radius: 5px;/*Bordas arredondadas, repita a de cima*/
-webkit-transform: scale(1.6); /*Não mexa ;)*/
-moz-transform: scale(1.6);/*Não mexa ;)*/
-khtml-transform: scale(1.6);/*Não mexa ;)*/
-z-transform: scale(1.6);/*Não mexa ;)*/
transform: scale(1.6);/*Não mexa ;)*/
-webkit-transition-duration: 2.3s;/*Não mexa ;)*/
}
.searchbut{ /*----Não mexa em NADA aqui ;)*/
background: none;
height: 0;
width: 0;
border: 0;
border-radius: 0px;
color: none;
padding:0px;
}
</style><center><center>
<form action="/search" class="search" method="get"> <input class="searchbar" id="s" name="q" placeholder='Search' type="text" value="" /> <input class="searchbut" type="submit" value="" /> </form></center>
</br>
Sei que os códigos são bem grandes rsrs, mas é bem fácil de aplica-los ;) e estão vendo no destaque ali 'search'?(tem nos dois códigos) Vocês podem mudar essa palavra, por qualquer outra palavra que vocês quiserem, exemplo: procure aqui, perdido?, digite, etc... O resto vocês podem ver que está tudo legendado com /*'*/ então não tem como errar!
Beijos e nada de repassar sem créditos, se usar credite-me por favor :D
Achei legal a aumentativa,amei os tutos,muito útil para quem gosta de personalizar tudo!
ResponderExcluirBeijos:3
sckittyworld.blogspot.com
Obrigada! É verdade Fernanda beijos :3
ExcluirAmor já coloquei seu novo link na elite ><
ResponderExcluirGostei das caixinhas, mas gostei mais dessa com Zoom haha vou usar no próximo lay u-u
http://forever-teens-89.blogspot.com.br/
Ah ok.
ExcluirTambém gostei mas da zoom Ahuash'
Beijos 939
Adorei os tutoriais,a com zoom é mais legal :)
ResponderExcluirbeijos
quemprecisadetvparaverbeyonce.blogspot.com.br
Obrigada! Asahuas todo mundo gostou mais da zoom <3
Excluirbeijos 939
Muito legal mas prefiro o normal mesmo uashsh
ResponderExcluir♥BibiSousa
www.Bikoti.net
Ashuashu ok então <3
ExcluirQue lindas Rafah *-* nunca tinha visto uma barrinha que rodasse ahushaush vou por no meu próximo lay *-*
ResponderExcluircupcake-de-amora.blogspot.com
Obrigada! Asahusa nem eu <3
Excluir