Pesquisar

Mostrando postagens com marcador buscador. Mostrar todas as postagens
Mostrando postagens com marcador buscador. Mostrar todas as postagens

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. 


"Antes de iniciar as modificações no html de seu blog,
não se esqueça de ":
..."antes  começar salvar uma cópia de seu template,
 caso não dê certo, 
é só reinstalá-lo. 
Instale esse menu no template Simples.
Para instalá-lo vá até o HTML de seu blog e procure por:


]]></b:skin>


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




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

ou

<header>



Encontando-o cole ,  acima delefazendo as modificações necessárias,
o próximo código :

<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 g+'>g+</a></li>
  <li><a href='ENDEREÇO DO PINTEREST'>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:                                                      





Share:

Seguir por e-mail

Seguidores

Google+ Followers

arquivo

Google+ Badge

"Alô Negócios !!!…buscas populares"

Alô Negócios !!!…buscas populares