06 julho 2012

Imagem fixa no post


Hooy people, quanto tempo né?
Não dá muito para entender o tutorial pelo titulo mas vou explicar: sabe quando quer fazer um tutorial e ele é partes tipo materiais, como fazer, resultado etc ou colocar uma mensagem no final do post :" Pode reblogar com créditos" ou "Proibido reblogar" ou até um terceira forma, usar nos goodies, separando tutoriais, materiais etc

Vai ficar assim:






Vamos colocar os seguintes códigos acima de b:skin (para variar um pouco)

Sem Imagem
.msgfixa {
background: #A21BE0; /* background */
padding: 5px; /* espaçamento */
text-align: center; /* alinhamento do texto */
color:  #FFF; /* cor do texto */
font-family: Tahoma /* fonte */
width: 600px; /* largura */
}

Observação:
Se quiser fazer do tamanho da área do post vai ter que ser no chute mesmo, eu não descobri ainda nenhum calculo que de certo 
Se quiser colocar bordas arredondadas adicione o item border-radius: 10px; /* bordas arredondadas */ antes da chave
Se quiser borda adicione o item border: 2px solid #E2CCEB; /* bordas */ antes da chave 
Também é possível colocar o efeito hover! 
Com Imagem

 .msgfixa {background: url(URLDASUAIMAGEM) no-repeat; /* background */
padding: 5px; /* espaçamento */
text-align: center; /* alinhamento do texto */
color:  #FFF; /* cor do texto */
font-family: Tahoma /* fonte */
width: 600px; /* largura da imagem */
margin-left: -20px; /* troque por right se sua area do post for no lado direito */
}

Observações:

Se sua área do post for no lado direito troque left por right no último item
Em margin-left quanto menor for o valor mais vai ser a distância
Imagens de tirinhas (ou ribbons) arrasam, quyem sabe eu faço um tutorial de como faze-las afinal são meu segundo vício né? (Depois de efeito hover hehehe)

Para colocar no post vá na aba HTML quando esta criando o post e cole isso: acesse esse link para ver

Você escreve o que quiser em "COLOQUE SEU TEXTO AQUI" e onde está em negrito é o tamanho da fonte, você também pode substituir o large por um valor em pixels: 100px (por exemplo)

Bom galera é isso, próximo post: Top 5 sites úteis para blogueiras!
Kiss&Kiss♥

5 comentários:

Paloma Morais disse...

Que útil o tutorial! Muito bom e eu adorei.
Ei, seu blog é lindo
Beijos, http://momamoraes.blogspot.com

Guilherme Lima disse...

gostei do tuto, é ótimo! Lindo o seu blog viu? Seguindo. Beijos♥
http://mundo-dosadolescentes.blogspot.com.br/

Clay *o* disse...

Acho que esse tutorial é essencial para blogs que fazem tutoriais e querem créditos ao reblogar, seilá, dá uma vasta lembrança ao blogueiro!
Beijos e Beijos,

teenagesky.blogspot.com

Gaby Zamboni disse...

Amei o tuto , super util !
Dando uma visitnha aos afiliados
Nhaac ~~> www.piinkrock.tk

Luana Caroline disse...

Tete,
me desculpe por esquecer de colocar você lá no blog.
mas é que eu não tinha visto o meu blog aqui, então retirei o seu do meu..mas já que você colocou vou colocar de novo só preciso saber onde está seu banner?
Garotinhadream.blogspot.com