Faça um layout em estilo revista

Olá Cherries! O post de hoje é um big tutorial, que deu um trabalhão para ser feito, mas acho que ele irá ajudar muita gente. Nele tem os passos básicos, dicas e links de tutoriais que irão lhe ajudar a criar um layout em estilo revista.
No fim do post ainda tem dicas do que postar, e alguns backgrounds e fontes perfeitos para um layout em estilo revista.
Antes de começar, é bom você já ter em mente uma ideia do jeito que vai querer seu layout, qual o estilo, cores, etc. Uma boa dica é se inspirar em sites de revistas teens e afins. Já idealizou seu layout perfeito? Então mãos a obra!

Um blog que era uma "referência" nesse tipo de design era o Vamos combinar, que hoje não existe mais. Mas eu tenho um print para vocês se inspirarem:

Formatação

Antes de mais nada vamos montar a estrutura do layout. Primeiramente siga os passos deste tutorial. Com ele você irá deixar o modelo do blogger mais organizado.

Depois disto, volte ao designer de modelo, clique em layout e configure da seguinte forma:

Depois clique em Ajustar larguras e ajuste da seguinte maneira:

Salve as alterações. Agora vamos remover a navbar. Vá para o layout do seu blog, clique em editar no gadget da navbar, selecione "Ocultar" e salve.

Gadgets

Agora você vai editar os títulos dos gadgets (Tutorial aqui) e adicionar todos os gadgets que quiser no seu layout. Em um layout revista, geralmente na página inicial ficam apenas os gadgets de posts populares, seguidores, enquetes, anúncios, etc. Alguns outros como perfil, blogroll, marcadores, só aparecem nas páginas de posts. Para fazer isso, basta seguir este tutorial.

Postagens

Neste estilo de layout, as postagens ficam ocultas na página principal, e no lugar delas fica um slide e imagens com outros destaques. Antes de ocultar as postagens, personalize os títulos dos posts, a data dos posts, o blockquote e o leia mais.

Após fazer tudo isso, vamos ocultar as postagens da página principal.

Vá em configurações > Postagem e comentários e altere para zero o número que está no campo circulado no print abaixo:

Salve as alterações. Você vai notar que fica aparecendo uma mensagem em seu blog escrito "Nenhuma postagem". Pois, bem vamos retirá-la!

Vá no Modelo HMTL do seu blog, maque a opção "expandir modelos de widgets".

Aperte Ctrl+F no teclado e procure por:

<div class='status-msg-body'>

Apague o trecho destacado na imagem abaixo:

Visualize, e se estiver tudo certinho, salve!

Slide

Acho que esse é o ponto principal de um layout revista: Um grande e bonito slide. Ele deve ser adicionado em um gadget acima dos posts, como mostra a imagem abaixo:

Aqui estão alguns links de tutoriais de slides lindos: Slide com numeração, Slide Orbit, Slide com legenda.

Depois de escolher e instalar seu slide, deixe-o visível apenas na página inicial usando este tutorial.

Menu

Vamos instalar agora um menu horizontal no seu blog para colocar os links de todas as páginas.

Abra o modelo html do seu blog novamente. Aperte Ctrl+F e procure por ]]></b:skin>

Cole logo acima o código abaixo:

/* Menu horizontal por cherry-liah.blogspot.com */
ul.menu {
background: #c66dd6; /*Cor de fundo do menu*/
padding: 5px;
height:30px; /*Altura do menu, aumente se necessário*/ Width: 980px; /*Largura do menu*/
font-weight: normal;
}
ul.menu li{
display: inline;
}
ul.menu li a {
font-weight: normal; /*Troque normal por bold para links em negrito*/
color: #fff !important; /*Cor dos links*/
font-size: 25px; /*Tamanho da fonte*/
padding-left: 2px;
font-family: Century Gothic; /*Tipo de fonte*/
-webkit-transition:0.2s;
}
ul.menu li a:hover, ul.menu li a.selected{
color: #fff !important; /*Cor do link quando passa o mouse*/
background: #1b1b1b; /*Cor de fundo quando passa o mouse*/
text-decoration: none !important;
-webkit-transition:0.2s;
}
/*FIM DO MENU*/

Altere as cores e adicione outros efeitos se preferir. Aperte Ctrl+F novamente e procure por </header>

Cole acima deste código, o seguinte:

<ul class='menu'>
<li><a href='URL-DA-PAGINA'>NOME DA PÁGINA</a></li>
<li><a href='URL-DA-PAGINA'>NOME DA PÁGINA</a></li>
<li><a href='URL-DA-PAGINA'>NOME DA PÁGINA</a></li>
<li><a href='URL-DA-PAGINA'>NOME DA PÁGINA</a></li>
<li><a href='URL-DA-PAGINA'>NOME DA PÁGINA</a></li>
<li><a href='URL-DA-PAGINA'>NOME DA PÁGINA</a></li>
</ul>

Substitua os links, visualize e salve!

Footer

No rodapé ou footer do blog, ficam a fanbox, gadget do twitter, créditos ou outro gadget que queira colocar, mas não vá enchê-lo de coisas, coloque no máximo três gadgets no footer. Veja como editar o footer de uma maneira bem bonitinha aqui.

Conteúdo

Agora que você já tem toda a formatação em estilo revista, basta adicionar o conteúdo. Não faz ideia do que colocar? Aqui vão algumas dicas:

 No slide, coloque em destaque os posts mais trabalhosos, ou os que achar que são mais interessantes para seus leitores.

 Abaixo do slide, coloque imagens com links de testes, páginas extras, e alguns posts que tiveram muitas visualizações.  Uma outra dica é criar uma "radio" em uma página, e permitir que as pessoas votem nas músicas para a programação.

 Para ter um blog nesse estilo, a preguiça tem que passar longe da sua vida. Ter um blog revista exige muito trabalho e dedicação.

Extras

Para finalizar, trouxe backgrounds e fontes para usarem em seus layouts, sejam em estilo revista ou não.

Fontes

Backgrounds