Adolescente Nerd // Oficial: big post de tutoriais

Olá Morangos com amora!

hoje trouxe um big tutorial para vocês, eu peguei de alguns blogs que não lembro quais são pois estava no rascunho já faz tempo, então peço para que se alguns dos utilitários abaixo for seu...peça pra mim creditar pois não lembro mesmo...

Primeiramente trouxe para vocês estilos de blockquote, eu uso geralmente para dar recados e colocar códigos HTML, fica super kawaii dependendo de como é seu blockquote, uma dica importante é colocar as cores do blockquote combinando com as cores padrões do blog, porque assim fica muito mais legal:

vamos ver os blockquotes:

Teste

Pegue este código:

.post blockquote {background: #ffffff; /*Altere o fundo como preferir*/border-left: 1px solid #FAAF9B; border-right: 1px solid #FAAF9B; border-bottom: 1px solid #FAAF9B; border-top: 1px solid #FAAF9B;/*Altere a cor da borda como preferir*/-webkit-border-radius: 10px 10px 10px 10px; /* bordas */padding: 5px;}

O segundo é esse:

Pegue esse código:

blockquote {border-left: 5px double #E382AB; /*altere a borda*/; background-color: #F5EAE4; */Altere a cor*/padding: 4px; color: #000000; text-align: justify; }

O terceiro é esse:

Pegue o código:

.post blockquote {background: #ffffff; /*Altere o fundo como preferir*/border-left: 1px dotted #000000; border-right: 1px dotted #000000; border-bottom: 1px dotted #000000; border-top: 1px dotted #000000; /*Altere a borda como preferir*/; padding: 4px; color: #000000; text-align: justify; }

E esse último:

Pegue o código:

blockquote {background:url("http://2.bp.blogspot.com/-yyvjLrT3iJU/T_dlJPlXISI/AAAAAAAABjU/HPj8uT-AaNE/s1600/tumblr_m1js23VCEO1rrv3kuo1_250_large.png")/*background -troque se não gostar*/ repeat; padding: 4px; color: #ffffff; text-align: justify; }

Depois que você escolher o modelo, vá em design > editar HTML > aperte Ctrl+f e coloque:

]]></b:skin>

cole o código escolhido acima dessa tag e faça as alterações.

Eu acho que no próprio código já tem as explicações. Não sei se o tutorial estão tão bom assim, mas eu acho que dá para ser usado. Se tiverem qualquer dúvida, poste nos comentários.

Lembrando: No último código, podem ver que o fundo é um background. Se quiser trocar o fundo por uma cor sólida, troque o:

background:url("http://2.bp.blogspot.com/-yyvjLrT3iJU/T_dlJPlXISI/AAAAAAAABjU/HPj8uT-AaNE/s1600/tumblr_m1js23VCEO1rrv3kuo1_250_large.png")

por: background-color: #SUACORAQUI .

Aqui estão alguns backgrounds para vocês:

Agora vou falar de como colocar a data em hover.Nó do A.N usamos, que ao passar o mouse fica de outra cor.Existem vários modelos de data que eu aprendi (créditos) e que eu vou mostrar para vocês aqui.

Vamos lá?

Para começar, Vá em Desing >> Editar HTML >> Aperte CTRL+F ou F3 e procure por:

.main-inner h2.date-header {
font: $(date.font); color: $(date.text.color);}

Procure pela primeira linha para achar mais fácil,depois disso apague tudo isso e cole no lugar um destes códigos abaixo:

Data de bolinha

Cole esse código:

.main-inner h2.date-header {

-webkit-transition-duration: .50s;

float: left;

width:57px;

height:57px;

overflow:hidden;

font-size:13px;

color: #fff !important;

text-align:center;

margin-bottom: -75px;

margin-left: -70px;

padding: 8px 2px 0px 2px;

-webkit-border-radius: 5em; -moz-border-radius: 5em;

background: #CCD4DA; }

.main-inner h2.date-header:hover {

-webkit-transition-duration: .50s;

background: #BEC8CF; }

Ajuste da sua forma onde está em negrito.

Dica: Coloque a data desse jeito: Dia Mês Ano

Segundo:

Esse é um risco mas sem efeito hover,mas fica legal também!

Para usar cole esse código:

.main-inner h2.date-header {text-align: center;background: #000;color: #fff;border-radius: 10px 10px 10px 10px; }

Só mude o que está em negrito.

Para ficar assim:

Cole esse código:

.main-inner h2.date-header {

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

text-align: center;

background: #FFF;

margin: 10px -1px -15px -110px;

color: #D2D56C;

Border-Bottom: 2px solid #D2D56C;

Border-left: 2px solid #D2D56C;

Border-right: 2px solid #D2D56C;

Border-top: 2px solid #D2D56C;

width: 15%;

float: left;

}

Só mude o que está em negrito e itálico.

Dica: Coloque a data desse jeito: Dia/Mês/Ano .

Mude apenas o widht, se ficar desarrumado.

Com margin o mesmo.

Espero ter ajudado, relembrando, não lembro de que blogs foram retirados os tutoriais, então...se forem de vocês, não me xinguem, só comentem, que colocarei os devidos créditos, beijos!

Atualizado: A nossa leitora Tory já me falou de quem são os créditos, aqui, obrigada pela ajuda flor!