8 Personagens de anime Calmos que causaram Estragos depois de Perder a Calma

em
0

Caixa de pesquisa / Search Box Kawaii

em

Konnichiwaa fadinhas e elfos! Como vocês estão? Não deu pra postar ontem, então será hoje! kk. Hoje venho com um post de personalização para blogs, como deixar sua caixinha de pesquisa super fofinha! Ela é arredondada, com cores clarinhas e ainda um mini gif no cantinho! Também explicarei como fazer caso prefira uma versão sua! E então, let's go?

Você pode adicionar em qualquer lugar do seu blog (que aceite html), é só copiar e colar. Sim, simples assim e funciona certinho! Mas caso queira deixa-lo na sidebar vá em Layout + Adicionar um Gadget  + HTML/Javascript, cole e salve!


<center>
<form action="/search" method="get">
 <input type="text" name="q" value="" style="width:130px; height:25px; color: #8f4b19; background: url('http://38.media.tumblr.com/tumblr_mdpf72BeWH1qdlkyg.gif') #e9e1ff   left center no-repeat;  padding: 0px 20px; font-family: Verdana; font-size: 11px; border: 1px solid  #e9e1ff;border-radius:10px; box-shadow: 0 0 0.4em #e9e1ff , 0 0 0.4em #e9e1ff;" />
<input class="SEARCHBUTTON" id="SUBMIT-BUTTON" type="SUBMIT" value="Ir" style="color: #8f4b19; BACKGROUND:#e1d7ff;  BORDER:0 !IMPORTANT; height:25px; border-radius: 20px;
 box-shadow: 0 0 0.4em #e9e1ff , 0 0 0.4em #e9e1ff; " /></form>
</center>


<center>
<form action="/search" method="get">
 <input type="text" name="q" value="" style="width:130px; height:25px; color: #c0a393; background: url('http://gazo.emoji7.jp/img/04tvl_650616/%28%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%81%AA%E3%81%97%29_m.gif') #ffebf4   left center no-repeat;  padding: 0px 20px; font-family: Verdana; font-size: 11px; border: 1px solid  #ffebf4; border-radius:10px; box-shadow: 0 0 0.4em #ffebf4 , 0 0 0.4em #ffebf4;" /><input class="SEARCHBUTTON" id="SUBMIT-BUTTON" type="SUBMIT" value="Ir" style="color: #c0a393; background:#ffebf4;  border:0 !IMPORTANT; height:25px; border-radius: 10px;
 box-shadow: 0 0 0.4em #ffebf4 , 0 0 0.4em #ffebf4; " /></form>
</center>


<center>
<form action="/search" method="get">
 <input type="text" name="q" value="" style="width:130px; height:25px; color: #8b5945; background: url('https://2.bp.blogspot.com/-otIdqTth7z0/WTH20LuB35I/AAAAAAAAVjg/TC4R5WUyfIwS5NP6sJZhwtS9c6evoJq1wCEw/s1600/minigifs%2B%252817%2529.gif') #fffcdb   left center no-repeat;  padding: 0px 20px; font-family: Verdana; font-size: 11px; border: 1px solid  #fffcdb;border-radius:10px; box-shadow: 0 0 0.4em #fffcdb , 0 0 0.4em #fffcdb;" />
<input class="SEARCHBUTTON" id="SUBMIT-BUTTON" type="SUBMIT" value="Ir" style="color: #8b5945; BACKGROUND:#fffcdb;  BORDER:0 !IMPORTANT; height:25px; border-radius: 20px; box-shadow: 0 0 0.4em #fffcdb , 0 0 0.4em #fffcdb; " /></form>
</center>


<center>
<form action="/search" method="get">
 <input type="text" name="q" value="" style="width:130px; height:25px; color: #8f4b19; background: url('https://4.bp.blogspot.com/-AwlOJkkYML4/WTH20VFjAnI/AAAAAAAAVjw/J3AogUWwIbom2GGHjJe44Qp7TYvXv_LBQCEw/s1600/minigifs%2B%252820%2529.gif') #bae9ff   left center no-repeat;  padding: 0px 20px; font-family: Verdana; font-size: 11px; border: 1px solid  #bae9ff;border-radius:10px; box-shadow: 0 0 0.4em #bae9ff , 0 0 0.4em #bae9ff;" />
<input class="SEARCHBUTTON" id="SUBMIT-BUTTON" type="SUBMIT" value="Ir" style="color: #ffffff; BACKGROUND:#bae9ff;  BORDER:0 !IMPORTANT; height:25px; border-radius: 20px;
 box-shadow: 0 0 0.4em #bae9ff , 0 0 0.4em #bae9ff; " /></form>
</center>


<center>
<form action="/search" method="get">
<input name="q" style="background: url('http://68.media.tumblr.com/93456d975e3540f47d2d3d1d31823fea/tumblr_inline_no3kjenLun1qid2nw_500.gif') #def2ea left center no-repeat; border-radius: 10px; border: 1px solid #def2ea; box-shadow: 0 0 0.4em #def2ea , 0 0 0.4em #def2ea; color: #c09383; font-family: &quot;verdana&quot;; font-size: 11px; height: 25px; padding: 0px 20px; width: 130px;" type="text" value="" />
<input class="SEARCHBUTTON" id="SUBMIT-BUTTON" style="background: #def2ea; border-radius: 20px; border: 0; box-shadow: 0 0 0.4em #def2ea , 0 0 0.4em #def2ea; color: #c09383; height: 25px;" type="SUBMIT" value="Ir" /></form>
</center>


<center>
<form action="/search" method="get">
<input name="q" style="background: url('https://1.bp.blogspot.com/-3OP_hlZbCnY/WTIDC5lSEZI/AAAAAAAAVpg/kZUlGszHEvIPs03QUYkWTffzm0XBAeFHACLcB/s1600/mymelodymini%2B%252817%2529.gif') #ffe1d6 left center no-repeat; border-radius: 10px; border: 1px solid #ffe1d6; box-shadow: 0 0 0.4em #ffe1d6 , 0 0 0.4em #ffe1d6; color: #c09383; font-family: &quot;verdana&quot;; font-size: 11px; height: 25px; padding: 0px 20px; width: 130px;" type="text" value="" />
<input class="SEARCHBUTTON" id="SUBMIT-BUTTON" style="background: #ffe1d6; border-radius: 20px; border: 0; box-shadow: 0 0 0.4em #ffe1d6 , 0 0 0.4em #ffe1d6; color: #c09383; height: 25px;" type="SUBMIT" value="Ir" /></form>
</center>

Fofinhos née? Vocês podem usar esses a vontade! Mas caso queira fazer algumas modificações explicarei agora.

EXEMPLO: <center><form action="/search" method="get">
<input type="text" name="q" value="" style="width:130px; height:25px; color: #c0a393; background:url('http://68.media.tumblr.com/tumblr_m7eh9aB96n1qdlkyg.gif') #ffebf4
left center no-repeat;  padding: 0px 20px; font-family: Verdana; font-size: 11px; border: 1px solid  #ffebf4; border-radius:10px; box-shadow: 0 0 0.4em #ffebf4 , 0 0 0.4em #ffebf4;" />
<input class="SEARCHBUTTON" id="SUBMIT-BUTTON" type="SUBMIT" value="Ir" style="color: #c0a393; background:#ffebf4;  border:0 !IMPORTANT; height:25px; border-radius: 10px; box-shadow: 0 0 0.4em #ffebf4 , 0 0 0.4em #ffebf4; " /></form>
</center>

Width: É o tamanho da largura da caixinha
Height: Altura da caixinha
Background: url: Endereço de imagem do GIF com tamanho 20x20px. Pode usar o seu, ou se preferir veja mais opções nesse post → Mini gifs kawaii variados
Hexadecimal: # de cores, os que deixei em destaque são aqueles que alteram a cor principal (fundos, sombras e etc)
< center >: Você pode tirar caso não tenha necessidade de deixa-lo centralizado em algum lugar.



E é isso! Por hoje é só, espero que tenham gostado do post! Caso use, deixe seu blog nos comentários para eu visitar. Fonte: Annyz . Até mais e Kissus! Tem postagem toda quarta e sexta então segue o bloguinho e visite sempre! Redes Sociais do Sweet Magic: Facebook | Twitter | We heart It | Bloglovin | Pinterest * 

Comentários

  1. Leslie Leite23 de março de 2018 às 12:18

    Primeiramente, as estrelinhas abaixo da lua no cabeçalho do blog sempre se mexeram, começaram agora ou eu tô vendo coisas? AHUSHUAHSU.
    Segundamente, gosto demais dos seus tutoriais, são sempre super bem explicadinhos e essas caixinhas de pesquisa são muito fofas.
    Beijo, www.apenasleiteepimenta.com.br

    ResponderExcluir
    Respostas
    1. June Damasceno23 de março de 2018 às 14:27

      Oiii! Você não tá vendo coisas não kkkkk, eu fiz a animação nelas mesmo, mas não faz muito tempo, foi mês passado se não me engano. Ficou legal?
      Que bom que gosta, eu fico muito feliz! Obrigadaaaaa! Kissus!

      Excluir

Postar um comentário