[Big Tutorial] Criando um layout estilo revista

Olá cherries! Como vai? Hoje resolvi trazer um Big Tutorial de como criar um layout em estilo revista. Ele deu um trabalhinho para ser feito, e tenho que creditar o falecido Cherry Bomb. Nele vou ensinar os passos básicos para criar um layout deste tipo, e também algumas dicas. 

Antes de você começar a trabalhar em um layout deste, é bom você ter em mente como ele vai ser. Uma dica que dou, é você se inspirar em sites de revista teen, como a Capricho. Já pensou seu layout perfeito? Então continue lendo

Um blog que é referência neste tipo de design, é o Vamos Combinar, aqui está um print dele.

Formatação

Primeiro de tudo, seu layout deve estar mais 'limpo', para facilitar mais o trabalho. Siga os passos deste tutorial. 

Depois disto, vá em MODELO, PERSONALIZAR. Clique em LAYOUT e organize da seguinte forma:

Depois clique em AJUSTAR LARGURAS e ajuste assim: (1000 x 330)

Salve as alterações. Agora vamos retirar a Navbar. Vá em LAYOUT, e oculte a Navbar. 

Gadgets

Agora vamos personalizar o título dos gadgets (clique aqui). Também adicione todos os gadgets que necessita. Geralmente em layouts revista, somente os gadgets mais populares ficam na página inicial (seguidores, anúncios, enquetes, etc.). Para fazer isto, clique aqui.

Postagens

Neste layout, as postagens ficam ocultas na página inicial. No lugar das postagens ficam slides, e outros destaques. Primeiro, siga estes tutoriais. (X) - (X) - (X) - (X)

Agora vamos ocultar as postagens do blog. Vá em CONFIGURAÇÕES > PORTAGENS E COMENTÁRIOS, e organize da seguinte maneira:

Na página inicial, vai ficar aparecendo a seguinte mensagem ''nenhuma postagem'', então vamos retirá-la!

Vá em Modelo, Editar Html, clique em Ctrl + F e procure por:

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

Apague o trecho destacado como mostra a imagem abaixo:

Salve.

Slide

O slide é a parte principal neste tipo de layout: O Slide. Clique aqui e veja o tutorial de como instalar um Slide super fofo.

Veja este tutorial e saiba como deixar o slide visível apenas na página inicial.

Menu

Agora vamos instalar um menu super legal no seu blog. Existem duas opções de menu, com mapeamento, e o que eu vou ensinar agora.

Vá em Modelo, Editar Html, aperte Ctrl + F e procure por ]]></b:skin> 

Logo acima deste código, cole:

/* 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 como preferir.

Aperte Ctrl + F e procure por </header>. Logo acima deste código, cole:

<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>

Altere como preferir.

Footer

 Para fazer um rodapé bem bonitinho, siga este tutorial.

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. 

Espero que tenham gostado deste tutorial!

E por favor comentem o que acharam, pois isto é muito importante para mim...

Beijos,

Danielle.