Magicamente Inexplicável: Tutorial:Layout estilo revista!

Olá meus docinhos,como estão?

Bom vamos começar?

Então leia mais docinho!

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.

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