Menu Simples usando o novo Gadget de Marcadores do Blogger

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

1. 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.
2. Em Layout => Editar HTML salve uma cópia de seu template, clicando em "Baixar Modelo Completo";
3. Deixe a caixinha "Exibir Modelos de Widgets" desmarcada;
4. 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

   }

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

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

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

   
   
   
   
   
   
3. Visualize o template e se tudo estiver ok, salve.

C) Adicionando o Gadget de Marcadores

1. Vá para Layout => Elementos da Página;
2. 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.
3. 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;
4. Em "Exibir", marque a opção "Marcadores Selecionados" e depois clique em "Edit";
5. 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";
6. Defina se quer a "Classificação" em ordem alfabética ou em por frequencia;
7. No segundo campo "Exibir" escolha "Lista";
8. 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"

1. Volte à aba "Editar HTML" e desta vez, marque a opção "Expandir Modelos de Widgets";
2. 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'>

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

   
   
   
   
4. 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='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>

   2	<b:if cond='data:display == &quot;list&quot;'>

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

   
   
   
   
5. Visualize seu template e se tudo estiver ok, salve.

Este é um exemplo para menus horizontais bem simples. Em próximos posts ensino a fazer menus com mais estilização e também menus verticais.

OK!! Pronto.

OS COMENTÁRIOS AJUDAM MUITO E INCENTIVAM,
PORTANTO NÃO DEIXE DE FAZER O SEU!