Saiba Como se faz:..."Menu Horizontal com Abas para Blogger/Blogspot"
"A Simple Drop-Down Menu Using Jquery"
"The last two drop down menu tutorials on this blog use background images in the menu-tabs, and hence it is not so easy to customize them for your blogs. So here's a new widget code, in which you can easily change the colors of the menu so as to match with your blog."
Live demo can be seen here:
Demo1: ClubVista Blogger Template (In Green)
Demo2: JavaScript-Array (In Blue) (Widget author's blog)
To add a widget similar to these, follow these steps:
STEP1:
Log in to Blogger, go to "Layout" -> "Edit HTML"
STEP2:
Now find this code:
</head>and immediately BEFORE/ABOVE it, paste this code:
<!--jquery-DD-Menu-Starts-->Now before you save the template, make these changes in the code :
<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-->
To get the HTML color codes, you can refer to this image:
http://homepages.ulb.ac.be/~dgonze/INFO/htmlcolors.png
STEP3:
and go to "Layout" -> "Page Elements"
and click on "Add a Gadget", select it as "HTML/JavaScript" type
and finally paste this code in to the new widget:
<!--BODY-CODE-->And save the widget.
<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://bloggerstop.net">Blogger Help</a></li>
</ul>
traduzido
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" ...
1)Acesse o painel do Blogger (blogger.com)
2)Vá em "Layout"-->
"Editar HTML"
3)Procure pelo seguinte código :
</head>
(utilize
" Ctrl e F" ) :
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://bloggerstop.net">Blogger Help</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."
você está em:
-->
Nenhum comentário:
comente aqui: