Fazendo um Layout - Parte 2

Ói!

Tudo bom? como é que vai? Tudo nas ordi?

Tá chega de embromation!

Vim trazer a 2ª parte do tuto meu povo, e vou dizer que eu tô triste, mas ninguém quer saber de mim, todo mundo quer saber do tuto, AHH! Mas antes: Vocês já ouviram Best Song Ever?

Caaara eu ouvi, é muito viciante né? Sei lá, eu fico imaginando o clipe pronto *-*

Bom então, mãos ao mouse?

Bom depois do que nós fizemos na primeira parte, que por acaso eu já esqueci metade do que eu expliquei pra vocês, vamos recapitular eu ensinei, ensinei kk, expliquei: colocar blockquote, barra de rolagem, links em fade e sem sublinhado e negrito, itálico e sublinhado em hover, confere? Confere!

Hoje vamos começar a mexer com as edições do corpo da postagem, da sidebar e tals.

I. No título da sidebar e do post você pode escolher entre algo mais glamouroso ou algo mais simples. Se você quiser algo simples, como o título centralizado acompanha aí:

Título do Post:

Procura por h3.post-title { e embaixo disso cola isso: text-align: center; 

Do gadget:

Procura por .sidebar .widget h2 { e embaixo cola isso text-align: center; 

Aí é só salvar, mas se você quiser algo mais trabalhado, mais, chique, vamos dizer assim, aqui tem alguns modelos para título de sidebar (www) e aqui, que a nova postadora, Mandi, colocou uns modelos pra título de post (www)

Mas se você quiser o título de post simples, só com um sombreado, tipo o estilo que eu usei no lay Heart Attack, pra quem não viu aqui óh:

é só ler esse tuto aqui (www)

II. Agora um menu pra tags, pra deixar o blog mais bonitinho, bom o menu é esse aqui, é o que a Cams usa aqui no blog, é um simples, mas é bonitinho e existem vários outros por aí:

Procure por ]]>< e cola o código ACIMA da tag que você procuou

O código é esse:

direita { float:right; width:49%; text-align:justify; }

.esquerda { float:left; width:49%; text-align:justify; }

#menutags{

background-color: #ff92a4;

width: 100%;

height: 10px;

float: left;

font: 11px Verdana;

color: #fff;

padding: 2px 0 6px 0;

text-align: center;

margin: 1px;

-moz-transition: all 0.5s ease-out;

-webkit-transition: all 0.5s ease-out;

-o-transition: all 0.5s ease-out;

-ms-transition: all 0.5s ease-out;

transition: all 0.5s ease-out;

border-bottom: 1px solid #e18292;

border-right: 1px solid #e18292;

text-shadow: 0 1px 0 #e18292;

}

#menutags:hover {

opacity: .50;

}

 Não precisa mudar todas as cores, só o que tá em negrito, o primeiro negrito é a cor que vai ficar no fundo, e o segundo é a cor da letra

Depois é só adicionar um gadget de JavaScript, escolhe um nome, pode ser tags, marcadores, menu... e no conteúdo cola isso:

<center>
<div class="direita">
<a href="link" id="menutags">Nome</a>
<a href="link" id="menutags">Nome</a>
<a href="link" id="menutags">Nome</a>
</div>
<div class="esquerda">
<a href="link" id="menutags">Nome</a>
<a href="link" id="menutags">Nome</a>
<a href="link" id="menutags">Nome</a>
</div>
</center>

É só mudar "link" pelo link do seu marcador ou da página e nome é o nome né? (rsrsrs)

Bom por hoje é isso, amanhã volto com a 3ª parte, e vou pedir mais uma vez, por favor quem pediu lay me manda o e-mail, ok? O primeiro que me pediram tá quase pronto e eu ainda não tenho o e-mail de quem me pediu, se você não sabe se foi a primeira, o lay é do The Vampire Diaries, só 1 pessoa me pediu então, me passa o e-mail, ou por aqui ou pela minha ask (www)

Bom beijinho pra vocês, quero agradecer ao Vanessa Tutoriais, foi lá que eu encontrei o código pro menu de tags os outros códigos que eu usei NESSA postagem são todos daqui do ODT mesmo.

Bejauuuum, e até <3
xXNanda