28.7.13

Excluisvo: Barra de pesquisa rotativa + Barra de pesquisa aumentativa


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'.


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 aquiperdido?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

10 comentários:

  1. Achei legal a aumentativa,amei os tutos,muito útil para quem gosta de personalizar tudo!
    Beijos:3
    sckittyworld.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada! É verdade Fernanda beijos :3

      Excluir
  2. Amor já coloquei seu novo link na elite ><

    Gostei das caixinhas, mas gostei mais dessa com Zoom haha vou usar no próximo lay u-u

    http://forever-teens-89.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Ah ok.

      Também gostei mas da zoom Ahuash'
      Beijos 939

      Excluir
  3. Adorei os tutoriais,a com zoom é mais legal :)
    beijos
    quemprecisadetvparaverbeyonce.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Obrigada! Asahuas todo mundo gostou mais da zoom <3
      beijos 939

      Excluir
  4. Muito legal mas prefiro o normal mesmo uashsh
    ♥BibiSousa
    www.Bikoti.net

    ResponderExcluir
  5. Que lindas Rafah *-* nunca tinha visto uma barrinha que rodasse ahushaush vou por no meu próximo lay *-*

    cupcake-de-amora.blogspot.com

    ResponderExcluir

Hey, que bom que irá comentar! Mas, leia as regras;

- Comente sobre o post >3<
- Deixe o link do seu blog no final, retribuirei
- Respondo todos os comentários
- Retribuo todos os comentários
- Não comente besteira, nem seja racista :3
- Criticas construtivas são bem vindas :D
- Sigo de Volta todos que me seguirem primeiro.