Aprenda Como se faz:... "Menu Horizontal com Abas para Blogger/Blogspot" | #blogdicasblogueiros ...bdb... blog dicas blogueiros
2

Aprenda Como se faz:... "Menu Horizontal com Abas para Blogger/Blogspot"

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

Saiba Como se faz:...
"Menu Horizontal com Abas 
para 
Blogger/Blogspot"


 fonte e créditos

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"   ...             
..."    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."

Referência:Bloggerstop.net

" Update: (10/11/2010) Erros corrigidos."                                                                               



traduzido




tags: Blog, Blogger, CSS, Dicas, Gadget, HTML, Tutoriais








flo

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

2 comentários:

  1. CharlesNetto18 de março de 2012 às 11:45

    Obrigado por sua Valiosa dica minha amiga que sempre vem contribuir com os blogueiros!

    ResponderExcluir
  2. edilene6 de setembro de 2014 às 09:12

    obrigada, Charles, por sempre participar com seus valiosos comentarios!

    ResponderExcluir

Mensagem do formulário de comentário: