Hello people! Agora a IC (I'm Candy) está 2.0" Eu amei o lay novo. E com isso, nós temos nossa segunda aula da escola do blogger. Dessa vez, eu irei ensinar como personalizar a área da postagem. Também é uma coisa bem chatinha, mas fica lindo quando pronto.
E aí querem saber mais? Clica vai, clica *---*
A área da postagem tem que ficar bem bonita e arrumada, pois não adianta ficar tudo lindo e perfeito, mas o resto tudo bagunçado. Ah e lembrem-se, essas aulas não serão apenas para saber como fazer um layout, mas como ter um blog movimentado e bem legal.
Primeiramente nós vamos mexer na data, então vá em Modelo > Personalizar > Avançado > Cabeçalho de data.
Retire a cor e deixe a fonte em 0px
Você pode encontrar vários modelos de data em vários blogs, em breve irei disponibilizar vários.
Agora essa é a parte mais extensa, vamos ter que tratar dos detalhes e deixar tudo do seu jeito. Uma dica, é fazer o blog de acordo como você é. Não adianta fazer tudo muito fofo, se você não gosta dessas coisas. Tente deixar o blog o máximo possível parecido com a sua personalidade.
Agora, eu vou ensinar a como deixar o negrito, sublinhado e itálico automaticamente colorido. É chato ter que ficar mudando tudo e deixando diferente das coisas.
Modelo > Editar HTML
Procure por:
]]></b:skin>E cole acima dele:
b, strong {color: #FF1493;Cor do Negrito: FF1493
text-decoration: none;
cursor: normal;
}
i {color: #A020F0;
text-decoration: none;
cursor: normal;
}
u, underline {color:#000000;
text-decoration: none;
border-bottom: 1px dashed #4876FF;
cursor: normal;
}
Cor do Itálico: A020F0
Cor da Palavra do Sublinhado: 000000
Cor da linha do sublinhado: 4876FF
Pronto, agora você vai personalizar do jeito que você achar melhor.
Agora vamos mexer nos links, pois fica muito feio aquele azul sem graça.
Vá em Modelo > Personalizar > Avançado > Cor dos Links
Arrume como desejar!
O próximo passo é cuidar do famoso Leia Mais.
Eu gosto muito do Leia Mais com botão, mas você pode personalizar do jeito que quiser. Eu vou ensinar a como colocar com o botão. Você pode personalizar e também colocar com imagem.
Vá em HTML e procure, novamente, por: ]]></b:skin>
Acima dele, cole:
.jump-link {Esse que eu ensinei logo acima é o do botão. Agora, vou ensinar a como fazer com a imagem.
text-align: left; /* posicionamento do leia mais */
margin-top: 5px; /* espaço que fica entre o leia mais e a postagem */
}
.jump-link a {
padding: 4px; /*acolchoamento entre o fundo e o texto */
color: #000000; /* cor do texto */
background: #dfdfdf; /* cor do fundo */
font-family: verdana; /* tipo de letra */
-moz-border-radius: 6px; /* bordas arredondas */
-webkit-border-radius: 6px; /* bordas arredondas */
border-radius: 6px; /* bordas arredondas */
}
Antes de tudo já tenha sua imagem pronta. Esse é bem mais rápido!
Procure por: <data:post.jumpText/>
Apague esse trecho, apenas esse, e cole no lugar:
<p align='right'><a expr:href='data:post.url'><img src='URL DA IMAGEM'/></a></p>Pronto. Para usar o leia mais é só clicar nesse botão
Para mudar o texto, você vai em Layout > Postagens do Blog e lá você muda.
Agora, vamos retirar aquela coisa chata que é o "Assinar postagens (Atom"
Vá no HTML e procure
<b:include name='feedLinks'/>Apague esse trecho e pronto.
Agora vamos tirar também outra coisa chata que é a Atribuição!
Ainda no HTML, procure por este trecho:
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>Se não achar, procure por trechos.
Assim que achar, apague ele todo! Em seguida, clique em salvar modelo.
Pronto. Agora o layout já está mais bonito.
Outra coisa muito ruim, é que as postagens são todas coladas! Elas não são separadinhas. Vamos dividi-las?
Vai ficar assim:
Na hora, não irá ficar assim, você terá que ir e ir mudando até ficar do seu gosto!
Procure no seu HTML:
.main-inner .column-center-outer { background: $(post.background.color) $(post.background.url) repeat scroll top left; _background-image: none; }Se não achar, procure por pedacinhos até achar. Apague ele todo e no lugar cole:
.post-outer {margin: 4px 2px 10px;background:#fff;padding: 20px 10px;}
Onde está em vermelho, é o espaço das postagens! Mude até ficar do seu gosto.
Agora, eu vou ensinar a colocar um menu muito legal.
Procure por ]]></b:skin>
Assim que encontrar, cole acima:
Agora, crie um gadget HTML/Javascript em Layout e cole o seguinte código:@font-face {font-family: "handy"; src: url('http://static.tumblr.com/lnvca6d/E6vm63ih7/pf_ronda_seven__1_.ttf');}.express {background-color: #CORDOFUNDO;color: #FFFFFF;display: block;width: LARGURADOMENUpx;height: 15px;line-height: 13px; font-family: handy; font-size: 8px; text-align: center; text-decoration: none; text-transform:uppercase; margin-right: 1px; margin-bottom: 1px; padding-top: 2px; text-align: center; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out;text-transform: uppercase;}.express:hover {opacity: 0.5; margin-left: -30px;}
Bom, é isso gente!<center><a href="SEULINK" class="express">Inicio</a><a href="SEULINK" class="express">About</a><a href="SEULINK" class="express">Goodies</a><a href="SEULINK" class="express">Tutoriais</a><a href="SEULINK" class="express">Créditos</a></center>
Hoje eu vou postar alguns detalhes para enfeitar o blog de vocês!
Beijinhos até a próxima aula.
Comentem o blog de vocês para eu acessar > <
]]
