Colocar menus do CssmenuMaker no Blogger
Autor: Alex Batista | Publicado: 2010-11-05T15:40:00-03:00

Em uma postagem anterior, eu mostrei como criar um menu Horizontal para seu Blog no Site Css Menu Maker.
Já nesta postagem, irei lhe mostrar como colocar estes menus em seu Blog - no Blogger. O tutorial é simples, sendo necessário apenas, copiar e colar.Siga os passos abaixo para inserir o Menu em seu Blog:

Depois de fazer o Download do Menu, é necessário a descompactação do arquivo, para isto você pode usar o WinRAR. Logo após a descompactação, use o Bloco de Notas e abra o código (.css) que está presente na pasta "Menu". O código varia de menu para menu!Dentro da pasta "menu" você encontrará duas imagens em formato ".gif ". Você terá que Hospedá-las para conseguir a Url de cada imagem, que será inserida no código - para isto aconselho o Picasa.No código aberto no bloco de notas, existe alguns trechos que precisarão ser substituídos. São eles:&nbsp;("images/menu-bg.gif") e("images/current-bg.gif").&nbsp;
Você deverá&nbsp;substituir&nbsp;cada um pelas suas respectivas imagens que estão Hospedadas.&nbsp;Ex: Hospedei no Picasa as duas&nbsp;imagens&nbsp;e a url ficou assim:&nbsp;
http://lh4.ggpht.com/_cRyCFSBBt50/TNNU2769B6I/AAAAAAAABZg/E4nLPYhKfNQ/s128/menu-bg.gif, o qual terei que substituir no&nbsp;("images/menu-bg.gif"), ou seja, onde tiver "menu-bg.gif", terei que colar a Url da imagem "menu-bg.gif". O mesmo deve ser feito com a outra imagem.
Feito isto, copie todo o código e cole-o no seu template. Mais precisamente acima de ]]&gt;&lt;/b:skin&gt; e salve.
Vamos adicionar agora, o menu propriamente dito,ou seja, os nomes e os endereços dos links. Para inseri-los, basta copiar o código abaixo e adicionar como um gadget: na aba Design &gt;&gt; Elementos da página &gt;&gt; Adicionar Gadget &gt;&gt; Html/Javascript.&nbsp;O código&nbsp; é esse:
&nbsp;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;&lt;head&gt;&lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;&lt;title&gt;&lt;/title&gt;&lt;link rel="stylesheet" href="menu_style.css" type="text/css" media="screen" /&gt;&lt;/head&gt;&lt;body&gt;&lt;br&gt;&lt;br&gt;&lt;ul id="menu"&gt;&lt;li&gt;&lt;a href="#" title="Texto Hover"&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#" title="Texto Hover" class="current"&gt;Products&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#" title="Texto Hover"&gt;Contact&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#" title="Texto Hover"&gt;Label 4&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#" title="Texto Hover"&gt;Label 5&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;

&lt;/body&gt;&lt;/html&gt;
Dicas:Basta, agora,você substituir os "#" pelos endereços do links e substituir os nomes dos links pelos nomes desejados.
Substitua o "Texto Hover" &nbsp;pelo texto que será exibido ao passar o mouse sobre cada link.
Para mudar o menu de lugar, basta que você mova&nbsp;o Gadget que você acabou de adicionar em "Elementos da página",&nbsp;para o local desejado.
É melhor editar o menu, após o Download, pois no Site, o processo é mais demorado.