25 de nov. de 2010

Menu horizontal com buscador e setas para deslizar o blog



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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicTMmjBLwOalx9x_Jkj5U1xiS4rZV2tEONYUbXOxbrr6vKjWujSUneM4I-9bUAXRCp96o5Ph6uKE3GMcLN4T9LZB9NsIri6Hc3a2K5TG32iVLvfiBaB0aa-FmNYwVo3lJ9n31s-56zDGQ/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5QItiDUeo8B_7ITdYEpC9mYT0Sc6OAIWpwTPTDFyJ1QdUeu4TZeoAsO_BwFFVSGKlbtdFUBaFx80W0A3fHP_DC-i-lW-M3slitg8aJiO8u-9Piu3SHW6uqHd2ReCoOb79E9L2ZnkRMYA/s1600/001_24.png) no-repeat center center;}
#nav a.footer span{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZlK0mqU2cGyuAwGq-wSqUhGJfFk9e6ntTKoy_CWUTXnQ0jEOlZvUImKl34g8vcpfAVPQVzGldKz0xRAPfoYnMlq3l-uSczKB68s8mRGweBqTmg4qIJ2tmmn290ESThKlV8gJPNdreL6k/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 == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' title='search' type='text' value='Procurar...'/>
<input alt='' id='proc' name='proc' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIu0xW_m9nX-kboxvN5PPDynfJji7CaMSnV2Kg8MOQo6EBnGzCXFS2dr7ll6iPB5W4nIYAtqQf665w-j43NLMvgPwT7udJpzcxd59PjpdPekXKlRnSGVR2BCzeNK5eTg1IBzjy0ajbb6g/s1600/zoom.png' type='image'/>
</form></span></li></ul></div>

6 comentários:

  1. O tem um problema o menu fica tampando uma parte do cabeçario:

    http://dicasestremas.blogspot.com/

    Vejá:

    http://www.brimg.info/uploads/3/d10539dd55.jpg

    ResponderExcluir
  2. eu coloco akele codigo da ]]> em baixo ou em cima ?

    ResponderExcluir
  3. Olá,
    Adorei 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

    ResponderExcluir
  4. 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.
    Parabéns

    http://reflitaja.blogspot.com/
    http://entrecronicasepoemas.blogspot.com/

    ResponderExcluir
  5. Como coloco esse menu abaixo do cabeçalho?

    me ajudem! edson.freitas9@hotmail.com

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube