Como fazer um layout parecido com o do Babado MH + Divulgação importante

Ooi :3 Hoje o post também vai ser diferente, porque muitas pessoas me perguntam como eu faço meu layout e por isso vim ensinar a vocês. Claro que eu não vou mostrar TUDO, mais o essencial para ter um blog organizado e bonitinho, porque se eu falar tudo é capaz de aparecer um monte de blogs parecidos. E também vou fazer uma divulgação do Mania Monstruosa, o mais novo blog da Stehh (antiga dona do O Babado Fantasma). Clique em leia mais >3<

Primeiro você tem que escolher a base do modelo, vai em modelo e depois em personalizar

Depois clique em modelos e na setinha

Selecione o modelo viagem na terceira opção

Clique em ajustar larguras e coloque 1120 x 320

Depois clique em avançado e personalize algumas coisas como texto da página, links,etc.

Quando acabar, clique em "Aplicar ao Blog"

Depois volte em modelo e clique em editar HTML

Depois vai aparecer um monte de códigos. Clique em qualquer lugar do texto e depois aperte Ctrl F e procure pelo código /* Widgets

Se você pesquisar /*Widgets  você não acha, não pode ter nenhum espaço no começo ou no fim da palavra chave.Você ira encontrar algo parecido com isso:

Antes de fechar segunda a chave (lá no final) - } - cole o código abaixo:

background: #fff; /*---- cor do fundo da caixa ----*/ 

  padding-left: 20px; /*---- espaço à esquerda ----*/ 

  padding-bottom: 20px;  /*--- espaço de baixo ---*/ 

  padding-right: 20px; /*--- espaço à direita ---*/ 

  padding-top: 5px; /*---- espaço de cima ----*/ 

border:1px solid #CFCFCF; /*Cor da borda */

border-radius: 10px; /*---- bordas arredondadas, apague a linha se não quiser ----*/} 

Se você não quiser bordas arredondadas, basta em vez de colar o código acima, colar esse:

Background: #ffffff; /*Cor do fundo do gadget */ 

Para ver o resto do tutorial, clique aqui !!

Procure por .main-inner .column-center-outer {

Se você ''NUNCA'' mexeu nesta área do template ela estará mais ou menos assim:

.main-inner .column-center-outer {
background: $(post.background.color) $(post.background.url) repeat scroll top left;
   _background-image: none;
}

Então substitua todo este código por este:

.post-outer {
margin: 3px 8px 15px;
background:#fff;
padding: 5px 5px;
box-shadow: 1px 4px 19px 2px #DCDCDC;
padding: 5px;
border-radius: 10px;
}

 -A parte destacada de laranja é a borda arredondada. Quanto maior o valor mais arredondada ficará!

- As partes destacadas de azul equivale a distancia dos textos e imagens de dentro das postagens ou seja quanto maior o número, mais distante os textos vão ficar da margem da postagem.

-As partes em rosa são as cores, a primeira é a cor que equivale ao fundo do post, e a segunda é a cor que equivale a sombra do post

Agora, procure por .post-outer { - antes de fechar a chave lá no final cole o código:

box-shadow: inset 0 0 10px #ccc, 0 0 5px #ccc;

border-bottom: 10px solid #Cor da borda;

border-top: 10px solid #Cor da borda;

Substitua "#Cor da borda" por duas cores que desejar (que combine com o tema).

Para escolher a cor acesse a Tabela de Cores - clique aqui

No fim vai ficar mais ou menos assim:

Visualize e veja se seus posts estão separados e com bordinhas e salve :3

Menu no cabeçalho

Vá no site http://www.image-maps.com/ e coloque o link do seu cabeçalho com o menu já feito no photoscape, por exemplo. Na imagem que eu vou mapear só é um menu, mas você tem que ter o menu com o cabeçalho juntos. EXEMPLO: WWW

Depois que colocou clique em Start Mapping.

Vai aparecer a sua imagem que você quer colocar o menu e clique em "click to continue"

Se aparecer essa imagem, clique em close:

Vá com o mouse onde você quer que um link fique e clique em "Create Rect"

Vai aparecer isso; coloque o link da sua página e antes de clicar em "Save" selecione onde você quer que quando a pessoa clica se direcione a certa página, depois que fez isso clique em "Save"

Depois é só fazer isso com todas as palavras (nomes do menu).

Para pegar o código, clique em "Get Code", depois em HTML Code e copie o código

Agora vai em Layout - Adicionar Gadget - HTML e o mova para essa parte:

Depois é só "excluir" o cabeçalho^^ Se o título do blog ainda aparecer, vai em Modelo - Avançado - Título do Blog e coloque a cor Tranparente

Bem, agora é com vocês. Vou passar os links dos blogs onde tem os outros tutoriais e é só fazer como eu ensinei: Substituir postar um comentário por uma imagem, comentários personalizados, dois backgrounds no blog, seleção de texto colorida, negrito, sublinhado, itálico e riscado personalizados, barra de rolagem colorida, centralizar o título do post. 

E não esqueça que tem mais tutoriais na página For You do blog.

Créditos: Cherry Bomb, Jackie Dream & Birthday Cake

E mais uma divulgação de um blog super legal >3< 

Alguém lembra do blog O Babado Fantasma? Pois é, a Stefannie (Stehh) mudou de conta, blog... decidiu começar tudo do começo, por isso fez o Monster High Mania. Eu ajudei ela no layout, que ficou muito simples porque ela faz as postagens pelo celular (õ/), assim eu fiz ele bem coisadinho pra não demorar pra carregar pra ela, pra não dar problema e enfim. O blog é muito legal, espero que sigam, viste e divulgue porque ela merece né? Vou colocar ele como parceiro e afiliado e tudo o que eu puder fazer para ajudar ela, porque começar tudo de novo não é fácil. Então peço que por favor, visite o blog dela ^-^ Até mais ♥

www.maniamonstruosa.blogspot.com.br