aprenda como se faz:..."Menu Alfabético na área de publicação"
Autor: Edilene brandao da silva | Publicado: 2011-01-31T01:14:00-08:00

este presente post, encontrei no excelente blog de Jaquelineuma pessoa inteligentee mui sábia!...todos os créditos merecidamente para&nbsp; Jaqueline &nbsp;de super dicasss
 Menu Alfabético na área de publicação 
..."&nbsp; para inserir um menu de A a Z acima da área de  publicação de seu blog."..."&nbsp;&nbsp; os códigos  iniciais e&nbsp;
explicar onde modificá-los para que você deixe seu menu com a  aparência de seu blog. "&nbsp;"&nbsp;&nbsp; O resultado final deverá ficar semelhante ao da  imagem abaixo"
"&nbsp; Para  a customização de meu menu, eu utilizei como base o Template Mínima e  uma área de publicação (main-wrapper) de 410px. Óbvio que se sua área  for menor ou maior a isso, vc terá que fazer algumas modificações que  serão explicadas adiante. "&nbsp;&nbsp; "&nbsp;&nbsp;&nbsp;
"&nbsp;&nbsp;&nbsp; Vamos primeiramente ao código."

"&nbsp; Procure em seu template por outer-wrapper e acima dele insira o código abaixo: 
/*Alfamenu
-------------------------------- */

#alfamenu{
height:20px;
line-height:2.6em;
margin:0px 0px 5px;
margin-left: -40px;

}


#alfamenu li{
float: left;
white-space:nowrap;
list-style-type:none;
background: #EEE9E9;
border: 1px solid #CCCCCC;
}

#alfamenu li a{
display:block;
padding: 3px 3px 4px 3px;
font-size:0.8em;
font-weight:normal;
font: normal bold 90% Arial, sans-serif;
text-transform:uppercase;
text-decoration:none;
color: #1C1C1C;
}

* html #alfamenu a {width:1%;}
#alfamenu .selected, #alfamenu a:hover {
color: #FF6347;
text-decoration:none;
}


"&nbsp; Salve o Modelo."

 "&nbsp;&nbsp; Agora, procure pelo código: &lt;div id='main-wrapper'&gt;

Imediatamente acima dele, insira o código a seguir: 
&lt;div id='alfamenu'&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href='link 1'&gt;A&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='link 2'&gt;B&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='link 3'&gt;C&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='link 4'&gt;D&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='link 5'&gt;E&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='link 6'&gt;F&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='link 7'&gt;G&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='link 8'&gt;H&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='link 9'&gt;I&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='link 10'&gt;J&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='link 11'&gt;K&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='link 12'&gt;L&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='link 13'&gt;M&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='link 14'&gt;N&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='link 15'&gt;O&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='link 16'&gt;P&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='link 17'&gt;Q&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='link 18'&gt;R&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='link 19'&gt;S&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='link 20'&gt;T&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='link 21'&gt;U&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='link 22'&gt;V&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='link 23'&gt;W&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='link 24'&gt;X&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='link 25'&gt;Y&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='link 26'&gt;Z&lt;/a&gt;&lt;/li&gt;

&lt;/ul&gt;
&lt;/div&gt;
&nbsp;&nbsp;&nbsp; "&nbsp;&nbsp; Salve  o Modelo e visualize. "

"&nbsp;&nbsp;&nbsp; Ainda não está pronto, o que está em verde é a  letra correspondente a consulta de A a Z e é exatamente na parte  vermelha, que você irá inserir o link correspondente a seu Marcador."


"&nbsp;&nbsp; Como criar um Marcador?" 

" Quando você escreve uma postagem, na caixinha do blogger, bem embaixo, aparece escrito "&nbsp;&nbsp; Marcadores para esta postagem". No retângulo em branco você escreverá Letra A para todas as postagens que começarem com a letra A; Letra B  para todas as postagens que começarem com a letra B e assim  sucessivamente, formando os seus Marcadores. Para visualizar os  Marcadores é só você clicar no Layout de seu blog em inserir gadget e  selecionar a opção Marcadores."

"&nbsp; Visite seu blog e coloque a seta do Mouse sobre a Primeira letra do Marcador: "&nbsp;&nbsp; Letra A",&nbsp;&nbsp; selecione com o botão direito do mouse a opção "&nbsp;&nbsp; Copiar link"&nbsp;&nbsp;&nbsp; ou "&nbsp;&nbsp; Copiar Atalho", volte ao HTML de seu blog e cole o link sobre o link 1 que designa a letra A do Menu Alfabético. Assim: 


Antes: 

&lt;li&gt;&lt;a href='link 1'&gt;A&lt;/a&gt;&lt;/li&gt;
Depois:
&lt;li&gt;&lt;a href='http://menualfabetico.blogspot.com/search/label/Letra A'&gt;A&lt;/a&gt;&lt;/li&gt;


"&nbsp;&nbsp; Faça  este mesmo procedimento até chegar à Letra Z e salve o modelo. É  trabalhoso, eu sei , mas você só terá que fazer isso uma única vez.  Depois de concluído toda vez que um visitante clicar na letra A será  direcionado para as postagens que comecem com esta letra e assim por  diante. Se você não tiver necessidade de manter os Marcadores, exclua-o  do Layout de seu blog. A label inserida em cada letra continuará sendo  válida. Se você precisar manter os marcadores, use a opção cloud pois a  aparência estética é melhor."


"&nbsp; Depois de tudo pronto, vamos ajeitar a aparência de seu Menu Alfabético. Vejamos novamente os códigos"


/*Alfamenu -------------------------------- */
   #alfamenu{   height:20px;   line-height:2.6em;   margin:0px 0px 5px;   margin-left: -40px;
   }
&nbsp;&nbsp;&nbsp; "&nbsp; Note  o 5px, esta é a distância que afasta o menu da margem de postagem  (main-wrapper). Se você quiser que a distância seja maior, troque o  número 5 por 8, 10 ao seu gosto."

"&nbsp;&nbsp; Note  abaixo, destacado em verde o -40px. Este valor eu utilizei para que o  Menu ficasse na direção da área de postagem. Se o seu menu ainda ficou  recuado, utilize um valor maior -45px, -50px, até você conseguir  enquadrá-lo. Se o Menu passou da área de postagem, diminua o valor de  recuo para -35px, -30px e assim por diante."
   #alfamenu li{
   float: left;   white-space:nowrap;   list-style-type:none;   background: #EEE9E9;   border: 1px solid #CCCCCC;   }
"&nbsp;&nbsp; O  background é a cor de fundo do seu Menu Alfabético. Se quiser mudar a  cor é só usar uma tabela de cores em HTML e alterar para que fique com  as cores de seu blog."


"&nbsp; O Border é a cor da borda que divide o Menu. Também pode ter sua cor modificada. Você pode ver outras cores aqui."
   #alfamenu li a{   display:block;   padding: 3px 3px 4px 3px;   font-size:0.8em;   font-weight:normal;   font: normal bold 90% Arial, sans-serif;   text-transform:uppercase;   text-decoration:none;   color: #1C1C1C;   }
"&nbsp; Padding  interfere no tamanho de seu menu, se você achar que seu menu ficou  grande ou pequeno de mais é só ir alterando os valores. Mantenha os 4px  pois este determina a altura de seu menu."


"&nbsp; A  Fonte de 90% também interfere na largura de seu Menu, você pode  aumentá-lo ou diminuí-lo apenas modificando a sua porcentagem para menos  ou para mais."


"&nbsp;&nbsp; Color: define a cor da letra." 
 * html #alfamenu a {width:1%;}
 #alfamenu .selected, #alfamenu a:hover { color: #FF6347; text-decoration:none; }
"&nbsp;&nbsp; Color da hover, define a cor da letra quando você passa a seta do mouse sobre ela.""&nbsp; Dica importante: antes de fazer qualquer modificação em seu template, baixe o modelo completo e salve-o em seu computador."
"&nbsp; Veja um exemplo do Menu Alfabético pronto aqui."




http://dicasvaliosass.blogspot.com