Menu Horizontal com Abas para Blogger/Blogspot

Um menu  é uma lista de links que organiza e agrupa os principais links do blog de forma a ajuda o leitor a se orientar e encontrar o que procura. Neste menu é interessante concentrarmos links como os da home, contato, conteúdo mais discutidos ou vistos entre outros links. Além destes benefícios ele também da um ar de elegância ao Blog deixando mais atrativo e convidativo a novas visitas, vamos a instalação:

1)Acesse o painel do Blogger (blogger.com)
2)Vá em "Layout"->"Editar HTML"
3)Procure pelo seguinte código utilize "Ctrl e F":</head>Antes do código acima insira o próximo:<!--jquery-DD-Menu-Starts-->
<style type="text/css">
/* menu styles */
#jsddm
{ margin: 0;
padding: 0;}

#jsddm li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial;}

#jsddm li a
{ display: block;
background: #324143; /*DARK-GREEN*/
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap;}

#jsddm li a:hover
{ background: #24313C;}

#jsddm li ul
{ margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;}

#jsddm li ul li
{ float: none;
display: inline;}

#jsddm li ul li a
{ width: auto;
background: #A9C251; /*LIGHT-GREEN*/
color: #24313C;}

#jsddm li ul li a:hover
{ background: #8EA344;}
</style>


<!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}

function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}

$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open);
$('#jsddm > li').bind('mouseout', jsddm_timer);});

document.onclick = jsddm_close;
</script>
<!--jquery-DD-Menu-Stops-http://bloggerstop.net-->
4)Salve as alterações

Instalando no template

1)Vá agora em "Layout"->"Elementos da página"->"Adicionar um Gadget"->Selecione "HTML/JavaScript"
Como conteúdo insira o seguinte código alterando de acordo com a nota:<!--BODY-CODE-->
<ul id="jsddm">
<li><a href="#">JavaScript</a>
<ul>
<li><a href="#">Drop Down Menu</a></li>
<li><a href="#">jQuery Plugin</a></li>
<li><a href="#">Ajax Navigation</a></li>
</ul>
</li>
<li><a href="#">Effect</a>
<ul>
<li><a href="#">Slide Effect</a></li>
<li><a href="#">Fade Effect</a></li>
<li><a href="#">Opacity Mode</a></li>
<li><a href="#">Drop Shadow</a></li>
<li><a href="#">Semitransparent</a></li>
</ul>
</li>
<li><a href="#">Navigation</a></li>
<li><a href="#">HTML/CSS</a></li>
<li><a href="http://noticiaeblog.com/">Ajuda para Blogueiros</a></li>
</ul>
Nota:O símbolo "#" reference aos links, em azul são os títulos dos links que serão exibidos no menu horizontal, altere de acordo com link escolhido.
2)Salve as alterações e visualize.