Antes de começarmos, vale saber em que parte do HTML dos modelos do Blogger você poderá usá-los não é? Se for personalizar título do blog, procure por .Header h1 {mude o que houver entre as chaves pelo código desejado}; se for os títulos dos posts e comentários, acrescente antes de /b:skin: .post h3 a, .post h3 a:visited, .post h3, .comments h4 {código do modelo que gostar}; se for nos títulos de gadgets da sidebar, faça como nos títulos de postagem, acrescentando antes de /b:skin, .sidebar .widget h2 {...código}.
Para menus, textos ou frases que queira destacar, cole antes de /b:skin o Css, e onde quiser que apareça, por exemplo, em um novo gadget HTML/JavaScript, o HTML.
1. Colorful: Texto com sombras coloridas! Adicione o código abaixo antes de /b:skin:
@import url(http://fonts.googleapis.com/css?family=Righteous);
.colorido {
font-family: "Righteous", cursive;
font-size: 3em;
font-weight: bold;
color: rgb(255,217,252);/*cor 1*/
/*cor 2*/
text-shadow: 0 2px 0 rgb(255,255,219),
0 3px 2px rgb(255,255,219),
/* cor 3*/
0 3px 0 rgb(255,201,216),
0 5px 0 rgb(255,201,216),
0 6px 2px rgb(255,201,216),
/* cor 4 */
0 6px 0 rgb(189,245,255),
0 8px 0 rgb(189,245,255),
0 9px 2px rgb(189,245,255),
/* cor 5 */
0 9px 0 rgb(246,204,255),
0 11px 0 rgb(246,204,255),
0 12px 2px rgb(246,204,255),
/* cor 6 */
0 12px 0 rgb(217,201,255),
0 14px 0 rgb(217,201,255),
0 15px 2px rgb(217,201,255),
/* cor 7 */
0 15px 0 rgb(152,255,244),
0 17px 0 rgb(152,255,244),
0 17px 2px rgb(152,255,244);
}
E isso no HTML:
<span class='colorido'>Escreva aqui</span>
2. Fire: Parece que...
Código CSS:
@import url(http://fonts.googleapis.com/css?family=Changa+One);
.fire{
background: #000;
width: 650px;
color: white;
text-align: center;
font-family:'Changa One', cursive;
font-size: 35px;
line-height: 2em;
font-weight: bold;
text-shadow: 0px -1px 14px white, 0px -3px 15px red, 0px -5px 15px orange, 0px -8px 40px red;
Código HTML:
<span class='fire'>Escreva aqui</span>
3. Strong: Texto bem nítido, usei nesse template aqui (dá uma olhada nos códigos dele, em Header h1, para ver o que quis dizer anteriormente).
Texto bem forte e nítido!
Css:
@import url(http://fonts.googleapis.com/css?family=Lobster);
.strong {
font-family: 'Lobster', cursive;
text-align: center;
font-size: 4.5em;
color: rgb(202, 23, 0);
text-shadow: 0 1px 0 #9d0900,
0 2px 0 #9d0900,
0 3px 0 #9d0900,
0 4px 0 #9d0900,
0 5px 0 #9d0900,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
HTML:
<span class='strong'>Escreva aqui</span>
4. Transparente: O segredo é usar cores iguais no background e cor do texto nesse código CSS:
@import url(http://fonts.googleapis.com/css?family=Lobster);
.transparent{
font-family:'Lobster', cursive;
font-size: 80px;
background: #ffc4db;/*essa cor...*/
text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
color: #ffc4db;/*...igual a essa cor*/
opacity: 0.3;
width: 650px;
HTML:
<span class='transparent'>Escreva aqui</span>
O próximo estilo (que acho super-híper-mega-master kawaii 
), só pode ser usado em textos específicos, não em títulos de posts ou do blog. Tome cuidado ao escolher o local em que adicionar o efeito por que pode personalizar todos os textos da área em que usar.
), só pode ser usado em textos específicos, não em títulos de posts ou do blog. Tome cuidado ao escolher o local em que adicionar o efeito por que pode personalizar todos os textos da área em que usar.
5. Colorful com Efeito ao passar o mouse!
.
É isso! A personalização de cada código poderá ser feita com relação às cores (color), que em alguns aparece em RGB, às fontes (font-family: tipo de fonte, font-size: tamanho do texto), planos de fundo (background), sombras (text-shadow), larguras (width)...Espero que gostem!!!
Créditos: dodozhang21/Ade Arwans/Bennett Feely/Sinclair/Paleta de Cores Vuittons Breakfast/Paleta de Cores Meadow/Paleta de Cores Pastel Rainbow
Créditos: dodozhang21/Ade Arwans/Bennett Feely/Sinclair/Paleta de Cores Vuittons Breakfast/Paleta de Cores Meadow/Paleta de Cores Pastel Rainbow
5 Comments
Lindo! No meu próximo Layout, vou usar esse
ResponderExcluirimperio--kawaii.blogspot.com
Olá Roberta! Eu queria encomendar uma coisa para você. Você poderia fazer um cabeçalho para meu blog, eu quero que ele seja Kawaii que nem o seu em cima. Mas senão for muito incomodo, por favor. Obrigado.
ResponderExcluirThere | Chiclete Funny
Oi :) Bom, ainda não faço encomendas, tenho tanto a aprender ^-^, mas pode deixar sugestões que anoto tudo com carinho e depois compartilho. Aqui no blog já postei alguns cabeçalhos; dá uma olhada nesses posts: tem esses em PSD,esses, esses, esses, esses, esses,e esses são mais recentes.
ExcluirBju
N consegui direito :( Queria usar o 1º
ResponderExcluirUse o código do css antes de /b:skin e o do html no lugar em que vc quer que apareça o texto.
ExcluirMuito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.
Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.
Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.
Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart