Saiba Como é feito:..."Menu horizontal com buscador e setas para deslizar o blog" | #blogdicasblogueiros ...bdb... blog dicas blogueiros

Saiba Como é feito:..."Menu horizontal com buscador e setas para deslizar o blog"

esta postagem, foi pesquisada em:
templateseacessorios.

... há tempos queria aprendê-la , e, aqui está:

"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 instalá-lo vá até o HTML de seu blog e procure por:


]]></b:skin>


... /\ ... encontrando o código ,
cole o código abaixo, acima dele (    ]]></b:skin>)     
...\/...





/*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:

<div id='header-wrapper'>

 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 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='http://3.bp.blogspot.com/_FXIne2ZDJII/TO75Wg730FI/AAAAAAAAEDw/N9DXDDBylwY/s1600/zoom.png' type='image'/>
</form></span></li></ul></div>

fonte/créditos:                                                      



Aqui neste espaço... Apenas divulgo e indico... Posts, notícias, dicas etc. com devidas fontes  e créditos:   


flo

http://blogdicasblogueiros.blogspot.com.br/

Nenhum comentário:

Postar um comentário

Mensagem do formulário de comentário: