English Spain Français Deustsch Italiano Japan Russia Korea
Get this Widget by inWEBblog

Inserindo Menu Expansível no Blog

Primeiro, vamos entender que um MENU EXPANSÍVEL, na verdade, nada mais é do que, como o próprio nome diz, um menu que, ao ser clicado se expande e, ao ser clicado novamente, se retrai. Simples, assim!

Agora, imagine que você tem informações que julga importante (Seus blogs Favoritos, por exemplo!) e quer dividi-las com seus leitores. Imagine, ainda, que estas informações, por sua quantidade, uma vez colocadas em sua SideBar, possam ocupar um precioso espaço vertical nesta mesma Barra Lateral ou quem sabe, até, “quebrar” o layout de seu template.

O que fazer, então? Simples!... Utilize um MENU EXPANSÍVEL, igual a estes dois existentes neste blog: FAVORITOS e RSS FEEDS. Aproveite, dê uns cliks lá e veja como funcionam.

Pois bem, fazer isso é extremamente simples. E é o que vamos ver agora!

Passo 1: Antes de tudo, lembre-se de fazer um Backup de seu template, afinal seguro morreu de velho, como prega o velho ditado.



Passo 2: Após logar-se no Painel de seu blog, vá a LAYOUT > Editar HTML (Ver imagem acima) e procure (Use as teclas CTRL + F) pela tag <head>. Note que não é necessário marcar Expandir Modelos de Widgets. Cole, logo abaixo dela, o seguinte código (1):

<style type='text/css'>.texthidden {display:inline}.shown {display:block}</style><script type='text/javascript'>document.write('<style>.texthidden {display:none} </style>');</script><script type='text/Javascript'>function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className=="shown") {whichpost.className="texthidden";}else {whichpost.className="shown";}}</script>
<style type='text/css'>
#dolphincontainer{position:relative;height:43px;color:#f06214;background:#ffffff;
width:100%;font-family:Helvetica,Arial,Verdana,sans-serif;}
#dolphinnav{position:relative;height:34px;font-size:12px;text-transform:uppercase;
font-weight:bold;background:#F06214 url() repeat-x bottom left;
padding:0 0 0 20px;}
#dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
#dolphinnav ul li{display:block;float:left;margin:0 1px;}
#dolphinnav ul li a{display:block;float:left;color:#ffffff;text-decoration:none;
padding:0 0 0 20px;height:33px;}
#dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}
#dolphinnav ul li a:hover{color:#000000;
background:transparent url() repeat-x bottom left;}
#dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;}
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#FCD9B6;
background:#ffffff url() no-repeat top left;line-height:275%;}
#dolphinnav ul li a.current span{display:block;padding:0 18px 0 0;width:auto;
background:#805E5E url() no-repeat top right;height:33px;}
</style>

Passo 3: SALVAR seu template. Agora, vá a Elementos de Página > Adicionar um Gadgets. Na janela que se abrirá (Adicionar um Gadget/Noções Básicas), escolha HTML/JavaScript e, na caixa Conteúdo, cole o código (2) abaixo, do jeito que está. Mais adiante iremos alterá-lo.

<a href="javascript:void(0);" onclick="expandcollapse('favoritos')"><img border="0" src="http://i549.photobucket.com/albums/ii396/inaciorolim/Favoritos.png"/></a><br/>
<ul id="favoritos" class="texthidden">
<li><a href="http://uhugalera.blogspot.com/">UhuGalera</a></li>
<li><a href="http://inwebblog.blogspot.com/">inWEBblog</a></li>
</ul>

Passo 4: SALVAR. Agora, dê uma visualizada em seu blog. Seu MENU EXPANSÍVEL, com seus blogs Favoritos já está lá! No momento, estão linkados apenas os dois blogs deste Editor: o Uhu, Galera!... e este in W|E|B blog. Peço que, se você achar que mereço, mantenha-os lá.

CONSIDERAÇÕES FINAIS

1. Você pode inserir quantos links quiser. Para tanto, basta repetir a última linha, antes do fechamento da tag (</ul>), seguindo a disposição do código (3) abaixo:

<li><a href="http://endereço_do_blogspot.com/">Nome do Blog</a></li>

2. Note que os itens em VERMELHO (Código 2) são, apenas, títulos de identificação e poderão ser alterados a seu bel prazer, desde que mantidos nomes iguais em ambos!

3. O url em AZUL (Código 2), aponta para a imagem que foi usada como ícone de seus favoritos. Aqui, usamos uma imagem .png, personalizada, com 95 x 91px. Mas, querendo alterá-la, basta hospedar sua nova imagem no local de sua preferência, anotar seu url e substituir a imagem atual.

4. Neste tutorial, criamos apenas um menu expansível com link para seus Favoritos, mas este procedimento é válido para o que sua criatividade mandar. Enjoy!

Pronto! Fácil, não?!...



GOSTOU DESTE ARTIGO? ENTÃO ASSINE O RSS FEEDS DO BLOG. É GRÁTIS!
Ficaria, também, muito honrado com um COMENTÁRIO seu sobre este Post.


Postar um comentário

Comente este artigo!: 4

No Blog Do Johnny De Tudo Tem :
junho 09, 2009 1:23 AM

Opaaa boa dica sobre menu espansivel, valeu brother

everson :
julho 15, 2009 10:05 PM

amigo como que faz para colocar 2 menu desse porq quando coloco outro ñ abre ?

Inácio Rolim :
julho 23, 2009 9:28 AM

Caro Everson,

Primeiro desculpe a demora na resposta. (Falta de tempo!...) e obrigado por prestigiar este blog!

Quanto a seu questionamento, observe que cada menu tem que ter seu próprio título, conforme explicado em Considerações Finais, ítem 2, assim, a cada menu você tem que alterar o ítem destacado em vermelho, nos dois lugares e com nomes idênticos.

Veja que neste blog tenho 2 menus, em perfeito funcionamento (Meus Favoritos e RSS FEEDS).

Creio ser só isso. Tente novamente. Enjoy!

Weverton Guedes :
outubro 02, 2009 7:41 PM

Cara! Muito obrigado!

Este widget é muito útil e bem prático.
Vou mantê-lo nos favoritos.

Abraços

Postar um comentário

Em Comentar como: selecione seu perfil (Nome/URL é o mais comum) e fique à vontade para fazer seu comentário. Critique, dê sugestões e, se for o caso, elogie!

Este blog, agora, é "dofollow", assim, os links nos COMENTÁRIOS estão livres de "nofollow"!
-----------------------------------------------------------------------------------
OBSERVAÇÕES IMPORTANTES | NOTIFICAÇÕES | AVISOS LEGAIS
-----------------------------------------------------------------------------------
1. Os comentários aqui exibidos refletem, exclusivamente, as opiniões isoladas dos visitantes do blog!
2. O Administrador deste blog não se responsabilizará, em hipótese nenhuma, por quaisquer danos que, por ventura, estes venham causar, a quem quer que seja!
3. Mensagens com SPAM ou que não tenham relação com o conteúdo do post não serão toleradas.
4. Para maiores detalhes, leia a POLÍTICA DE PRIVACIDADE e os TERMOS DE USO deste blog!

Obrigado!

Página inicial