Big Tutorial: Como Fazer um Layout em Estilo de Revista

Ooi seus gambá u3u, ignorem ~~ Suas lindas sZ'

Leiam!

Há poucos dias a Bia, fez um aviso lá no Facebook, no nosso grupo e disse que iria avaliar nossa criatividade, a minha e a da Layza, que também é postadora daqui e é nova como eu.Por isso, a dona do 4T , propôs que eu e a Layza fizéssemos um Layout Free, para disponibilizar aqui no blog, e claro nós topamos. Mas, eu tentei fazer o layout e não deu certo.Daí, eu expliquei minha situação a Bia, e disse que não estava conseguindo fazer, por motivos justos e que com certeza, o layout da Layza, iria ficar melhor que o meu, e perguntei a ela se eu podia ficar promovendo concursos, games, enquetes,etc, e também ficar postando um Big Tutorial 1 (uma) vez por mês. E, sim ela topou. E, eu não poderia deixar de avisar e explicar isso a vocês. 

Hoje, como combinado eu trouxe um big tutorial pra vocês, ele é lá do CB=Cherry Bomb, devidos créditos. <<3 

Boralá?# 

Olhem este layout, vamos aprender a fazer um desses e usá-lo como referência. 

> Formatação

1. Antes de tudo, vamos montar a estrutura do layout, para isso vamos seguir os passos Deste Tutorial.Com isso, você irá deixar o seu modelo do blogger ainda mais organizado. 

Depois disso, volte ao designer de modelo, clique em layout e configure-os desta seguinte forma:

Logo, clique em ajustar larguras, e deixe desta seguinte maneira:

Agora, é só salvar as alterações que você fez. Vamos remover a Navbar agora. Vá para o layout do seu blog, e clique em editar no gadget da navbar, selecione ''ocultar'' e salve.

> Gadgets 

1. Agora, você irá editar os títulos dos gadgets (Tutorial aqui) e adicionar todos os Gadgets que você quiser no seu blog. Em um lay revista, geralmente na página inicial ficam apenas os gagdets de posts populares, seguidores, enquetes, anúncios, etc. Outros como perfil,blogroll, marcadores só aparecem nas páginas de post. Para que você faça isso, basta seguir as instruções desse Post Aqui.

> Postagens 

1. No estilo de layout, os posts ficam ocultos na página principal, e no lugar delas ficam slides e imagens com outros destaques. Antes de ocultar as postagens personalize Título dos Posts, Data dos Posts, o Blockquote e o Leia Mais.

Depois de 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 este trechinho destacado nesta imagem abaixo:

Agora, visualize e veja se está tudo certo, salve! 

> Slide 

1. Suspeito que o slide é o ponto principal de um layout em estilo de revista: Um enorme e lindo Slide. Ele deve ser adicionado em um gadget acima dos posts.

Aqui estão alguns links de tutoriais de slides super lindos: Slide com Numeração, Slide Orbit ( Créditos a Guia da tecnologia) e Slide com Legenda ( Créditos Mundo do Blogger). 

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

> Menu 

1. Vamo agora instalar 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*/

2. Altere as cores e adicione outros efeitos como preferir, mas se não quiser, pode deixar assim mesmo. Aperte Ctrl+F novamente e procure por </header> E 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 agora é só salvar! 

> Footer

1. 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 ( Créditos Candy Land ) 

> Conteúdo 

  Agora que nós temos toda a formatação em estilo revista, vamos só 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 

Fontes 

Bem meninas, espero ter ajudado e ter agradado também! Beijos, e até a próxima *u*

Créditos: Cherry Bomb e outros mencionados 

durante um BIGTUTO#