Menu com efeito hover nos botões, seta para subir e descer o blog e buscador. Para instala-lo vá até o Modelo e clique em "Editar HTML":
Procure por:
]]></b:skin>
E cole o código abaixo acima dele.
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Instale esse manu no template Simples.
/*Menu horizontal-----------------------------------*/
#nav{height:42px;border-bottom:1px solid #ddd;position:fixed;top:0px;left:0px;right:0px;background:#fff url(http://1.bp.blogspot.com/_BaCxSD9NFn8/TGIsV_8BGlI/AAAAAAAAB9k/GRL5MvDGjeY/s1600/nav.png) repeat-x center left;border-bottom: 1px dashed #cc0000;}
#nav ul{height:25px;list-style:none;margin:6px auto 0px auto;width:980px;}
#nav ul li{display:inline;float:left;margin:0 2px;}
#nav a{font-size:11px;font-weight:bold;float:left;padding: 3px 6px;color:#999;text-decoration: none;border:1px solid #ccc;cursor: pointer;background:transparent;height:18px;line-height:18px;}
#nav a:hover{background:#D9D9DA none;color: #fff;}
#nav a.top span, #nav a.footer span{float:left;width:16px;height:16px;}
#nav a.top span{background:transparent url(http://4.bp.blogspot.com/_BaCxSD9NFn8/TGIrY6X8fxI/AAAAAAAAB9c/k3x_mq8A79I/s1600/001_24.png) no-repeat center center;}
#nav a.footer span{background:transparent url(http://2.bp.blogspot.com/_BaCxSD9NFn8/TGIrXfqMxLI/AAAAAAAAB9U/lAGmfD1AWW4/s1600/001_22.png) no-repeat center center;}
#back {font-size:11px;font-weight:bold;background:#fff;border: 1px solid #ddd;float:left;color:#999;
height:14px;margin-right:8px;width:218px;padding:5px}
#proc {margin-top:3px;float:left;width:23px;height:19px}
Agora procure por:
<header>
E cole o próximo código acima dele fazendo as modificações necessárias.
<div id='nav'>
<ul>
<li><a class='top' href='#header'><span/></a></li>
<li><a class='footer' href='#footer'><span/></a></li>
<li><a href='#'>Home</a></li>
<li><a href='ENDEREÇO DO FACEBOOK'>Facebook</a></li>
<li><a href='ENDEREÇO DO TWITTER'>Twitter</a></li>
<li><a href='ENDEREÇO DO GOOGLE BUZZ'>Buzz</a></li>
<li><a href='ENDEREÇO DO BLOGBLOGS'>BlogBlogs</a></li>
<li><a href='ENDEREÇO DO FEED'>Feed</a></li>
<li class='search'>
<span>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='back' maxlength='255' name='back' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' title='search' type='text' value='Procurar...'/>
<input alt='' id='proc' name='proc' src='http://3.bp.blogspot.com/_FXIne2ZDJII/TO75Wg730FI/AAAAAAAAEDw/N9DXDDBylwY/s1600/zoom.png' type='image'/>
</form></span></li></ul></div>
O tem um problema o menu fica tampando uma parte do cabeçario:
ResponderExcluirhttp://dicasestremas.blogspot.com/
Vejá:
http://www.brimg.info/uploads/3/d10539dd55.jpg
será que tem solução?
ResponderExcluireu coloco akele codigo da ]]> em baixo ou em cima ?
ResponderExcluirOlá,
ResponderExcluirAdorei suas dicas, mas não consegui colocar no meu blog. Não sei se é por que eu uso o novo formato do blogger, mas enfim. eu não consigo achar o código <*** id='header-wrapper'> .
Então resolvi apenas adicionar paginas, que ficam com o aspecto parecido apesar de querer esse menu ai encima. Bom, seu blog é perfect,coloquei seu link no meu apesar de ser pequeno (comecei agora) acho que já é alguma coisa.
Bjos
Gostei deste menu, e nem precisei editar Na Raiz do blogger. Pelo aplicativo HTML/JavaScript deu certo, achei interessante que o menu toma a forma de cada um dos temas do Blogger, não tem aquele formato estático.
ResponderExcluirParabéns
http://reflitaja.blogspot.com/
http://entrecronicasepoemas.blogspot.com/
Como coloco esse menu abaixo do cabeçalho?
ResponderExcluirme ajudem! edson.freitas9@hotmail.com