Caixa de Pesquisa Personalizada



Ai que lindos *u*

Ola meninas trouxe mais um tutorial super útil para vocês, bora ao tutorial
Créditos:Kawaii World

1. Vá em Design >>> Elementos da página e adicione um novo gadget de HTML/Javascript. Cole nele:

<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. Agora vá em editar HTML e procure por "]]></b:skin>"

 

3. Acima da tag cole o seguinte código:

.search{
float: left; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */
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 escrevemos */
}
.searchbut{
background: url('http://i39.tinypic.com/25ezh8z.png'); /* Link da imagem do botão de pesquisar*/
width:30px;
height:30px;
border: 0;
padding:7px;
}
 

Resultado vai ser parecido com este:

Visualize e se estiver certo salve
Beijinhos para vocês e aproveitem o domingo, ate o próximo tutorial.



Barra de Rolagem Colorida

Oi meninas trouxe mais um tutorial para voces espero que gostem.

♥Creditos:Sweet Dreams

1. Vá em Design >>>Editar HTML>>> Ctrl+F

]]></b:skin>

                                    2. Antes de ]]></b:skin>, coloque:
                         
                         

        *{
        scrollbar-face-color:#FF69B4;
        scrollbar-highlight-color:#FF69B4;
        scrollbar-3dlight-color:#343434;
        scrollbar-darkshadow-color:#343434;
        scrollbar-shadow-color:#FF69B4;
        scrollbar-arrow-color:#343434;
        scrollbar-track-color:#343434;
        }

        ::-webkit-scrollbar {width: 12px; height: 4px; background: #343434; }
        ::-webkit-scrollbar-thumb { background: #FF69B4; }

 

3.No código em rosa você coloca a cor da  cor da barra, e no que esta em azul coloque a cor de fundo( tabela de cores aqui) depois visualize, se tudo estiver certinho salve e pronto, foi isso meninas ate a proxima beijos.

Arredonde as imagens do blog



                           Hoy estou fazendo um tutorial para voces, vamos começar?

                                                                  Vá em seu HTML

Se você usa o modelo antigo, vá em Desing>>> Editar HTML

Se você usa o novo modelo do blogger, vá em Modelo >>>Editar HTML >>>Prosseguir

 

dê um CTRL + F  e procure por:

 

.post-body {

 

Vai ter um codigo assim:

 

.post-body {
  line-height: 1.4;
  position: relative;
}

Abaixo de }, cole:

.post img {
-moz-border-radius: 8px;
-webkit-boder-radius: 8px;
border-radius: 8px;
}

Visualize e se tudo estiver certo salve

Creditos do tutorial:The Lovers

Beijos e ate o proximo tutorial

 

Blog Completo e Pronto

Oie!!!Essa postagem é uma postagem teste.


Esse blog contém:

Negrito,Sublinhado e Itálico automáticos;
Menu com mensagem e efeito hover na sidebar;
Link-me;
Seleção Colorida;
Título dos Gadgets em Hover;
Início,Recentes e Antigas personalizados;
Links em Hover;
Blockote;
Seta simples ao topo;
Área dos posts e da Sidebar arredondadas;
Fonte personalizada;

Link de Teste

Tudo feito pela Giovana do Viciadas em Cupcakes.