Maratona de Goodies : 4 tutoriais úteis

Olá pessoas tudo bom? Continuando a nossa maratona e trouxe 4 tutoriais úteis, que dão efeitos super fofos, fazem toda a diferença e aliás, fiz tudo explicadinho pra entenderem melhor. Todos mexem com HTML e basicamente, espero que gostem. Recado: cadê os comentários gente? Visualizações ... Ok, não conto muito com números, mas preciso pelo menos do reconhecimento de ter feito o post com carinho e dedicação ^^ mas enfim, os tutoriais:

Blockquote parecido com o meu:

Imagem: Sweet Poison

Vá em Design ~ Editar HTML ~ Cole em cima de ]]></b:skin>

.post blockquote {
background: #f5f5f5;
border: 1px solid #00688B;
color: #00688B;
font-family: century gothic;
font-weight: normal;
font-size: 11px;
text-align: right;
padding: 7px;
border-radius: 25px;
}

Em vermelho: Cor do fundo do blockquote
Em laranja: Largura da borda
Em amarelo: Estilo de borda (confira aqui estilos de borda para usar)
Em verde: Cor da borda
Em turquesa: Cor da fonte
Em roxo: Fonte
Em azul escuro: Tamanho da fonte
Em rosa: Alinhamento do texto

Faça uma postagem de teste com o blockquote, visualize e salve

Negrito, Itálico e Sublinhado automático 

Vá em Design ~ Editar HTML ~ Cole acima da tag ]]></b:skin> 

b, strong {color: #33CCCC; text-decoration: none; cursor: normal; }
i {color: #E399AE; text-decoration: none; cursor: normal; }u, underline {color: #333333; text-decoration: none; border-bottom: 1px dashed #AC77C7; cursor: normal;} 

Em vermelho: Cor do negrito
Em amarelo: Cor do itálico
Em azul: Cor da fonte no sublinhado
Em verde: Espessura da borda, Estilo de borda (aqui) e Cor da Borda (na ordem!)

Faça antes uma postagem com o negrito, itálico e sublinhado, visualize e salve!

Cortininha fixa no topo

Vá em Design ~ Elementos da Página ~ Adicionar novo Gagdet :

 

<div style=" background-image: url('LINKDOPATTERN'); top: 0px; left: 0px; width: 100%;

height: 50px; z-index: 100; position: fixed;"></div>

Coloque todo o código em somente uma linha.
Em URL DA CORTININHA, substitua pelo link da imagem.
Não adicione título e Salve.

 Seleção de Texto

Imagem: Crazy in HTML

 

Vá em Design ~ Editar HTML ~ Cole acima dessa tag ]]></b:skin>

::-moz-selection {
background:#FFFFFF;
color:#000000;
}
::selection {
background:#FFFFFF;
color:#000000;
}

Em vermelho: Cor do fundo
Em laranja: Cor da fonte

Repita os códigos de acordo com a cor e salve

Maratona de Goodies: Backgrounds

 

Olá pessoas da terra, quanto tempo né? Bom, muita coisa mudou desde que eu sai: A Dani do OTF voltou, eu fiz aniversário e outros :) Eu estou sem total inspiração e pra não deixar de atualizar o blog, vou fazer a Maratona de Goodies que estou prometendo fazer e nunca tenho tempo. Enfim, hoje eu venho com backgrounds diversificados e super lindos. Comentem se usarem ok? Créditos 

Abstratos

Formas Geométricas

 

 

Girlies

Amadeirados

Sidebar semi-transparente

 

Olá gente *-* tudo bom? Estou passando aqui pra colocar em dia a nossa tag Tutoriais que eu nunca mais postei haha ^^ mas enfim, o resultado desse tutorial é super fofo e eu recomendo para layout cutes e simples, mas é a minha dica. Vamos lá?

Tutoriando:

Blogger Design  Editar HTML e Procure por:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner { - Coluna direita
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner { - Coluna esquerda

Abaixo desses códigos, cole:

  filter:alpha(opacity=40);
 -moz-opacity:0.40;
 opacity:0.40;

Se você fizer tudo direitinho, e não alterar nada, vai ficar assim:

 Edite as partes em vermelho como você deseja o tom de transparente, visualize e salve.
Qualquer problema com design, deixa um comentário com a sua dúvida.