Saiba Como se faz:..."Menu Horizontal com Abas para Blogger/Blogspot"
Autor: Edilene brandao da silva | Publicado: 2013-03-27T21:45:00-07:00


"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" -&gt; "Edit HTML"

STEP2:
Now find this code:


&lt;/head&gt;
and immediately BEFORE/ABOVE it, paste this code:

&lt;!--jquery-DD-Menu-Starts--&gt;
&lt;style type="text/css"&gt;
/* 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}
&lt;/style&gt;


&lt;!-- script 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" 
type="text/javascript"&gt;&lt;/script --&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
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 &gt; li').bind('mouseover', jsddm_open);
$('#jsddm &gt; li').bind('mouseout',  jsddm_timer);});

document.onclick = jsddm_close;
&lt;/script&gt;
&lt;!--jquery-DD-Menu-Stops-http://bloggerstop.net--&gt;
Now before you save the template, make these changes in the code :


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" -&gt; "Page Elements"
and click on "Add a Gadget", select it as "HTML/JavaScript" type

and finally paste this code in to the new widget:

&lt;!--BODY-CODE--&gt;
&lt;ul id="jsddm"&gt;
&lt;li&gt;&lt;a href="#"&gt;JavaScript&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;Drop Down Menu&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;jQuery Plugin&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Ajax Navigation&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Effect&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;Slide Effect&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Fade Effect&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Opacity Mode&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Drop Shadow&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Semitransparent&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Navigation&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;HTML/CSS&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://bloggerstop.net"&gt;Blogger Help&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
And save the widget.



&nbsp;traduzido&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 




Saiba Como se faz:...

"Menu Horizontal com Abas&nbsp;

para&nbsp;

Blogger/Blogspot"



&nbsp;fonte e créditos:

noticiaeblog

 Menu Horizontal&nbsp;

com Abas para&nbsp;

Blogger/Blogspot 


&nbsp;  












" Um menu&nbsp; é&nbsp;
uma lista de links &nbsp;
que organiza&nbsp;
e&nbsp;
agrupa&nbsp;
os principais links do blog&nbsp;  ...


...de forma a&nbsp;
ajuda o leitor&nbsp;
a se orientar&nbsp;
e&nbsp;
encontrar&nbsp;
o que procura.&nbsp;


"&nbsp; Neste menu&nbsp;
é interessante&nbsp;




concentrarmos&nbsp;




links&nbsp;




como os da &nbsp;




home, &nbsp;




contato,&nbsp;




&nbsp;conteúdo&nbsp;





&nbsp;mais discutidos 




ou vistos 




entre outros links. &nbsp;




Além destes  benefícios&nbsp;
ele também da um&nbsp;
ar de elegância ao Blog&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 




deixando mais  atrativo e convidativo a novas visitas"&nbsp;&nbsp; ... &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; 


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ..." a instalação "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;


1)Acesse o painel do Blogger (blogger.com)&nbsp;
2)Vá em "Layout"--&gt;
&nbsp;&nbsp; "Editar HTML"&nbsp;
3)Procure pelo seguinte código&nbsp; :
&nbsp;&lt;/head&gt;
(utilize

 " Ctrl e F"&nbsp; ) :&nbsp;





Antes do código acima insira o próximo:  



&lt;!--jquery-DD-Menu-Starts--&gt;
&lt;style type="text/css"&gt;
/* 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}
&lt;/style&gt;


&lt;!-- script 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" 
type="text/javascript"&gt;&lt;/script --&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
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 &gt; li').bind('mouseover', jsddm_open);
$('#jsddm &gt; li').bind('mouseout',  jsddm_timer);});

document.onclick = jsddm_close;
&lt;/script&gt;
&lt;!--jquery-DD-Menu-Stops-http://bloggerstop.net--&gt;


4)Salve as alterações



Instalando no template
1)Vá agora em "Layout"&nbsp;&nbsp;&nbsp;
-&gt;"&nbsp;&nbsp;&nbsp;&nbsp;
Elementos da página"&nbsp;&nbsp;&nbsp;&nbsp;
-&gt;"&nbsp;&nbsp;
"Adicionar um Gadget"&nbsp;&nbsp;&nbsp;
-&gt;
"Selecione "&nbsp;&nbsp;&nbsp;
HTML/JavaScript"
&nbsp;



" Como conteúdo &nbsp;



insira 


o seguinte código 


alterando 


de acordo com a nota"


&lt;!--BODY-CODE--&gt;
&lt;ul id="jsddm"&gt;
&lt;li&gt;&lt;a href="#"&gt;JavaScript&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;Drop Down Menu&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;jQuery Plugin&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Ajax Navigation&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Effect&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;Slide Effect&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Fade Effect&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Opacity Mode&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Drop Shadow&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Semitransparent&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Navigation&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;HTML/CSS&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://bloggerstop.net"&gt;Blogger Help&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&nbsp;
 


Nota:

" O símbolo "#"&nbsp; &nbsp;&nbsp; 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."

&nbsp;


Referência:Bloggerstop.net

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










você está em:

http://vivascraps.blogspot.com 
<!--
google_ad_client = "pub-3296052210640376";
/* 300x250, criado 25/12/10 */
google_ad_slot = "2663748088";
google_ad_width = 300;
google_ad_height = 250;
//

--&amp;gt;