Tutorial - Caixa de busca personalizada + Botões de busca

Alguém poderia seguir esse blog, diwo, perfeito e maravilhoso?Obrigada...

Boa noite pessoas, hoje eu não estou muito feliz T^T, estou em dúvida se sou uma boa blogueira sabe não sei se faço tudo o que poderia fazer pra retribuir o carinho de vocês.
Então não vou enrolar nessa introdução ;c
Me pediram lá na Ask um tutorial e vim postar ele aqui pra vocês.Foi um anônimo que me pediu então fica meio difícil pra avisar a pessoa que eu já postei. Esse tutorial é de como personalizar a caixa de busca o anônimo pediu em hover e na cor lilás mais cabe a vocês escolher a cor do botão então trouxe algumas sugestões no final do post.
Vá no seu editor HTML aperte Ctrl+F e pesquise por ]]></b:skin. Acima disso cole:

.search{
float: left;
font-family: arial !important;}
.searchbar{
height: 20px; /*Altura da caixa*/
width: 120px; /*largura da caixa*/
text-align:center;
color:#CORFONTE;
background: #BACKGROUND!important;
box-shadow: inset 1px 1px 6px  #dcdcdc;
font: 11px arial !important;
border: 2px solid  #000000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.searchbut{
background: url('URL DO BOTÃO');
width:27px; /*Largura do botão*/
height:20px; /*altura do botão*/
border: 0;
padding:2px;
}
.searchbut:hover{
background: url('URL DO BOTÃO HOVER');
width:27px; /*Largura do botão*/
height:20px; /*altura do botão*/
border: 0;
padding:2px;

Já está tudo explicado no código para vocês personalizarem, agora vá no layout do seu blog e adicione um gadget HTML/Java Script cole isso:

<form action="/search" class="search" method="get"> <input class="searchbar" id="s" name="q" placeholder='Digite o que procura' type="text" value="" /> <input class="searchbut" type="submit" value="" /> </form>

Ali no "Digite o que procura" você pode escrever o que quiser.Esses são os botões de busca que vocês podem usar trouxe só na cor roxa e lilás pois estas são as que eu mais gostei:


Espero que tenham gostado, os créditos do tutorial vão para o Pequena Garota, se usarem os botões e o tutorial credite ele.
Beijos =D

17 comentários:

  1. Doreeeei,principalmente agora que eu dei uma de loca e to preparando eu mesma um layout,beijos passa lá ?
    http://opsgastei.blogspot.com.br/2013/08/look-de-la-nuit-blue-and-percy.html

    ResponderExcluir
    Respostas
    1. Awnnn q bom que gostou *-*
      ASHUASHUA' eu também dei uma louca e estou preparando um !!!

      Beijos de Nutella ♥

      Excluir
  2. Nossa, muito lindos, adorei tipoo são fofos *-*

    Beijos, System Tough ♥

    ResponderExcluir
    Respostas
    1. Que bom que gostou T^T

      Beijos de Nutella ♥

      Excluir
  3. ótimo tuto. Adorei os botões de busca,são lindos *--*
    Um beijo
    http//bombasticmusics.blogspot.com

    ResponderExcluir
    Respostas
    1. Que bom que gostou .-
      São lindos mesmo...

      Beijos de Nutella ♥

      Excluir
  4. Awnnnnnnnnn, que fofo o modelinho *O* E as imagens, então? Perfeitas, Viih ♥

    Beijinhos,

    Juu-Chan ;3 | Nescau com Nutella

    ResponderExcluir
    Respostas
    1. Awnnnnnnn que bom que gostou Juu u-u
      Beijos de Nutella ♥

      Excluir
  5. Vih! Você participou do concurso Create no meu blog e do blog Cheirinho Doce e ganhou 2º lugar! parabéns, vá lá conferir as instruções para receber seus premios!
    beijous,
    http://radiant-flower.blogspot.com.br/2013/08/resultado-do-concurso-create.html#more

    ResponderExcluir
    Respostas
    1. Awnnnnnnn Luh eu não acredito \o
      Ah q bom que gostou das minhas respostas idiotas ASHUASHUA'
      Já passei lá...!
      Beijos de Nutella ♥

      Excluir
  6. Fui eu que pedi, UAHEUAHEUAHEUAHEUHA' Tava com vergonha de pedir com minha conta u-u'
    Adorei o tuto, foi essezinho mesmo que eu imaginei! vou usá-lo.
    Mil Beijos ❥
    Garotas Atrevidas ❤ ~clique e visite

    ResponderExcluir
    Respostas
    1. AUHEAUHE'...Não precisa ter vergonha não u_u
      Que bom que te ajudei c:
      Beijos de Nutella ♥

      Excluir
  7. Você é sim uma boa blogueira, believe.
    Já conhecia o tutorial, talvez eu use ele no meu próximo layout.
    Beijos ~


    winter--html.blogspot.com

    ResponderExcluir
    Respostas
    1. Awnnnnnnn briigada Naay, sua diwosa u.u
      Eu adoro esse tutorial, ée muito útil.Use mesmo !!!
      Beijos de Nutella ♥

      Excluir
  8. Oie :D Bem vih, eu vim aqui me despedir de você! Não irei mais fazer parte da blogosfera :( Beijos, e obrigada por tudo.

    ResponderExcluir
    Respostas
    1. E o tuto é bem legal, pena que nunca mais vou usar! :(

      Excluir
    2. #Xatiada :c

      Adeus, Beijos de Nutella ♥

      Excluir

Comente sempre <33

Emoticons para usar:
웃 ღ ♥ ♡ ❤ ❥ ❦ ∴ △ ∞ ☆ ★ ✖ 。◕‿◕。®™☏℡゚✤
❝❞✥ ✦ ✧ ✩ ✫ ✬ ✭ ✮ ✯ ✰ ✱ ✲ ✳ ❃ ❂ ❁ ❀ ✿ ✾ ✽
✼ ✻ ✺ ✹ ✸ ✷ ₪ ❃ ❂ ❁ ❀ ✿ ✾ ✽ ✼ ✻ ✺ ✹ ✸ ✷
✶ ✵ ✴ ❄ ❅ ❆ ❇ ❈ ❉ ❊ ❋ ❖ ▲▼△▽⊿◤◥ ◣◥●••●
❢ ❣ ✐ ✎ ✏ ✍ ✆ ☎ ✄ † ✞ ✝ ✛ ✙ ރ ⌚ ▧ ▨ ▦ ▩
۩ ஜ ಌ ஜ ๑۩۞۩๑ ஜ ஒ ண இஆ ௰ ௫& ૪ ☗ ☖
➸☑ ☒ ☓☟ ☠ ☡ ☢ ☣ ☤ ☥ ☦ ☧ ☨ ☩ ☪ ☫ ☬ ☭ ☮ ☯
➹◎♩♫♭♪♯♬♮♫♯☁☀☃☂♣♥♪♫☼♀♂♦✗✘✚✪✣✤✥☠
♦ ♠ ♥ ♣ ♢ ♤ ♡ ♧☽ ☾● ◯ ☚ ☛ ☜ ☝ ☞ ☟ ✌ ♻ ♼ ♽
☼ ☀ ❂ ☁ ☂ ☃ ☄ ☾ ☽ ❄ ☇ ☈ ⊙ ☉ ℃ ℉ ° ❅ ✺ ϟ ∞ ზ ♫♩♫♭♪♯♬♮♫♩♫♭♪♯♬♮♬♪♫
$ ₣ ¢ £ ¤ ¥ ฿ ₠ ₡ ₢ ₣ ₤ ₥ ₦ ₧ ₨ ₩ ₫ ₪ €
๏̯͡๏ 【ՏՁ】 ะ㋚ะ ๑㋡๑ ʚ㋞ɞ (◠゚̲̅◠ ➩ ➪ ➭ ➮ ➯ ➱
⇌ ⇍ ⇎ ⇏ ⇐ ⇑ ⇒ ⇓ ⇔ ⇕ ⇖ ⇗ ⇘ ⇙ ⇚ ⇛ ↺ ↻
⇜ ⇝ ⇞ ⇟ ⇠ ⇡ ⇢ ⇣ ↩ ↪ ↫ ↬ ↭ ↮ ↯ ↰↱ ↲ ↳↴
↵ ↶ ↷ ↸ ↹ ↼ ↽ ↾ ↿ ⇀ ⇁ ⇂ ⇃ ⇄ ⇅ ⇆ ⇇ ⇈ ⇉ ⇊
← ↑ → ↓ ↔ ↕ ↖ ↗ ↘ ↙ ↚ ↛ ↜ ↝ ↞ ↟ ↠ ↡ ↢ ↣ ↤
↥ ↦ ↧ ➟ ➡ ➢ ➣ ➤ ➥ ➦ ➧ ➨ ➚ ➘ ➙ ➛ ➜ ➝ ➞ ➸
♐ ➲ ➳ ➳ ➴ ➵ ➶ ➷ ➸ ➹ ➺ ➻ ➼ ➽ (◕‿◕✿) 。◕‿◕。 ⊱✿◕‿◕✿⊰(◡‿◡✿)(◕〝◕)
◑▂◐ ◑0◐ ◑︿◐ ◑ω◐ ◑﹏◐ ◑△◐ ◑▽◐
●▂● ●0● ●︿● ●ω● ●﹏● ●△● ●▽●
⊙▂⊙ ⊙0⊙ ⊙︿⊙ ⊙ω⊙ ⊙﹏⊙ ⊙△⊙