Colocar menus do CssmenuMaker no Blogger
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.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: ("images/menu-bg.gif") e("images/current-bg.gif").
Você deverá substituir cada um pelas suas respectivas imagens que estão Hospedadas.
Ex: Hospedei no Picasa as duas imagens e a url ficou assim:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbOf7RlqYMNaowOUTCABYsDPz7Y_y0i9Zuzbz_xQj-uryZDLJS-X1pj4C_VAeUmij7L6YsUsIhYEaceRbllnwdYv3jfTZrdaqHFVv8tgcSij3NrjYFY-xEGeg-w4vMbSyFYoJq3ifazrL-/s128/menu-bg.gif, o qual terei que substituir no ("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 ]]></b:skin> 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 >> Elementos da página >> Adicionar Gadget >> Html/Javascript. O código é esse:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="menu_style.css" type="text/css" media="screen" />
</head>
<body>
<br>
<br>
<ul id="menu">
<li><a href="#" title="Texto Hover">Home</a></li>
<li><a href="#" title="Texto Hover" class="current">Products</a></li>
<li><a href="#" title="Texto Hover">Contact</a></li>
<li><a href="#" title="Texto Hover">Label 4</a></li>
<li><a href="#" title="Texto Hover">Label 5</a></li>
</ul>
</body>
</html>
Dicas:
- Basta, agora,você substituir os "#" pelos endereços do links e substituir os nomes dos links pelos nomes desejados.
- Substitua o "Texto Hover" pelo texto que será exibido ao passar o mouse sobre cada link.
- Para mudar o menu de lugar, basta que você mova o Gadget que você acabou de adicionar em "Elementos da página", para o local desejado.
- É melhor editar o menu, após o Download, pois no Site, o processo é mais demorado.
 |
Gostou deste post? Então assine o feed deste blog ou se preferir receba todos os conteúdos Gratuitamente por email. Ah! O Blog está participando do ToPBlog! dá uma ajudinha aí! |
Artigos
Comentários
Cara, o que acontece quando o menu não consegue se comunicar com o meu código css? O menu aparece sem formatação alguma, afinal toda a formatação está no css.
Postar um comentário
Todos os comentários a partir de hoje serão moderados!
Porém isso não impede de comentar ;)
Não é permitido:
1-Palavras ofensivas
2-Palavras torpes
3-Falar mal de outro Blog ou Blogueiro
4-Não deixar comentário ;)