>
Image Map

Caixinha de pesquisa Personalizada

1 de agosto de 2013 |
1. Vá no Design >> Elementos da Página >> Adiconar gadget >> GHTML/Javascript e cole o código abaixo sem modifica-lo.


 <form action ="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" type="text" value="""/>
<input class="searchbut" type="submit" value=""/>
</form>



  2. Vá no seu HTML, e usando o CTRL+F ou F3, procure por:

                ]]></b:skin
Cole acima da tag, o código abaixo

search{
float: left; /*Posicionamento esquerdo */
font-family: Tahoma, Tahoma; /* Fonte */
}
 .searchbar{
height: 20px;
width: 140px;
color: #FF82AB; /* Cor da fonte */
-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background: #FFF; /* Cor de fundo da parte onde é escrito */
} .searchbut{
background: url('URL DO BOTÃO'); /* Link da imagem do botão de pesquisar*/
width:30px;
height:30px;
border: 0;
padding:7px;
}





#1 : Vá no seu HTML , dê Ctrl + F ou F3 e procure por </b:skin> e acima dele cole :
/*** Caixa de pesquisa ***/

#searchthis {
  width:90%;
  margin-left:9px;
  margin-top:15px;
  margin-bottom:-18px;
  display:inline-block;
  zoom:1;
  *display:inline;
  border:solid 1px #efe7dc;
  padding:3px 5px;
  border-radius:2em;
  box-shadow:0 1px 0px rgba(0,0,0,.1);
  background: #f6efe5;
  background:-webkit-gradient(linear, left top, left bottom,from(#fff),to(#efe7dc));
  background:-moz-linear-gradient(top, #fff, #efe7dc);
  filter:progid [:D] XImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#efe7dc');
  -ms-filter:progid [:D] XImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#efe7dc')
}
#searchform input {
  border:0 !important;
  float:left;
  padding:6px 10px;
  width:78%;
  border-radius:15px;
  background:#fff;
  box-shadow:inset 0 1px 3px #ccc;
  text-align:center;
  cursor:text;
  color:#ac1f36;
  font:italic 12px georgia;
  text-shadow:0 1px #fff;
}
#searchBox{
  background: #fff;
  padding: 6px 6px 6px 8px;
  width: 180px;
  border: solid 1px #bcbbbb;
  outline: none;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
  color:#e89ca9;
}
#submit-button {
  border:0 !important;
  float:right;
  background:#fb94b6;
  cursor:pointer;
  color:#fff;
  padding:0 5px 2px 5px;
  height:26px;margin-left:-20px;
  border-radius:25px;
  box-shadow:0 0 2px #aaa;
  text-shadow:0 -1px #aaa
}
#submit-button:hover {
  background:#cd7391;
}
#2 : Agora vá em Design → Editar HTML → Adicione um gadget de HTML/Javascript e cole o seguinte código:
<form action='/search' class='right' id='searchthis' method='get'>

<input class="input-text" id="searchBox" name="q" onblur="if(this.value==&quot;&quot;)this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value=&quot;&quot;;" type="text" value="Pesquisar no blog" vinput="" />
<input class="searchbutton" id="submit-button" type="submit" value="OK" /></form>


Para usar no seu blog adc um gadget html e cole o codigo do qual vc deseja! Espero que gostem!
   
Essa caixinha tem o botão de clicar mais aki não quer aparecer!



<form action="/search" method="get"> <img src="http://1.bp.blogspot.com/-bht90PxFWkI/UDZB2AoUBuI/AAAAAAAAGGg/hxDyniaucYo/s1600/minigifa+by+annyz+kawaii+blog+%2826%29.gif" /> <input type="text" name="q" value="" style="width:160px; height:19px; background-color:#ffffff; color: #000000; font-size: 11px; border: 1px double #000000;border-radius:5px;box-shadow: 0 0 0.4em #000000 , 0 0 0.4em#000000;" /> <img src="http://1.bp.blogspot.com/-bht90PxFWkI/UDZB2AoUBuI/AAAAAAAAGGg/hxDyniaucYo/s1600/minigifa+by+annyz+kawaii+blog+%2826%29.gif" />
<br />
<br />
<input type="submit" value="Pesquisar
" style="font-size: 12px; background-color:#ffffff; color: #ffaad5; border: 1px dashed #ffaad5;border-radius:5px;" /></form></cente

Nenhum comentário:

Postar um comentário

Olá Gurias e Guris também porque não ♥
Fico muito feliz com seu comentário!!
------------------------------------------------------------------
Agora alguns recadinhos importantes:

♥ Deixe seu link para que eu possa retribuir sua visita;
♥ Se estiver seguindo aqui, me avise para que eu possa seguir seu também;
♥ Comente com todo seu carinho, leia o poste e comente algo relacionado, que retribuirei com o mesmo gesto; ♥
♥ Meus comentários são moderados por segurança, e que eu tenha controle e que eu não deixe de responder ninguém.
♥ Para dúvidas e parcerias entre em contato por e-mail: ~coffecomaszamigas@gmail.com~

~ Obrigada e Volte sempre! ♥
Café com as Zamigas |Luana Mendes

Instagram: @luanamendesblog
Canal no Youtube: Luana
https://www.youtube.com/user/meninadivadamoda