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>
<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>
<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.
Ficaria, também, muito honrado com um COMENTÁRIO seu sobre este Post.
