Como colocar caixa de pesquisa personalizada!
Autor: Dalva-Pequenos Sonhos | Publicado: 2011-11-21T15:01:00-08:00

Oiie gente! Como sabem temos uma caixinha de pesquisa personalizada na sidebar,e hoje vou ensinar como colocar uma, mas antes queria agradecer e dar os créditos dessa postagem ao Tutoriais Attitude Included onde aprendi esse tutorial.1- Vá em Painel, Design, Elementos da página e adicione um gadget Html/JavaScript e cole o código a seguir : &lt;form action="/search" class="search" method="get"&gt;&lt;br&gt;&lt;input class="searchbar" id="s" name="q" type="text" value="" /&gt;&lt;br&gt;&lt;input class="searchbut" type="submit" value="" /&gt;&lt;br&gt;&lt;/form&gt;&lt;br&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span class="Apple-style-span" style="background-color: rgb(23, 23, 23); "&gt;&lt;form action="/search" class="search" method="get"&gt;&lt;br&gt;&lt;div style="text-align: -webkit-auto;"&gt;&lt;span class="Apple-style-span" &gt;&lt;span class="Apple-style-span" style="font-size: 12px;"&gt;&lt;br&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;span class="Apple-style-span" style="line-height: 14px;"&gt;&lt;span class="Apple-style-span" style="color: rgb(204, 204, 204); font-family: Tahoma; font-size: 10px; line-height: 14px; text-align: justify; background-color: rgb(23, 23, 23); "&gt;&lt;/span&gt;&lt;/span&gt;&lt;/form&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span class="Apple-style-span" style="color: rgb(204, 204, 204); font-family: Tahoma; font-size: 10px; line-height: 14px; text-align: justify; background-color: rgb(23, 23, 23); "&gt;&lt;br&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span class="Apple-style-span" style="font-family: Tahoma; font-size: 14px; line-height: 19px; background-color: rgb(255, 255, 255); "&gt;2- Vá em Painel, Design,  Editar HTML, aperte CTRL+F, procure por e &lt;br&gt;&lt;br&gt;&lt;textarea&gt; ]]&gt;&lt;/b:skin&gt;&lt;br&gt; cole&lt;/span&gt;&lt;b style="text-decoration: none; font-family: Tahoma; font-size: 14px; line-height: 19px; text-align: -webkit-auto; background-color: rgb(255, 255, 255); "&gt;ACIMA fazendo as alterações desejadas&lt;/b&gt;&lt;span class="Apple-style-span" style="font-family: Tahoma; font-size: 14px; line-height: 19px; text-align: -webkit-auto; background-color: rgb(255, 255, 255); "&gt; :&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span class="Apple-style-span" style="font-family: Tahoma; font-size: 14px; line-height: 19px; text-align: -webkit-auto; background-color: rgb(255, 255, 255); "&gt;&lt;br&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span class="Apple-style-span" style="color: rgb(204, 204, 204); font-family: Tahoma; font-size: 10px; line-height: 14px; background-color: rgb(23, 23, 23); "&gt;.search{&lt;/span&gt;&lt;br&gt;&lt;span class="Apple-style-span" style="color: rgb(204, 204, 204); font-family: Tahoma; font-size: 10px; line-height: 14px; text-align: justify; background-color: rgb(23, 23, 23); "&gt;float: &lt;/span&gt;&lt;u style="color: rgb(102, 102, 102); text-decoration: none; border-bottom-width: 3px; border-bottom-style: double; border-bottom-color: rgb(255, 105, 180); font-family: Tahoma; font-size: 10px; line-height: 14px; text-align: justify; background-color: rgb(23, 23, 23); "&gt;left&lt;/u&gt;&lt;span class="Apple-style-span" style="color: rgb(204, 204, 204); font-family: Tahoma; font-size: 10px; line-height: 14px; text-align: justify; background-color: rgb(23, 23, 23); "&gt;; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */&lt;/span&gt;&lt;br&gt;&lt;span class="Apple-style-span" style="color: rgb(204, 204, 204); font-family: Tahoma; font-size: 10px; line-height: 14px; text-align: justify; background-color: rgb(23, 23, 23); "&gt;font-family: &lt;/span&gt;&lt;u style="color: rgb(102, 102, 102); text-decoration: none; border-bottom-width: 3px; border-bottom-style: double; border-bottom-color: rgb(255, 105, 180); font-family: Tahoma; font-size: 10px; line-height: 14px; text-align: justify; background-color: rgb(23, 23, 23); "&gt;Tahoma&lt;/u&gt;&lt;span class="Apple-style-span" style="color: rgb(204, 204, 204); font-family: Tahoma; font-size: 10px; line-height: 14px; text-align: justify; background-color: rgb(23, 23, 23); "&gt;, &lt;/span&gt;&lt;u style="color: rgb(102, 102, 102); text-decoration: none; border-bottom-width: 3px; border-bottom-style: double; border-bottom-color: rgb(255, 105, 180); font-family: Tahoma; font-size: 10px; line-height: 14px; text-align: justify; background-color: rgb(23, 23, 23); "&gt;Tahoma&lt;/u&gt;&lt;span class="Apple-style-span" style="color: rgb(204, 204, 204); font-family: Tahoma; font-size: 10px; line-height: 14px; text-align: justify; background-color: rgb(23, 23, 23); "&gt;; /* Fonte */&lt;/span&gt;&lt;br&gt;&lt;span class="Apple-style-span" style="color: rgb(204, 204, 204); font-family: Tahoma; font-size: 10px; line-height: 14px; text-align: justify; background-color: rgb(23, 23, 23); "&gt;}&lt;/span&gt;&lt;br&gt;&lt;span class="Apple-style-span" style="color: rgb(204, 204, 204); font-family: Tahoma; font-size: 10px; line-height: 14px; text-align: justify; background-color: rgb(23, 23, 23); "&gt;.searchbar{&lt;/span&gt;&lt;br&gt;&lt;span class="Apple-style-span" style="color: rgb(204, 204, 204); font-family: Tahoma; font-size: 10px; line-height: 14px; text-align: justify; background-color: rgb(23, 23, 23); "&gt;height: 20px;&lt;/span&gt;&lt;br&gt;&lt;span class="Apple-style-span" style="color: rgb(204, 204, 204); font-family: Tahoma; font-size: 10px; line-height: 14px; text-align: justify; background-color: rgb(23, 23, 23); "&gt;width: 140px;&lt;/span&gt;&lt;br&gt;&lt;span class="Apple-style-span" style="color: rgb(204, 204, 204); font-family: Tahoma; font-size: 10px; line-height: 14px; text-align: justify; background-color: rgb(23, 23, 23); "&gt;color: &lt;/span&gt;&lt;u style="color: rgb(102, 102, 102); text-decoration: none; border-bottom-width: 3px; border-bottom-style: double; border-bottom-color: rgb(255, 105, 180); font-family: Tahoma; font-size: 10px; line-height: 14px; text-align: justify; background-color: rgb(23, 23, 23); "&gt;#FF82AB&lt;/u&gt;&lt;span class="Apple-style-span" style="color: rgb(204, 204, 204); font-family: Tahoma; font-size: 10px; line-height: 14px; text-align: justify; background-color: rgb(23, 23, 23); "&gt;; /* Cor da fonte  */&lt;/span&gt;&lt;br&gt;&lt;span class="Apple-style-span" style="color: rgb(204, 204, 204); font-family: Tahoma; font-size: 10px; line-height: 14px; text-align: justify; background-color: rgb(23, 23, 23); "&gt;-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background: #FFF; /* Cor de fundo da parte onde escrevemos */&lt;/span&gt;&lt;br&gt;&lt;span class="Apple-style-span" style="color: rgb(204, 204, 204); font-family: Tahoma; font-size: 10px; line-height: 14px; text-align: justify; background-color: rgb(23, 23, 23); "&gt;}&lt;/span&gt;&lt;br&gt;&lt;span class="Apple-style-span" style="color: rgb(204, 204, 204); font-family: Tahoma; font-size: 10px; line-height: 14px; text-align: justify; background-color: rgb(23, 23, 23); "&gt;.searchbut{&lt;/span&gt;&lt;br&gt;&lt;span class="Apple-style-span" style="color: rgb(204, 204, 204); font-family: Tahoma; font-size: 10px; line-height: 14px; text-align: justify; background-color: rgb(23, 23, 23); "&gt;background: url('&lt;/span&gt;&lt;u style="color: rgb(102, 102, 102); text-decoration: none; border-bottom-width: 3px; border-bottom-style: double; border-bottom-color: rgb(255, 105, 180); font-family: Tahoma; font-size: 10px; line-height: 14px; text-align: justify; background-color: rgb(23, 23, 23); "&gt;http://i39.tinypic.com/25ezh8z.png&lt;/u&gt;&lt;span class="Apple-style-span" style="color: rgb(204, 204, 204); font-family: Tahoma; font-size: 10px; line-height: 14px; text-align: justify; background-color: rgb(23, 23, 23); "&gt;'); /* Link da imagem do botão de pesquisar*/&lt;/span&gt;&lt;br&gt;&lt;span class="Apple-style-span" style="color: rgb(204, 204, 204); font-family: Tahoma; font-size: 10px; line-height: 14px; text-align: justify; background-color: rgb(23, 23, 23); "&gt;width:30px;&lt;/span&gt;&lt;br&gt;&lt;span class="Apple-style-span" style="color: rgb(204, 204, 204); font-family: Tahoma; font-size: 10px; line-height: 14px; text-align: justify; background-color: rgb(23, 23, 23); "&gt;height:30px;&lt;/span&gt;&lt;br&gt;&lt;span class="Apple-style-span" style="color: rgb(204, 204, 204); font-family: Tahoma; font-size: 10px; line-height: 14px; text-align: justify; background-color: rgb(23, 23, 23); "&gt;border: 0;&lt;/span&gt;&lt;br&gt;&lt;span class="Apple-style-span" style="color: rgb(204, 204, 204); font-family: Tahoma; font-size: 10px; line-height: 14px; text-align: justify; background-color: rgb(23, 23, 23); "&gt;padding:7px;&lt;/span&gt;&lt;br&gt;&lt;span class="Apple-style-span" style="color: rgb(204, 204, 204); font-family: Tahoma; font-size: 10px; line-height: 14px; text-align: justify; background-color: rgb(23, 23, 23); "&gt;}&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span class="Apple-style-span" style="color: rgb(204, 204, 204); font-family: Tahoma; font-size: 10px; line-height: 14px; text-align: justify; background-color: rgb(23, 23, 23); "&gt;  &lt;/span&gt;&lt;/div&gt;&lt;div style="text-align: left;"&gt;&lt;span class="Apple-style-span"&gt;&lt;span class="Apple-style-span" style="line-height: 10px;"&gt;Onde tem &lt;/span&gt;&lt;/span&gt;&lt;span class="Apple-style-span" style="font-family: Tahoma; font-size: 10px; line-height: 14px; background-color: rgb(23, 23, 23); "&gt;&lt;span class="Apple-style-span"&gt;'&lt;/span&gt;&lt;/span&gt;&lt;u style="text-decoration: none; border-bottom-width: 3px; border-bottom-style: double; border-bottom-color: rgb(255, 105, 180); font-family: Tahoma; font-size: 10px; line-height: 14px; background-color: rgb(23, 23, 23); "&gt;&lt;span class="Apple-style-span"&gt;http://i39.tinypic.com/25ezh8z.png               Substitua pelo URL do seu botão de pesquisar!&lt;/span&gt;&lt;/u&gt;&lt;/div&gt;&lt;div style="text-align: left;"&gt;&lt;u style="text-decoration: none; border-bottom-width: 3px; border-bottom-style: double; border-bottom-color: rgb(255, 105, 180); font-family: Tahoma; font-size: 10px; line-height: 14px; background-color: rgb(23, 23, 23); "&gt;&lt;span class="Apple-style-span"&gt;&lt;br&gt;&lt;/span&gt;&lt;/u&gt;&lt;/div&gt;&lt;div style="text-align: left;"&gt;&lt;span class="Apple-style-span"&gt;&lt;span class="Apple-style-span" style="line-height: 11px; "&gt;ESPERO QUE TENHAM GOSTADO ^^ AMANHÃ TEM MAIS! BEIJOS,Dalva!&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;2- Vá em Painel, Design,  Editar HTML, aperte CTRL+F, procure por  ]]&gt;&lt;/b:skin&gt;e cole o código abaixo ACIMA delefazendo as alterações desejadas : .search{&lt;br&gt;float: left; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */&lt;br&gt;font-family: Tahoma, Tahoma; /* Fonte */&lt;br&gt;}&lt;br&gt;.searchbar{&lt;br&gt;height: 20px;&lt;br&gt;width: 140px;&lt;br&gt;color: #FF82AB; /* Cor da fonte  */&lt;br&gt;-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background: #FFF; /* Cor de fundo da parte onde escrevemos */&lt;br&gt;}&lt;br&gt;.searchbut{&lt;br&gt;background: url('http://i39.tinypic.com/25ezh8z.png'); /* Link da imagem do botão de pesquisar*/&lt;br&gt;width:30px;&lt;br&gt;height:30px;&lt;br&gt;border: 0;&lt;br&gt;padding:7px;&lt;br&gt;}Depois Salve e pronto!!! :)