Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).
Mostrando postagens com marcador Menu Horizontal. Mostrar todas as postagens
Mostrando postagens com marcador Menu Horizontal. Mostrar todas as postagens
Menu Horizontal com CSS e Jquery
Em um dos meus blogs de teste eu instalei este menu criado por Soh do site SohTanaka e que tem um efeito bastante interessante. Você pode conferir o demo aqui.
Me pediram para explicar como colocar este menu no Blogger, então lá vai:
Primeiro você deve criar uma imagem com 80px de altura onde metade de cima dela (40px) aparecerá quando o menu estiver em estado normal e a metade de baixo no estado hover (quando passa o mouse por cima), como neste exemplo:
Hospede a imagem (pode ser no próprio Blogger) e guarde o link. Agora vá em Editar HTML e cole no código do seu template, abaixo de ]]></b:skin>
<style type='text/css'>
.container {
width: 520px;
height: 100px;
position: absolute;
top: 10%; left: 60%;
margin: 0px 0 0 -80px;
overflow: hidden;
}
img {border: none;}
ul#topnav {
margin: 10px 0 20px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 520px;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 10px;
float: left;
text-decoration: none;
color: #fff;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}
ul#topnav.v2 span{
background: url(coloque aqui a url da imagem) repeat-x left top;
}
ul#topnav.v2 a{
color: #555;
background: url(coloque aqui a url da imagem) repeat-x left bottom;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$("#topnav li").prepend("<span/>"); //Throws an empty span tag right before the a tag
$("#topnav li").each(function() { //For each list item...
var linkText = $(this).find("a").html(); //Find the text inside of the a tag
$(this).find("span").show().html(linkText); //Add the text in the span tag
});
$("#topnav li").hover(function() { //On hover...
$(this).find("span").stop().animate({
marginTop: "-40" //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find("span").stop().animate({
marginTop: "0" //Move the span back to its original state (0px)
}, 250);
});
});
</script>
depois, no HTML ( após a tag <body> ) coloque o seguinte trecho, antes ou depois de <div id='header-wrapper'>....</div> :
<div class='container'>
<ul class='v2' id='topnav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Portfolio</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
No meu exemplo, os códigos foram colocados abaixo de header, assim:
em container, determinamos as dimensões ocupadas pelo menu, bem como sua posição na página:
.container {
width: 520px;
height: 100px;
position: absolute;
top: 10%; left: 60%;
margin: 0px 0 0 -80px;
overflow: hidden;
}
width: largura total ocupada pela div que contém o menu.
note que em ul#topnav o valor se repete (width: 520px)
top: 10% - distância do menu para o topo da página
left: 60% - distância do menu para o lado esquerdo da página
com margin você também controla a posição do menu. Veja que o menu está a 60% da esquerda da página menos 80px. Vá alterando os valores para que melhor se encaixe no seu layout.
Coloque a url da sua imagem hospedada (no Blogger ou em outro site) onde está indicado no código CSS em negrito. Substitua os # no HTML do menu pelos links que desejar.
resultado
Como colocar links no menu
Muitas pessoas me perguntam como colocar links nos menus dos templates que baixam aqui e em outros blogs. Outra pergunta que me fazem muito é que link colocar no menu. Então vamos por partes.
Se você baixou um template que tem a opção de menu horizontal, saiba que há duas maneiras distintas de editar os links:
Este tipo exige que os links sejam colocados diretamente no código html do menu. A estrutura do código de um menu é bastante semelhante ao exemplo abaixo:
<div id='menu'>
<ul>
<li><a href='url do link aqui'>Home</a></li>
<li><a href='url do link aqui'>Sobre</a></li>
<li><a href='url do link aqui'>Fotos</a></li>
<li><a href='url do link aqui'>Contato</a></li>
</ul>
</div>
Entre <div id='menu'> e </div> encontra-se o conteúdo do bloco ou seja, uma lista, que se inicia em <ul> e termina com </ul> . Entre cada um dos <li> e </li> deve ser colocado o link de destino e onde está Home, Sobre, Fotos, etc, o nome que aparecerá no menu (destino do link).
Mas, que links colocar no menu? Você pode colocar o link de um post específico (criar um post sobre você ou seu trabalho e colocar em Sobre ou ainda um formulário de contato em um post e nomear Contato) para dar a impressão de páginas, por exemplo. Para obter o link de um post específico, basta clicar sobre o título do post e ir em Copiar Link. Se o post não tiver título, basta copiar o endereço que aparece no seu navegador quando está na página do post. Você pode ainda linkar um marcador específico como faço aqui no blog (em Templates). Basta clicar com o botão direito do mouse sobre determinado marcador de sua lista e copiar o link.
Em muitos dos templates que disponibilizo deixo para que o menu seja editado através do gadget Lista de Links. Para isso, basta ir em Layout, clicar em Adicionar Elemento de Página e escolher a opção Lista de links:
Em Novo Url do Site coloque o link de destino e em Novo Nome do Site o nome que aparecerá no menu. Clique em Adicionar Link e continue colocando os outros links que deseja que apareçam no menu.
Não coloque título em sua lista!
Tendo terminado sua lista, disponha os links na ordem que deseja que apareçam, da esquerda para a direita no menu, clicando nas flechinhas que direcionam para cima e para baixo (para cima o link fica à esquerda, para baixo à direita).
Clique em Salvar e arraste o gadget para o espaço destinado ao menu, geralmente à direita do cabeçalho ou abaixo dele.
Mas como saber que tipo de edição há em cada template? Bom, geralmente o autor dá uma pista de como editar o menu, mas se ele esquecer (e eu sempre esqueço...) procure no código do seu template algo semelhante a primeira lista (HTML) e se não houver nada assim, edite uma Lista de Links e arraste para o local que seja mais obviamente indicado para mostrar um menu e visualize para ter certeza de que arrastou para o local correto.
Leia Mais
Se você baixou um template que tem a opção de menu horizontal, saiba que há duas maneiras distintas de editar os links:
Editar através do html.
Este tipo exige que os links sejam colocados diretamente no código html do menu. A estrutura do código de um menu é bastante semelhante ao exemplo abaixo:
<div id='menu'>
<ul>
<li><a href='url do link aqui'>Home</a></li>
<li><a href='url do link aqui'>Sobre</a></li>
<li><a href='url do link aqui'>Fotos</a></li>
<li><a href='url do link aqui'>Contato</a></li>
</ul>
</div>
Entre <div id='menu'> e </div> encontra-se o conteúdo do bloco ou seja, uma lista, que se inicia em <ul> e termina com </ul> . Entre cada um dos <li> e </li> deve ser colocado o link de destino e onde está Home, Sobre, Fotos, etc, o nome que aparecerá no menu (destino do link).
Mas, que links colocar no menu? Você pode colocar o link de um post específico (criar um post sobre você ou seu trabalho e colocar em Sobre ou ainda um formulário de contato em um post e nomear Contato) para dar a impressão de páginas, por exemplo. Para obter o link de um post específico, basta clicar sobre o título do post e ir em Copiar Link. Se o post não tiver título, basta copiar o endereço que aparece no seu navegador quando está na página do post. Você pode ainda linkar um marcador específico como faço aqui no blog (em Templates). Basta clicar com o botão direito do mouse sobre determinado marcador de sua lista e copiar o link.
Editar através do gadget Lista de Links.
Em muitos dos templates que disponibilizo deixo para que o menu seja editado através do gadget Lista de Links. Para isso, basta ir em Layout, clicar em Adicionar Elemento de Página e escolher a opção Lista de links:
Em Novo Url do Site coloque o link de destino e em Novo Nome do Site o nome que aparecerá no menu. Clique em Adicionar Link e continue colocando os outros links que deseja que apareçam no menu.
Não coloque título em sua lista!
Tendo terminado sua lista, disponha os links na ordem que deseja que apareçam, da esquerda para a direita no menu, clicando nas flechinhas que direcionam para cima e para baixo (para cima o link fica à esquerda, para baixo à direita).
Clique em Salvar e arraste o gadget para o espaço destinado ao menu, geralmente à direita do cabeçalho ou abaixo dele.
Mas como saber que tipo de edição há em cada template? Bom, geralmente o autor dá uma pista de como editar o menu, mas se ele esquecer (e eu sempre esqueço...) procure no código do seu template algo semelhante a primeira lista (HTML) e se não houver nada assim, edite uma Lista de Links e arraste para o local que seja mais obviamente indicado para mostrar um menu e visualize para ter certeza de que arrastou para o local correto.
Menu com imagens e efeito hover
Procurando uma maneira de criar um menu com imagens individuais (um ícone para cada item da lista) com efeito hover, lembrei de um menu vertical que vi no blog Vagabundia que apresenta este bonito efeito. O que fiz foi estudar o código fonte, entender seu funcionamento e pedir ao JMiur (muito obrigada, de novo!) permissão para publicar este tutorial, que me foi solicitado tantas vezes.
Para que vocês entendem do que se trata, antes de continuar lendo, visitem este blog de testes e passem o cursor do mouse sobre cada item do menu (vertical e horizontal). Quebrei muito a cabeça tentando encontrar uma maneira limpa e eficaz de criar este efeito (e tudo o que conseguia era uma gambiarra feia e confusa) até me deparar com algo tão simples e, por que não dizer, óbvio! A idéia é criar uma imagem só, com o ícone para o estado inicial do link e outro para o estado hover e usar a propriedade background-position para definir quando um e outro deve aparecer.
As medidas a seguir se baseiam no exemplo em meu blog de testes:
1-Crie imagens .gif com fundo transparent de tamanho 64px x 106px e posicione os ícones da maneira que se segue:
2-Faça uma imagem neste modelo para cada item do menu;
3-Hospede as imagens, copie a url de cada um e no CSS do código do template (acima de ]]></b:skin>) coloque este código que corresponde à cada link do menu:
a#m1, a#m1:link, a#m1:visited, a#m1:active {Para tantos forem os itens do menu, acrescente o trecho:
background: transparent url(url da primeira imagem) no-repeat left top;
display: block;
height: 54px;
width: 64px;
}
a#m1:hover {background-position: left bottom;}
a#m2, a#m2:link, a#m2:visited, a#m2:active {
background: transparent url(url da segunda imagem) no-repeat left top;
display: block;
height: 54px;
width: 64px;
}
a#m2:hover {background-position: left bottom;}
a#m3, a#m3:link, a#m3:visited, a#m3:active {
background: transparent url(url da terceira imagem) no-repeat left top;
display: block;
height: 54px;
width: 64px;
}
a#m3:hover {background-position: left bottom;}
a#m4, a#m4:link, a#m4:visited, a#m4:active {
background: transparent url(url da quarta imagem) no-repeat left top;
display: block;
height: 54px;
width: 64px;
}
a#m4:hover {background-position: left bottom;}
a#m5, a#m5:link, a#m5:visited, a#m5:active {
background: transparent url(url da quinta imagem) no-repeat left top;
display: block;
height: 54px;
width: 64px;
}
a#m5:hover {background-position: left bottom;}
a#m6, a#m6:link, a#m6:visited, a#m6:active {
background: transparent url(url da sexta imagem) no-repeat left top;
display: block;
height: 54px;
width: 64px;
}
a#m6:hover {background-position: left bottom;}
a#m6, a#m6:link, a#m6:visited, a#m6:active {
background: transparent url(link da sexta imagem) no-repeat left top;
display: block;
height: 54px;
width: 64px;
}
a#m6:hover {background-position: left bottom;}
Note que atribuímos uma ID para os links que compõem o menu e que, nas palavras do mestre Maujor: id deve ser única, isto é, um e somente um elemento ou seletor deve estar identificado com determinada id. Por isso, ao acrescentar novos links à sua lista, você deve criar uma nova ID (nome), ou seja, à partir de #m6 deve se seguir #m7 ou qualquer outro nome que seja único e exclusivo.
Para que você entenda o que está fazendo (e não simplesmente copie e cole sem conseguir criar variações ao seu gosto), vejamos:
a#m1, a#m1:link, a#m1:visited, a#m1:active {
background: transparent url(link da primeira imagem) no-repeat left top;
display: block;
height: 54px;
width: 64px;
}a#m1:hover {background-position: left bottom;}
em vermelho atribuimos um identificador ID para o elemento a (link), no caso #m1;
em background definimos que nos estados a:link, a:visited e a:active a imagem apareça no topo à esquerda. Como definimos uma altura e largura para a área 'clicável' (com height e width) impedimos que o restante da imagem apareça (lembre que a imagem original tem height:106px). Ou seja, o que excede a altura de 54px não aparecerá. Veja na imagem abaixo:
Para o estado hover a posição do background muda para left bottom (em laranja) e agora o que fica escondido é a parte superior da imagem, novamente limitada pela altura estabelecida para a área do link. Veja:
Um truque simples e genial que não sofre incompatibilidade de navegadores e não causa nenhuma dor de cabeça. Enfim, algo que não fui capaz de pensar :)
Agora, para criar um menu horizontal onde os links aparecerão, acrescente também no CSS:
#navigation{
height:50px; /*altura do menu*/
width: 600px; /*área total ocupada pelo menu*/
margin:0px auto; /*margin que centraliza o menu na tela*/
background: url(http://i41.tinypic.com/690sux.jpg) no-repeat top left; /*imagem de fundo do menu*/
}
#navigation ul{
width: 400px; /*largura da área ocupada pelos ícones*/
margin: 0px auto 0; /*centralizando os ícones*/
padding: 0 0 0;
}
#navigation li{
float:left;/*flutuação à esquerda garante que os ícones fiquem na horizontal*/
margin-top:4px; /*margens dos ícones*/
list-style-type:none;
}
Salve as modificações. Agora no HTML do código, e aqui você escolhe onde aparecerá seu menu, acrescente:
<div id='navigation'>No caso do meu exemplo eu acrescentei o código dentro do cabeçalho, assim:
<ul>
<li><a href='Link do Blog/' id='m1' title='Home'> </a></li>
<li><a href='Link 01/' id='m2' target='_blank' title='Download'> </a></li>
<li><a href='Link 02/' id='m3' target='_blank' title='Vídeos'> </a></li>
<li><a href='Link 03/' id='m4' target='_blank' title='MP3'>
</a></li>
<li><a href='Link 04/' id='m5' target='_blank' title='Feed'>
</a></li>
<li><a href='Link 05/' id='m6' rel='nofollow' target='_blank' title='Contato'> </a></li>
</ul>
</div>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Menu Hover (Cabeçalho)' type='Header'/>
</b:section>
Aqui o código do menu
</div>
Mas você pode colocar acima ou abaixo de header,como queira. Para colocar verticalmente na sidebar, basta copiar o HTML à partir de <ul> até </ul> ,abrir um elemento de página HTML/JavaScript e colar o código.
Recapitulando:
- crie uma ID para cada link da lista;
- crie uma imagem com o dobro da altura determinada para a área de cada link, contendo as imagens para o estador inicial e hover do link.
- acrescente os links em um menu
Evite punições do Google criando conteúdo duplicado: não copiei este tutorial, indique!
Mais menus horizontais
Hoje o Carlinhos me perguntou no Twitter como colocar no blog os menus que aparecem nesta página. Como é impossível explicar em 140 caracteres, vou responder aqui no blog:
Primeiro faça o download do pacote que contém as imagens e códigos para os 4 menus: download.
Copie o código CSS (ver abaixo) para o menu escolhido: Blue, Green, Red ou Purple e cole em qualquer lugar antes de ]]></b:skin>
Hospede as duas imagens que são pedidas para cada menu. Por exemplo, se você escolheu o Red, hospede redslate_background e redslate_backgroundOVER e coloque assim no código:
.red #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(aqui o link da primeira imagem/code/slate/images/redslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.red #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.red #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.red #slatenav ul li a{display:block;float:left;color:#FECCC3;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.red #slatenav ul li a:hover,.red #slatenav ul li a.current{color:#fff;background:transparent url(aqui o link da segunda imagem/code/slate/images/redslate_backgroundOVER.gif) no-repeat top center;}
Não mude nada entre os parenteses, apenas acrescente o link das imagens, como indicado.
Agora copie o trecho do HTML do código do menu :
<div class='red'>
<div id='slatenav'>
<ul>
<li><a class='current' href='http://seu link aqui' title=''>Home</a></li>
<li><a href='http://seu link aqui' title=''>About Us</a></li>
<li><a href='http://seu link aqui' title=''>Services</a></li>
<li><a href='http://seu link aqui' title=''>Our Work</a></li>
<li><a href='http://seu link aqui' title=''>Contact Us</a></li>
</ul>
</div>
</div>
e cole abaixo ou acima de:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=' (Cabeçalho)' type='Header'/>
</b:section>
</div>
O meu ficou assim.
Espero ter ajudado.
Leia Mais
Primeiro faça o download do pacote que contém as imagens e códigos para os 4 menus: download.
Copie o código CSS (ver abaixo) para o menu escolhido: Blue, Green, Red ou Purple e cole em qualquer lugar antes de ]]></b:skin>
Hospede as duas imagens que são pedidas para cada menu. Por exemplo, se você escolheu o Red, hospede redslate_background e redslate_backgroundOVER e coloque assim no código:
.red #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(aqui o link da primeira imagem/code/slate/images/redslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.red #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.red #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.red #slatenav ul li a{display:block;float:left;color:#FECCC3;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.red #slatenav ul li a:hover,.red #slatenav ul li a.current{color:#fff;background:transparent url(aqui o link da segunda imagem/code/slate/images/redslate_backgroundOVER.gif) no-repeat top center;}
Não mude nada entre os parenteses, apenas acrescente o link das imagens, como indicado.
Agora copie o trecho do HTML do código do menu :
<div class='red'>
<div id='slatenav'>
<ul>
<li><a class='current' href='http://seu link aqui' title=''>Home</a></li>
<li><a href='http://seu link aqui' title=''>About Us</a></li>
<li><a href='http://seu link aqui' title=''>Services</a></li>
<li><a href='http://seu link aqui' title=''>Our Work</a></li>
<li><a href='http://seu link aqui' title=''>Contact Us</a></li>
</ul>
</div>
</div>
e cole abaixo ou acima de:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=' (Cabeçalho)' type='Header'/>
</b:section>
</div>
O meu ficou assim.
Espero ter ajudado.
Marcadores como menu horizontal
Se você não tem muitos marcadores na sua página e gostaria de dar mais destaque à eles, pode transformá-los num menu horizontal abaixo (ou acima, como quiser) do título do blog. Para isso, vamos pegar o modelo de menu horizontal que uso nos templates que faço (e que já disponibilizei aqui). Siga todos os passos. Feito isso, basta ir em Modelo->Adicionar Elemento de Página e escolher a opção Marcadores. Arraste os Marcadores para o novo espaço que surgiu sob o cabeçalho do blog e salve. Para ficar com uma estética melhor, recomendo retirar os números que aparecem indicando a quantidade de postagens relacionadas com o marcador. Para isso, siga este tutorial.
Leia Mais
Colocando e-mail no menu horizontal
Quem deseja colocar o e-mail em Contatos no menu horizontal, basta seguir o exemplo :
<li><a href='mailto:seu e-mail aqui' title='Contato'>Contato</a></li>
Em tempo: Me perguntaram na comunidade do Orkut se era possível linkar um marcador ao menu: sim, é possível, sem problemas. Clique com o botão direito sobre qualquer dos seus marcadores e copie o link. Depois transfira este link para o menu (como nos exemplos) e dê o nome que quiser. Esta é uma maneira bacana de tornar mais visível alguns dos marcadores do seu blog.
Leia Mais
<li><a href='mailto:seu e-mail aqui' title='Contato'>Contato</a></li>
Em tempo: Me perguntaram na comunidade do Orkut se era possível linkar um marcador ao menu: sim, é possível, sem problemas. Clique com o botão direito sobre qualquer dos seus marcadores e copie o link. Depois transfira este link para o menu (como nos exemplos) e dê o nome que quiser. Esta é uma maneira bacana de tornar mais visível alguns dos marcadores do seu blog.
Como colocar os links no menu horizontal
Como editar os links do menu horizontal de alguns templates:
<!-- Não esqueça de colocar aqui os seus links!!-->
<div id='navigation'>
<ul>
<li><a href='endereço do seu blog' title=' Home Page'>Home</a></li>
<li><a href='inserir link aqui' title='Artigos'>Artigos</a></li>
<li><a href='inserir link aqui' title='Fotos'>Fotos</a></li>
<li><a href='inserir link aqui' title='Links'>Links</a></li>
<li><a href='inserir link aqui' title='Forum'>Forum</a></li>
<li><a href='inserir link aqui' title='Outros Sites'>Outros Sites</a></li>
<li><a href='inserir link aqui' title='Faq'>FAQ</a></li>
<li><a href='inserir link aqui' title='Contato'>Contato</a></li>
</ul>
</div>
Esta assim:
<li><a href='inserir link aqui' title='Artigos'>Artigos</a></li>
Exemplo de como editar:
<li><a href='http://criativas.blogspot.com' title='Receitas'>Criativas</a></li>
Onde está inserir link aqui, você pode colocar o endereço de alguma página específica do seu blog, de algum marcador ou de alguma página externa. Onde está Title, coloque uma pequena descrição do link ou o nome do mesmo: ele só aparecerá quando se colocar o cursor sobre o link. E entre <a href="http://endereço do seu link"> e </a> você coloca o 'nome' do link, o que aparecerá para seus visitantes.
Leia Mais
<!-- Não esqueça de colocar aqui os seus links!!-->
<div id='navigation'>
<ul>
<li><a href='endereço do seu blog' title=' Home Page'>Home</a></li>
<li><a href='inserir link aqui' title='Artigos'>Artigos</a></li>
<li><a href='inserir link aqui' title='Fotos'>Fotos</a></li>
<li><a href='inserir link aqui' title='Links'>Links</a></li>
<li><a href='inserir link aqui' title='Forum'>Forum</a></li>
<li><a href='inserir link aqui' title='Outros Sites'>Outros Sites</a></li>
<li><a href='inserir link aqui' title='Faq'>FAQ</a></li>
<li><a href='inserir link aqui' title='Contato'>Contato</a></li>
</ul>
</div>
Esta assim:
<li><a href='inserir link aqui' title='Artigos'>Artigos</a></li>
Exemplo de como editar:
<li><a href='http://criativas.blogspot.com' title='Receitas'>Criativas</a></li>
Onde está inserir link aqui, você pode colocar o endereço de alguma página específica do seu blog, de algum marcador ou de alguma página externa. Onde está Title, coloque uma pequena descrição do link ou o nome do mesmo: ele só aparecerá quando se colocar o cursor sobre o link. E entre <a href="http://endereço do seu link"> e </a> você coloca o 'nome' do link, o que aparecerá para seus visitantes.
Criando um menu horizontal
Aconselho sempre, antes de qualquer mudança no seu template, que você salve uma cópia do mesmo antes de tudo. E mais, nunca salve antes de visualizar o resultado, por que se não estiver bom, basta clicar em Limpar Edições.
1o Parte:
Coloque antes de ]]></b:skin>
#navigation{
height:30px;
width: 800px;
line-height:2.9em;
margin:0px auto 0px;
background: url(link da sua imagem) repeat-x;
}
#navigation ul{
margin: 0 0 0;
padding: 0 0 0;}
#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #787878;
white-space:nowrap;
}
#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #000000;
}
#navigation .selected,#navigation a:hover{
background:#808080;
color:#000000;
text-decoration:none;
}
Todos os valores que aí estão (width, margin, color, etc) podem e devem ser modificados conforme o layout do seu template.
Antes de passar a segunda parte do código, vou explicar algumas coisas que podem ser modificadas:
#navigation{
height:40px;
width: 890px;
line-height:2.9em;
margin:0 auto 0;
background: url(ENDEREÇO DA IMAGEM) repeat-x;
}
Height é a altura que terá o menu
Width é a largura
line-height é a altura da linha (não confundir com o tamanho da fonte)
Margin: do modo que aqui se apresenta, centraliza o menu na página (0 auto 0)
Background é o plano de fundo, que pode ser uma cor ou uma imagem. Repeat-x garante que uma imagem se repeti horizontalmente.
#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #787878;
white-space:nowrap;
}
border: aqui você define se terá borda em toda a volta de cada item do menu (para isso deixe só Border: 1px solid...), se só à direita (right), esquerda (left), topo (top), ou base (bottom). Basta determinar antes dos valores:
border-bottom: 1px solid etc etc...
border-top: 1 px solid etc etc....
#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #000000;
}
Color: determinará a cor que dos links antes que se passe o cursor sobre eles.
#navigation .selected,#navigation a:hover{
background:#808080;
color:#000000;
text-decoration:none;
}
Aqui se determina cor dos links e background quando se passa o cursor por cima do link.
2o Parte:
Para deixar o menu sob o cabeçalho, coloque abaixo de (HTML):
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Templates Novo Blogger (Header)' type='Header'/>
</b:section>
</div>
Este código:
Salve as modificações. Vá ao painel do Blogger (Modelo/Layout) e veja um novo espaço, sob o cabeçalho, onde é possível adicionar elementos de página. Crie uma lista de links e arraste para este novo espaço. Salve e visualize.
Leia Mais
1o Parte:
Coloque antes de ]]></b:skin>
#navigation{
height:30px;
width: 800px;
line-height:2.9em;
margin:0px auto 0px;
background: url(link da sua imagem) repeat-x;
}
#navigation ul{
margin: 0 0 0;
padding: 0 0 0;}
#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #787878;
white-space:nowrap;
}
#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #000000;
}
#navigation .selected,#navigation a:hover{
background:#808080;
color:#000000;
text-decoration:none;
}
Todos os valores que aí estão (width, margin, color, etc) podem e devem ser modificados conforme o layout do seu template.
Antes de passar a segunda parte do código, vou explicar algumas coisas que podem ser modificadas:
#navigation{
height:40px;
width: 890px;
line-height:2.9em;
margin:0 auto 0;
background: url(ENDEREÇO DA IMAGEM) repeat-x;
}
Height é a altura que terá o menu
Width é a largura
line-height é a altura da linha (não confundir com o tamanho da fonte)
Margin: do modo que aqui se apresenta, centraliza o menu na página (0 auto 0)
Background é o plano de fundo, que pode ser uma cor ou uma imagem. Repeat-x garante que uma imagem se repeti horizontalmente.
#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #787878;
white-space:nowrap;
}
border: aqui você define se terá borda em toda a volta de cada item do menu (para isso deixe só Border: 1px solid...), se só à direita (right), esquerda (left), topo (top), ou base (bottom). Basta determinar antes dos valores:
border-bottom: 1px solid etc etc...
border-top: 1 px solid etc etc....
#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #000000;
}
Color: determinará a cor que dos links antes que se passe o cursor sobre eles.
#navigation .selected,#navigation a:hover{
background:#808080;
color:#000000;
text-decoration:none;
}
Aqui se determina cor dos links e background quando se passa o cursor por cima do link.
2o Parte:
Para deixar o menu sob o cabeçalho, coloque abaixo de (HTML):
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Templates Novo Blogger (Header)' type='Header'/>
</b:section>
</div>
Este código:
<div id='navigation'><b:section class='navigation' id='navigation' showaddelement='yes'></b:section></div>
Salve as modificações. Vá ao painel do Blogger (Modelo/Layout) e veja um novo espaço, sob o cabeçalho, onde é possível adicionar elementos de página. Crie uma lista de links e arraste para este novo espaço. Salve e visualize.
Assinar:
Comentários (Atom)