Menu Personalizado Expansível no Blogger

Nesta postagem estarei mostrando para vocês este menu da qual muito gente já tem não no blogger, porém, alguns ainda tem a dúvida de como coloca-lo no blogger. Todos os créditos são para Video Aulas - Tutorial de Computer Tech.

Para coloca-lo no blogger é bem simples... Entre em "Modelo" - "Editar HTML", dê um Ctrl + F e procure pela tag

</head>

<head>

Tendo encontrado a tag, cole ABAIXO dela o seguinte código

<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>

Tendo feito isto, pode salvar e fechar a seção editar html.

Agora, entre em "Layout" - "Adiconar um gadget" - "HTML/JavaScript" e cole o seguinte código

<a href="javascript:void(0);" onclick="expandcollapse('favoritos1')"><img border="0" src="http://i49.tinypic.com/imkolf.png" /></a>

<ul id="favoritos1" class="texthidden">
<li>
<li><a href="http://www.blogger.com/LINK%20DO%20MARCADOR" target="_blank">NOME DO MARCADOR</a></li>
<li><a href="http://www.blogger.com/LINK%20DO%20MARCADOR" target="_blank">NOME DO MARCADOR</a></li>
<li><a href="http://www.blogger.com/LINK%20DO%20MARCADOR" target="_blank">NOME DO MARCADOR</a></li>
<li><a href="http://www.blogger.com/LINK%20DO%20MARCADOR" target="_blank">NOME DO MARCADOR</a></li>
</ul>


<a href="javascript:void(0);" onclick="expandcollapse('favoritos2')"><img border="0" src="http://i48.tinypic.com/30m2s7d.png" /></a>

<ul id="favoritos2" class="texthidden">
<li><a href="http://www.blogger.com/LINK%20DO%20MARCADOR" target="_blank">NOME DO MARCADOR</a></li>
<li><a href="http://www.blogger.com/LINK%20DO%20MARCADOR" target="_blank">NOME DO MARCADOR</a></li>
<li><a href="http://www.blogger.com/LINK%20DO%20MARCADOR" target="_blank">NOME DO MARCADOR</a></li>
<li><a href="http://www.blogger.com/LINK%20DO%20MARCADOR" target="_blank">NOME DO MARCADOR</a></li>
</ul>


<a href="javascript:void(0);" onclick="expandcollapse('favoritos3')"><img border="0" src="http://i46.tinypic.com/28lyiyb.png" /></a>

<ul id="favoritos3" class="texthidden">
<li><a href="http://www.blogger.com/LINK%20DO%20MARCADOR" target="_blank">NOME DO MARCADOR</a></li>
<li><a href="http://www.blogger.com/LINK%20DO%20MARCADOR" target="_blank">NOME DO MARCADOR</a></li>
<li><a href="http://www.blogger.com/LINK%20DO%20MARCADOR" target="_blank">NOME DO MARCADOR</a></li>
<li><a href="http://www.blogger.com/LINK%20DO%20MARCADOR" target="_blank">NOME DO MARCADOR</a></li>
</ul>


<a href="javascript:void(0);" onclick="expandcollapse('favoritos4')"><img border="0" src="http://i47.tinypic.com/eur57o.png" /></a>

<ul id="favoritos4" class="texthidden">
<li><a href="http://www.blogger.com/LINK%20DO%20MARCADOR" target="_blank">NOME DO MARCADOR</a></li>
<li><a href="http://www.blogger.com/LINK%20DO%20MARCADOR" target="_blank">NOME DO MARCADOR</a></li>
<li><a href="http://www.blogger.com/LINK%20DO%20MARCADOR" target="_blank">NOME DO MARCADOR</a></li>
<li><a href="http://www.blogger.com/LINK%20DO%20MARCADOR" target="_blank">NOME DO MARCADOR</a></li>
</ul>


<a href="javascript:void(0);" onclick="expandcollapse('favoritos5')"><img border="0" src="http://i49.tinypic.com/2880ffd.jpg" /></a>

<ul id="favoritos5" class="texthidden">
<li><a href="http://www.blogger.com/LINK%20DO%20MARCADOR" target="_blank">NOME DO MARCADOR</a></li>
<li><a href="http://www.blogger.com/LINK%20DO%20MARCADOR" target="_blank">NOME DO MARCADOR</a></li>
<li><a href="http://www.blogger.com/LINK%20DO%20MARCADOR" target="_blank">NOME DO MARCADOR</a></li>
<li><a href="http://www.blogger.com/LINK%20DO%20MARCADOR" target="_blank">NOME DO MARCADOR</a></li>
</ul>


<a href="javascript:void(0);" onclick="expandcollapse('favoritos6')"><img border="0" src="http://i50.tinypic.com/2vx0whz.png" /></a>

<ul id="favoritos6" class="texthidden">
<li><a href="http://www.blogger.com/LINK%20DO%20MARCADOR" target="_blank">NOME DO MARCADOR</a></li>
<li><a href="http://www.blogger.com/LINK%20DO%20MARCADOR" target="_blank">NOME DO MARCADOR</a></li>
<li><a href="http://www.blogger.com/LINK%20DO%20MARCADOR" target="_blank">NOME DO MARCADOR</a></li>
<li><a href="http://www.blogger.com/LINK%20DO%20MARCADOR" target="_blank">NOME DO MARCADOR</a></li>
</ul>


<a href="javascript:void(0);" onclick="expandcollapse('favoritos7')"><img border="0" src="http://i49.tinypic.com/70ccib.png" /></a>

<ul id="favoritos7" class="texthidden">
<li><a href="http://www.blogger.com/LINK%20DO%20MARCADOR" target="_blank">NOME DO MARCADOR</a></li>
<li><a href="http://www.blogger.com/LINK%20DO%20MARCADOR" target="_blank">NOME DO MARCADOR</a></li>
<li><a href="http://www.blogger.com/LINK%20DO%20MARCADOR" target="_blank">NOME DO MARCADOR</a></li>
<li><a href="http://www.blogger.com/LINK%20DO%20MARCADOR" target="_blank">NOME DO MARCADOR</a></li>
</ul>


<a href="javascript:void(0);" onclick="expandcollapse('favoritos8')"><img border="0" src="http://i45.tinypic.com/e9c1a1.png" /></a>

<ul id="favoritos8" class="texthidden">
<li><a href="http://www.blogger.com/LINK%20DO%20MARCADOR" target="_blank">NOME DO MARCADOR</a></li>
<li><a href="http://www.blogger.com/LINK%20DO%20MARCADOR" target="_blank">NOME DO MARCADOR</a></li>
<li><a href="http://www.blogger.com/LINK%20DO%20MARCADOR" target="_blank">NOME DO MARCADOR</a></li>
<li><a href="http://www.blogger.com/LINK%20DO%20MARCADOR" target="_blank">NOME DO MARCADOR</a></li>
</ul>

Faça as modificações no código.

Tendo feita as modificações no código, basta salvar e pronto!!!

Carregando atualizações...

Menu Personalizado Expansível no Blogger

DESTAQUES DO MÊS