DOUTOR.: construção de menus de uma forma bem fácil, uma vez que podemos escolher os marcadores

O novo Gadget (ou Widget) de Marcadores do Blogger, além da tão divulgada nuvem de tags , permite a construção de menus de uma forma bem fácil, uma vez que podemos escolher os marcadores a serem exibidos e retirar o número de posts em cada marcador apenas com alguns cliques. Para os iniciantes, que tem mais dificuldade na construção de menus, esses recursos são uma excelente opção.
O único inconveniente que continua existindo é que o Blogger dá duas opções de classificação - por ordem alfabética e por frequencia - o que limita a apresentação do menu. Quem precisa de uma classificação diferente, deve usar o Gadget de Lista de Links, mais trabalhoso, porém dá mais liberdade ao usuário.

Vamos então construir um menu simples, com pouca estilização, mas bem fácil de fazer.

A) CSS - Coloque Estilos para o Menu

Primeiro vamos construir o código de estilos para seu menu, assim, logo que você adicionar o Gadget, ele já vai aparecer bem formatado em seu blog.
Em Layout => Editar HTML salve uma cópia de seu template, clicando em "Baixar Modelo Completo";
Deixe a caixinha "Exibir Modelos de Widgets" desmarcada;
Logo ACIMA da tag ]]></b:skin>, coloque o código conforme segue, alterando-o de acordo com seu template:
01
/* Menu */

02

03
#menu ul { /* estilos para a lista */

04
float: left;

05
width: 660px; /* altere a largura conforme seu template */

06
clear: both:

07
margin: 10px auto;

08
padding: 12px 0 12px 0;

09
background: #ddd;

10
}

11

12
#menu li { /* estilos para os ítens de lista */

13
float: left; /* faz com que a lista fique na horizontal - não altere */

14
margin: 0; /* reseta valores anteriores - não altere */

15
padding: 0; /* reseta valores anteriores - não altere */

16
list-style: none; /* reseta valores anteriores - não altere */

17
}

18

19
#menu li a { /* estilos para os links */

20
padding: 10px;

21
background: #f2f2f2;

22
border: 1px solid #fff;

23
color: #000;

24
text-decoration: none;

25
}

26

27
#menu li span { /* estilos para o link ativo (página aberta) */

28
padding: 10px;

29
background: #ddd;

30
border: 1px solid #fff;

31
color: #000;

32
text-decoration: none;

33
}

34

35
#menu li a:hover { /* estilos para o link com mouse-over */

36
background: #666666;

37
border: 1px solid #fff;

38
color: #fff;

39
}
Visualize o template e salve.

B) Criando um "container" para seu menu

Agora vamos incluir uma "section" no crosscol-wrapper (pode ser em outro local, se você preferir - header, main-wrapper, etc) onde você poderá adicionar o Widget de Marcadores.

Mantendo a caixinha "Expandir Modelos de Widgets" desmarcada, localize o código de seu Crosscol-Wrapper:
1
<div id='crosscol-wrapper' style='text-align:center'>

2
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>

3
</div>
Inclua o código em destaque como segue:
1
<div id='crosscol-wrapper' style='text-align:center'>

2
<b:section class='menu' id='menu' showaddelement='yes'/>

3
<b:section class='crosscol' id='crosscol'showaddelement='yes'/>

4
</div>
Visualize o template e se tudo estiver ok, salve.

C) Adicionando o Gadget de Marcadores

Vá para Layout => Elementos da Página;
Logo abaixo do Cabeçalho você encontrará o novo "container" criado, na mesma largura do Cabeçalho para Adicionar um Gadget. Clique e adicione um Gadget de Marcadores.
Coloque um título apenas como referência, para você localizar com facilidade na hora de editar seu layout - iremos tirar esse título depois no código do Widget;
Em "Exibir", marque a opção "Marcadores Selecionados" e depois clique em "Edit";
Escolha na lista, os marcadores que você deseja colocar em seu Menu, deixando desmarcados aqueles que você não quer apresentar e clique em "Concluído";
Defina se quer a "Classificação" em ordem alfabética ou em por frequencia;
No segundo campo "Exibir" escolha "Lista";
Desmarque a opção "Mostra o número de postagens por marcador" e salve o Gadget.

Se você visualizar seu blog agora, verá que o Widget já se apresenta em forma de Menu, mas ainda faremos mais algumas customizações, para apresentar um link para a "Home" e para retirar o título.

D) Retirar o título do Gadget e incluir um link para a "Home"

Volte à aba "Editar HTML" e desta vez, marque a opção "Expandir Modelos de Widgets";
Localize o Gadget adicionado (procure pelo crosscol-wrapper ou pela section 'menu')
1
<div id='crosscol-wrapper' style='text-align:center'>

2
<b:section class='menu' id='menu' showaddelement='yes'>

3
<b:widget id='Label2' locked='false' title='Menu' type='Label'>
Primeiro iremos retirar o título do Gadget. Ele ficará visível na aba Layout-Elementos de Página, mas não será mostrado no blog. Para isso, delete o trecho em destaque:
1
<b:widget id='Label2' locked='false' title='Memu' type='Label'>

2
<b:includable id='main'>

3
<b:if cond='data:title'>

4
<h2><data:title/></h2>

5
</b:if>
Agora vamos colocar no menu, um link para a Home Page de seu blog. Procure o código (conforme abaixo) e acrescente a linha destacada:
1
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>

2
<b:if cond='data:display == "list"'>

3
<ul>

4
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

5
<b:loop values='data:labels' var='label'>

6
<li>

7
<b:if cond='data:blog.url == data:label.url'>
Visualize seu template e se tudo estiver ok, salve.

Este é um exemplo para menus horizontais bem simples. ou veja este próximos posts onde ensino a fazer menus com mais estilização com imagens.

Technorati Marcas: construção,de,menus,uma,forma,bem,fácil,vez,que,podemos,escolher,os,marcadores

0 comentários:

Postar um comentário

seja bem vindo ao mundo do doutorblogs, e sendo asim espéro ser merecedor de suas amizades e lhe convido para visitar mais e ser um dos Seguidor de nosso blogs.
atenciosamente douotrblogs.

Copie o código referente a imagem e cole