Postagens Recentes
Mostrando postagens com marcador Menu vertical. Mostrar todas as postagens
Mostrando postagens com marcador Menu vertical. Mostrar todas as postagens

18 de abr. de 2012

Menu com botões sociais flutuante na lateral do Blogger

16 comentários:
Depois de muito procurar por este menu para compartilhar seu blog e postagens nas principais redes sociais como Twitter, Facebook e Google Plus, acabei encontrando o código certo e mais fácil de instalar no blog Internovinet. Esse é colocado no HTML/Javascript. Facinho demais.


  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011
Vá até Layout

Clique em Adicionar um Gadget




Ao abrir, clique em  HTML/Javascript


Cole então o código abaixo e salve.
(se quiser que flutue a esquerda, troque o código que está em vermelho pela palavra left)




<!-- Começo código -->
<style type='text/css'>
.dvin{
     border-style:solid;
      border-width: 3px;
     border-color:#e3e3e3;
     padding-top:10px;
     padding-bottom:50px;
     padding-right:2px;
     padding-left:2px;
     border-radius: 6px;
     -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
 }
  .plus {
     text-align: center;  
     margin-top: 5px;
     margin-left: 1px;
 }
 .tweet {
      text-align: center;
      margin-top: 3px;
 }
 .face {
      text-align: center;
      margin-top: 4px;
 }
</style>

<div style='position: fixed; top: 40%; right: 3px'>
<div class='dvin'>
<!-- Google +1 -->
<div class='plus'>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'>{lang: 'pt-BR'};}</script>
<g:plusone size='tall'/>
</g:plusone>
</div>
<!-- Tweet -->  
<div class='tweet'>
 <a class='twitter-share-button' data-count='vertical' data-via='Internovinet' href='http://twitter.com/share' rel='nofollow'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
</div>
<!-- Facebook -->
<div class='face'>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'></script>
</div>
</div>
</div>



29 de jul. de 2010

Menu vertical com imagens fixas na lateral do blog

4 comentários:
Nem sei se já havia dado essa dica, mas aí está. O menu vertical com imagens. Copie e cole no HTML/Javascript em seu blog, faça as modificações e pronto.

ATENÇÃO O  código na cor vermelha deverá ser trocado pelo número de seu código para a página de favoritos que você deverá fazer em Add This Social Bookmaker Note que o número deverá ser os últimos que constam na barra de endereços.Para conseguir clique AQUI e entre no site. Proceda da seguinte forma:



Clique no ícone com o lado direito do mouse, ao abrir a página clique em "Abrir em nova janela"



Ao abrir, copie o código e cole na parte que está na cor vermelha do código abaixo.















<a class="icomenu" href="ENDEREÇO DO GOOGLE BUZZ" style="position: fixed; left: 2px; top: 80px;" target="_blank">
<img border="0" heigth="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS2BiVhfxRjLY0UY8W8p1qJ6OyZHC0rESLUlEsimA9gJHPn9Y5o6FLtGUmOQnL0bEsziO2RS1KVR6UVJ7M-fTKSwxPW2jHNdH3WOyY35N6ljU8xDwdQmm_aPgEo9bob5CLMQP0iFmClNE/s1600/icontexto-webdev-google-buzz.png" title="Google Buzz" width="48" /></a>

<a class="icomenu" href="ENDEREÇO DO TECHNORATY" style="position: fixed; left: 2px; top: 130px;" target="_blank">
<img border="0" heigth="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOSi-DyqiRJH5DawmfMM_W7yCYE7gFj_mpyVW_dkDLnmlI_-zvsn4e9DosQ65P7_zN1xROLL_s7n-oFYbnK8uZjcJZ4kGA38vQVmIOgYUXFZNEhHNCJI9HcLpTGNoSTwoiH8m6voCPpPM/s1600/icontexto-webdev-social-bookmark-06-048x048.png" title="Technoraty" width="48" /></a>

<a class="icomenu" href="ENDEREÇO DO BLOGBLOGS" style="position: fixed; left: 2px; top: 180px;" target="_blank">
<img border="0" heigth="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSpnzyRfOVCcRuehmGV9Pj6yH4VZmIHY5yQo_oT33hFaXCLpt6FAX30R7j53o6i3AnHjTsxrkllaIkxJ3xmDjxJr2NJdjN6vOOpvAmTThEjww3IwIbTrJqxIrppYMORePH6VGnT7toquc/s1600/icontexto-webdev-social-bookmark-blogblogs.png" title="BlogBlogs" width="48" /></a>

<a class="icomenu" href="http://twitter.com/elkedibarros" style="position: fixed; left: 2px; top: 230px;" target="_blank">
<img border="0" heigth="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYY4xQ8FzcT2GUQYhc3Rf45dGnaoHQxyOVmFioYgp7-PjPIMoXxeUv_sIhcbvR246xJPL0gYm8jcDA66HEYBfpyDJf176YnYb7xSaaUHTxM1Bz25IVBcNEmnpNkx1UY3QFpiP-n6zVClk/s1600/icontexto-twitter-54x54.png" title="Siga-me" width="48" /></a>

<a class="icomenu" href="ENDEREÇO DO FEED" style="position: fixed; left: 2px; top: 280px;" target="_blank">
<img border="0" heigth="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL2tHhT26v3Mdey5sFoAXVdIko5mzKIVfsYgYQmPgNKN5dcybrU0ZmVl5AE_e0_Z6LmDwzQ4zUV8iTVwJRb04XPdwp1ZjoB4Dn28kJ4Eme0JCvFGwCO3k4PlflCX1teC4Rr46jvHBxzsc/s1600/icontexto-webdev-rss-feed-048x048.png" title="Feed" width="48" /></a>

<div class="icomenu"><a class="icomenu" href="http://www.addthis.com/bookmark.php?v=250&amp;username=xa-4be07cd1551d2068" style="position: fixed; left: 2px; top: 330px;" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTGQx-FXXeedutjWqpCfoOoqJgXArGmissIa9VudlR6pJMDSEB4BVnOnn4Tq6BL-v10kFykE6xh_MbXIUFSH1P69pK6IxWN7ybPBT787hLLVWw52Nu9KCLdsvMIfLB5c_KPfRKHoNgHC0/s1600/icontexto-webdev-favorites-048x048.png" />
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4be07cd1551d2068"></script></a></div>

<a class="icomenu" href="mailto:SEUEMAIL@gmail.com" style="position: fixed; left: 2px; top: 380px;" target="_blank">
<img border="0" heigth="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmlOwfWLoniwIzLiWznScQl7ARMhNjV6fD5XIthW1vwSp8_0vKp4s_lrXWkiffE2bqVWY_9Og3snqY8ComY2jtdJNBVCv3-mf4Mv8v3F3NdeWflCy8bX60at7yFm7n5MQFv-Tw8g4u6AQ/s1600/icontexto-webdev-contact-048x048.png" title="Email" width="48" /></a>

18 de mai. de 2010

Menu deslizante com efeito

4 comentários:
Que tal um menu com efeito deslizante de fácil instalação ? Gostou da idéia ?


 Basta copiar o código e colar no HTML/Javascript que fica em Elementos de página


De preferência hospede os scripts no Google Sites.

phototype.js
effects.js
sidebar.js




<script src="http://sites.google.com/site/menudeslizante/menudeslizante/prototype.js" type="text/javascript"></script>
<script src="http://sites.google.com/site/menudeslizante/menudeslizante/effects.js" type="text/javascript"></script>
<script src="http://sites.google.com/site/menudeslizante/menudeslizante/side-bar.js" type="text/javascript"></script>

<style>
body{font-size:75%;}
a{outline: none;}
a:active{outline: none;}
#sideBar{text-align:left; padding: 4px 0 4px 6px; border: 1px solid #fff;}
#sideBar h2{
padding: 4px 0 4px 6px;
color:#FFFFFF;
font-size:110%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold !important;
}
#sideBar h2 span{
color:#000; text-shadow:-2px -2px 3px #808080;
padding: 4px 0 4px 6px;
font-size:165%;
font-weight:normal !important;
}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#sideBar li{
margin:0 10px 3px 3px;
padding:2px;
list-style-type:none;
display:block;
background-color:#808080;
border: 3px groove #ccc;
width:177px;
color:#FFFFFF;
text-shadow: 2px 3px 4px #000;
}
#sideBar li a:hover{
width:160px;
color: #000;
background-color:#ccc;
border: 3px ridge #ccc;
text-shadow: 2px 3px 4px #000;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding: 6px 0 6px 14px;}
#sideBar{
position: fixed;
width: auto;
height: auto;
top: 100px;
left:0px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC4AOMa6_zTgSk-quwPNhYe7N0yqW93dpXGyWzlFTnftk59wp_uysFW4zUrB2VxwneW0kHBufdtPFd_7ESvg0R5iH8TD0Bk9gtFYfQlcoDdxtQlUDTj3zSw8seeIXzqA-SSavICoQWU3s/s1600/cin.png') repeat;background-position:top right;}
#sideBarTab{background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC4AOMa6_zTgSk-quwPNhYe7N0yqW93dpXGyWzlFTnftk59wp_uysFW4zUrB2VxwneW0kHBufdtPFd_7ESvg0R5iH8TD0Bk9gtFYfQlcoDdxtQlUDTj3zSw8seeIXzqA-SSavICoQWU3s/s1600/cin.png') repeat;
float:left;
height:137px;
width:28px;
}
#sideBarTab img{border:none;}
#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:360px;
}
#sideBarContentsInner{width:200px;}
</style>

<div id="sideBar">
<div id="sideBarContents" style="display:none;">
<div id="sideBarContentsInner">
<h2><span>Menu</span></h2>
<ul>
<li><a href="ENDEREÇO DO LINK 1">Link Um</a></li>
<li><a href="ENDEREÇO DO LINK 2">Link Dois</a></li>
<li><a href="ENDEREÇO DO LINK 3">Link Tres</a></li>
<li><a href="ENDEREÇO DO LINK 4">Link Quatro</a></li>
<li><a href="ENDEREÇO DO LINK 5">Link Cinco</a></li>
<li><a href="ENDEREÇO DO LINK 6">Link Seis</a></li>
<li><a href="ENDEREÇO DO LINK 7">Link Sete</a></li>
</ul>
</div>
</div>
<a id="sideBarTab" href="#">
<img alt="sideBar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiR7CuhVfU9EZHmaCX6qPjznaA89z8DxeVMxRM-avG_w6yj1g6GHQ3s5677Mx1SEaaE3Pl35cHpDZCRqjZeDKZlOio8GQ5e-uaKzg9EAenUNVWm2PVUPGPhlK8GyX4uSDlLBpJZwdJKKY/s1600/menu.png" title="sideBar" /></a>
</div>


Veja o original AQUI e outro modelo AQUI

10 de set. de 2009

Menus em flash com efeitos

Um comentário:
No blog do Marçon, encontrei este menu, e como a curiosidade é tamanha, cliquei no link e fui parar no site Flash Vortex que disponibiliza vários modelos de menu horizontal, menu vertical, relógios, botões e banners. Todos com efeitos de imagens e alguns até com efeito sonoro.





9 de out. de 2008

Menu accordion

17 comentários:
Encontrei este menu no blog Link Duzão. Fiz algumas alterações pois havia alguns intens sobrando (eu acho, rsrrsrs).







A primeira coisa a fazer é ir até o HTML do seu blog, procure pelo código:

<HEAD>

*Números em veremelho representam as cores do menu. Troque-as se quiser.

Agora cole todo código abaixo DEPOIS dele.



<script type="text/javascript" src="http://rosduz.googlepages.com/jquery-1.2.2.pack.js"></script>
<script type="text/javascript" src="http://rosduz.googlepages.com/ddaccordion.js">
</script>
<style type="text/css">
.mypets{ /*header of 1st demo*/
cursor: hand;
cursor: pointer;
padding: 2px 5px;
border: 1px solid gray;
background: #E1E1E1;
}
.openpet{ /*class added to contents of 1st demo when they are open*/
background: #000000;
}
.technology{ /*header of 2nd demo*/
cursor: hand;
cursor: pointer;
font: bold 14px Verdana;
margin: 10px 0;
}
.openlanguage{ /*class added to contents of 2nd demo when they are open*/
color: green;
}
.closedlanguage{ /*class added to contents of 2nd demo when they are closed*/
color: red;
}
</style>
<script type="text/javascript">
//Initialize first demo:
ddaccordion.init({
headerclass: "mypets", //Shared CSS class name of headers group
contentclass: "thepet", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover"
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "openpet"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
//Initialize 2nd demo:
ddaccordion.init({
headerclass: "technology", //Shared CSS class name of headers group
contentclass: "thelanguage", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover"
collapseprev: false, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: false, //persist state of opened contents within browser session?
toggleclass: ["closedlanguage", "openlanguage"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["prefix", "<img src='http://i13.tinypic.com/80mxwlz.gif' /> ", "<img src='http://i18.tinypic.com/6tpc4td.gif' /> "], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})

</script>



Agora copie este segundo código e cole no HTML/Javascript em seu blog. Faça as modificações necessárias e salve. Você poderá colocar textos, códigos e imagens dentro deste menu.





<h3 class="mypets">LINK 1</h3>
<div class="thepet">

AQUI DENTRO O QUE QUISER
</div>

<h3 class="mypets">LINK 2</h3>
<div class="thepet">
AQUI DENTRO O QUE QUISER
</div>

<h3 class="mypets">LINK 3s</h3>
<div class="thepet">
AQUI DENTRO O QUE QUISER
</div>

<h3 class="mypets">LINK 4s</h3>
<div class="thepet">
AQUI DENTRO O QUE QUISER
</div>

<h3 class="mypets">LINK 5s</h3>
<div class="thepet">
AQUI DENTRO O QUE QUISER
</div>

<h3 class="mypets">LINK 6s</h3>
<div class="thepet">
AQUI DENTRO O QUE QUISER
</div>

<h3 class="mypets">LINK 7s</h3>
<div class="thepet">
AQUI DENTRO O QUE QUISER
</div>

21 de jul. de 2008

Menu com imagens

2 comentários:



Para quem quer ter um menu como este acima ou este exemplo que é o dos meus feeds (esta caneca ao lado na coluna) copie o código abaixo. Vá até "Elementos de página", clique em "Adicionar um novo elemento de página" e depois em "HTML/Javascript" e cole o código. Coloque seus links no local indicado e salve





<script type="text/javascript">
function showDiv(objectID) {
var theElementStyle = document.getElementById(objectID);
if(theElementStyle.style.display == "block"){
theElementStyle.style.display = "none";
}else{
theElementStyle.style.display = "block";}
}
</script>
<style type="text/css">
#TW-feed, #TW-feed ul {list-style:none; margin:0px; padding:0px}
#TW-feed li ul {display:none;position:absolute;background-color:#ffffff;padding:3px;border:1px solid #cccccc;}
#TW-feed li {font-weight:bold; color:#EC8132;}
#TW-feed ul li {padding-bottom:3px;}
</style>
<div onmouseover="showDiv('TW-Pop');return false;" onmouseout="showDiv('TW-Pop');return false;">
<ul id="TW-feed">
<li> <img border="0" src="AQUI O ENDEREÇO DA IMAGEM QUE VAI APARECER"/>
<ul id="TW-Pop">

<li><a href="AQUI O ENDEREÇO DO LINK" rel="alternate" title="ESCREVA AQUI O QUE QUISER"><img alt="ESCREVA AQUI O QUE QUISER" src="ENDEREÇO DA IMAGEM QUE VAI APARECER DENTRO DO MENU"/></a>
</li>

<li><a href="AQUI O ENDEREÇO DO LINK" rel="alternate" title="ESCREVA AQUI O QUE QUISER"><img alt="ESCREVA AQUI O QUE QUISER" src="ENDEREÇO DA IMAGEM QUE VAI APARECER DENTRO DO MENU"/></a>
</li>


<li><a href="AQUI O ENDEREÇO DO LINK" rel="alternate" title="ESCREVA AQUI O QUE QUISER"><img alt="ESCREVA AQUI O QUE QUISER" src="ENDEREÇO DA IMAGEM QUE VAI APARECER DENTRO DO MENU"/></a>
</li>

<li><a href="AQUI O ENDEREÇO DO LINK" rel="alternate" title="ESCREVA AQUI O QUE QUISER"><img alt="ESCREVA AQUI O QUE QUISER" src="ENDEREÇO DA IMAGEM QUE VAI APARECER DENTRO DO MENU"/></a>
</li>

<li><a href="AQUI O ENDEREÇO DO LINK" rel="alternate" title="ESCREVA AQUI O QUE QUISER"><img alt="ESCREVA AQUI O QUE QUISER" src="ENDEREÇO DA IMAGEM QUE VAI APARECER DENTRO DO MENU"/></a>
</li>

<li><a href="AQUI O ENDEREÇO DO LINK" rel="alternate" title="ESCREVA AQUI O QUE QUISER"><img alt="ESCREVA AQUI O QUE QUISER" src="ENDEREÇO DA IMAGEM QUE VAI APARECER DENTRO DO MENU"/></a>
</li>

<li><a href="AQUI O ENDEREÇO DO LINK" rel="alternate" title="ESCREVA AQUI O QUE QUISER"><img alt="ESCREVA AQUI O QUE QUISER" src="ENDEREÇO DA IMAGEM QUE VAI APARECER DENTRO DO MENU"/></a>
</li>

<li><a href="AQUI O ENDEREÇO DO LINK" rel="alternate" title="ESCREVA AQUI O QUE QUISER"><img alt="ESCREVA AQUI O QUE QUISER" src="ENDEREÇO DA IMAGEM QUE VAI APARECER DENTRO DO MENU"/></a>
</li>

<li><a href="AQUI O ENDEREÇO DO LINK" rel="alternate" title="ESCREVA AQUI O QUE QUISER"><img alt="ESCREVA AQUI O QUE QUISER" src="ENDEREÇO DA IMAGEM QUE VAI APARECER DENTRO DO MENU"/></a>
</li>

<li><a href="AQUI O ENDEREÇO DO LINK" rel="alternate" title="ESCREVA AQUI O QUE QUISER"><img alt="ESCREVA AQUI O QUE QUISER" src="ENDEREÇO DA IMAGEM QUE VAI APARECER DENTRO DO MENU"/></a>
</li>
</ul></li></ul></div>





Créditos: RSS Buttom Makker

18 de jun. de 2008

Menu vertical com efeito

18 comentários:
Para ter um menu como esse, copie o primeiro código, vá até o HTML de seu blog e procure pelo código:

]]></b:skin>

Cole então acima o código.



Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.









#navcontainer
{
background: #E4E0E0;
width: 200px;
margin: 0 auto;
padding: 1em 0;
font-family: georgia, serif;
font-size: 13px;
text-align: center;
text-transform: lowercase;
}
ul#navlist
{
text-align: left;
list-style: none;
padding: 0;
margin: 0 auto;
width: 90%;
}
ul#navlist li
{
display: block;
margin: 0;
padding: 0;
}
ul#navlist li a
{
display: block;
width: 190px;
padding: 0.5em 0 0.5em 2em;
border-width: 1px;
border-color: #fff #808080 #ccc #fff;
border-style: solid;
color: #808080;
text-decoration: none;
background: #cccccc;
}
#navcontainer>ul#navlist li a { width: auto; }
ul#navlist li#active a
{
background: #808080;
color: #000000;
}
ul#navlist li a:hover, ul#navlist li#active a:hover
{
color: #FA8856;
background: transparent;
border-color: #000000 #fff #fff #ccc;
}




* O que está em vermelho são as cores do menu. Troque se quiser.

Agora vá até elementos de página, clique em "Adicionar um nove elemento de página" e agora em HTML/Javascript. Cole o código abaixo colocando seus links.



<div id="navcontainer">
<ul id="navlist">
<li id="active"><a id="current" href="ENDEREÇO DO LINK 1">LINK 1</a></li>
<li><a href="ENDEREÇO DO LINK 2">LINK 2</a></li>
<li><a href="ENDEREÇO DO LINK 3">LINK 3</a></li>
<li><a href="ENDEREÇO DO LINK 4">LINK 4</a></li>
<li><a href="ENDEREÇO DO LINK 5">LINK 5</a></li>
</ul>
</div>




Créditos: Listamatic

20 de abr. de 2008

Menu embutido no blog

Um comentário:
*Este menu só funciona no Internet Explorer.




Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.




Para ter um menu como este vá até o HTML do seu blog e cole o código abaixo do código <head>




<script language='JavaScript1.2'>
function move(x) {
if (document.all) {
object1.style.pixelLeft += x;
object1.style.visibility = &quot;visible&quot;}
else if (document.layers) {
document.object1.left += x;
document.object1.visibility = &quot;show&quot;}};


function makeStatic() {
if (document.all) {object1.style.pixelTop=document.body.scrollTop+20}
else {eval(document.object1.top=eval(window.pageYOffset+20));}
setTimeout(&quot;makeStatic()&quot;,0);}
</script>
<style>
.hl {Background-Color : ffffff; Cursor:hand;}
.n {Cursor:hand;}
</style>






Agora copie o segundo código, clique em "Elementos da página", "Adicionar um elemento de página", e agora em HTML/Javascript e cole o código aí. Modifique as cores de seu menu mudando os códigos que estão em vermelho. Coloque os links desejados e salve.




<p align="center">
<script language="JavaScript1.2">
function positionmenu(){
move(-132)}
if (document.all) {document.write('<div id="object1" style="visibility:hidden;cursor:hand; Position : Absolute ;Left : 0px ;Top : 20px ;Z-Index : 20" onmouseover="move(132)" onmouseout="move(-132)">')}
</script>
</p>
<table border="0" cellpadding="0" cellspacing="1" width="150" bgcolor="#BEA1CC">
<tr><td bgcolor="#F5EEF8"> <font face="Tahoma" size="3"><b>Menu</b></font></td>
<script language="JavaScript1.2">
document.write('<td rowspan="100" width="16" bgcolor="#F5EEF8" align="center"><span style="gt;<p align="center"><font face="Tahoma"><br>M<br>E<br>N<br>U</font></p></span></td>')
</script>
</tr>
<script language="JavaScript1.2">
if (document.alldocument.layers) {
makeStatic();}
var text=new Array();
var thelink=new Array();
//configure thelinks below. Extend as desired


text[0]="Link 1";
text[1]="Link 2";
text[2]="Link 3";
text[3]="Link 4";
text[4]="Link 5";
text[5]="Link 6";
text[6]="Link 7";
text[7]="Link 8";
text[8]="Link 9";
text[9]="Link 10";



thelink[0]="AQUI O ENDEREÇO DO LINK 1";
thelink[1]="AQUI O ENDEREÇO DO LINK 2";
thelink[2]="AQUI O ENDEREÇO DO LINK 3";
thelink[3]="AQUI O ENDEREÇO DO LINK 4";
thelink[4]="AQUI O ENDEREÇO DO LINK 5";
thelink[5]="AQUI O ENDEREÇO DO LINK 6";
thelink[6]="AQUI O ENDEREÇO DO LINK 7";
thelink[7]="AQUI O ENDEREÇO DO LINK 8";
thelink[8]="AQUI O ENDEREÇO DO LINK 9";
thelink[9]="AQUI O ENDEREÇO DO LINK 10";



//enter target of above links
//Valid values are '', 'new', or 'framename' (where 'framename' is the name of the frame you wish the links to target)
var linktarget=''
///NAO MUDE NADA ABAIXO////////////////
function navigateie(which){
if (linktarget=='')
window.location=thelink[which]
else if (linktarget=='new')
window.open(thelink[which])
else{
temp_var=eval("window.parent."+linktarget)
temp_var.location=thelink[which]}}
for (i=0;i<=text.length-1;i++)
if (document.all) {document.write('<tr><td onmouseover="className=\'hl\'" onmouseout="className=\'n\'" height="20" bgcolor="white" onclick="navigateie('+i+')"><font face="Tahoma" size="2"> '+text[i]+'</font></td></tr>')}
else {document.write('<tr><td bgcolor="white"><ilayer><layer onmouseover="this.bgColor=\'yellow\'" width="131" onmouseout="this.bgColor=\'white\'" height="18"><font face="Tahoma" size="2"> <a id="nounderline" href="'+thelink[i]+'" target="'+linktarget+'">'+text[i]+'</a></font></layer></ilayer></td></tr>')}
</script>
</table>
<script language="JavaScript1.2">
if (document.all) {document.write('</div>')}
window.onload=positionmenu
</script>

18 de abr. de 2008

Menu com imagens

Nenhum comentário:
Quer um destes ? Pegue o código, cole-o em HTML/Javascript e faça as mudanças onde é pedido.







<form name="dynamicselector">
<table border="0" width="35%" cellspacing="10" cellpadding="10" height="178">
<tr>
<td valign="top" width="35%" align="left">
<select onchange="generateimage(this.options[this.selectedIndex].value)" name="dynamicselector2" >
<option value="AQUI O ENDEREÇO DE SUA IMAGEM 0"/>NOME 0
<option value="AQUI O ENDEREÇO DE SUA IMAGEM 1"/>NOME 1
<option value="AQUI O ENDEREÇO DE SUA IMAGEM 2"/>NOME 2
<option value="AQUI O ENDEREÇO DE SUA IMAGEM 3"/>NOME 3
<option value="AQUI O ENDEREÇO DE SUA IMAGEM 4"/>NOME 4
<option value="AQUI O ENDEREÇO DE SUA IMAGEM 5"/>NOME 5
<option value="AQUI O ENDEREÇO DE SUA IMAGEM 6"/>NOME 6
<option value="AQUI O ENDEREÇO DE SUA IMAGEM 7"/>NOME 7
<option value="AQUI O ENDEREÇO DE SUA IMAGEM 8"/>NOME 8
</select>
</td>
<td valign="up" width="65%" align="left"><ilayer id="dynamic1" width="100%" height="78"><layer id="dynamic2" width="100%" height="78"><div id="dynamic3"></div></layer></ilayer></td>
</tr>
</table>
</form>
<script>
//DESCRIÇÃO DAS FOTOS ABAIXO ("" for blank)
var description=new Array()
description[0]="NOME 0"
description[1]="NOME 1"
description[2]="NOME 2"
description[3]="NOME 3"
description[4]="NOME 4"
description[5]="NOME 5"
description[6]="NOME 6"
description[7]="NOME 7"
description[8]="NOME 8"
var ie4=document.all
var ns6=document.getElementById
var tempobj=document.dynamicselector.dynamicselector2
if (ie4ns6)
var contentobj=document.getElementById? document.getElementById("dynamic3"): document.all.dynamic3
function generateimage(which){
if (ie4ns6){
contentobj.innerHTML='<center>carregando imagem...</center>'
contentobj.innerHTML='<center><img src="'+which+'"><br><br>'+description[tempobj.options.selectedIndex]+'</center>'
}
else if (document.layers){
document.dynamic1.document.dynamic2.document.write('<center><img src="'+which+'"><br><br>'+description[tempobj.options.selectedIndex]+'</center>')
document.dynamic1.document.dynamic2.document.close()
}
else
alert('You need NS 4+ or IE 4+ to view the images!')
}
function generatedefault(){
generateimage(tempobj.options[tempobj.options.selectedIndex].value)
}
if (ie4ns6document.layers){
if (tempobj.options.selectedIndex!=-1){
if (ns6)
generatedefault()
else
window.onload=generatedefault
}
}
</script>


    1 de mar. de 2008

    Menu vertical com tabela descritiva

    Nenhum comentário:
    Passe o mouse sobre o menu para que apareça a tabela descritiva.


    Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.



    Clique em Layout, depois em "Editar HTML". Procure pelo código:


    ]]></b:skin>

    E cole o código que está abaixo sobre (acima) ele.

    Atencão: Onde está em vermelho representa as cores do menu, basta troca-las por outra cor.

    Passe o mouse









    .ul#menutt {
    width: 160px;
    list-style:none;
    font: bold 16px Arial, Verdana, Serif;
    }
    ul#menutt li{
    position:relative;
    }
    ul#menutt a {
    width: 160px;
    display: block;
    text-align:left;
    padding: 5px 10px;
    margin-bottom:1px;
    text-decoration: none;
    color: #000;
    background: #E1CAF0;
    border-left: 15px solid #C28EE0;
    border-right: 4px solid #C28EE0;
    voice-family: "\"}\"";
    voice-family:inherit;
    width:125px;
    }
    >#pagebody>ul#menutt a {
    width:125px;
    }
    /* Fix IE. Hide from IE Mac \*/
    * html ul#menutt li { float: left; height: 1%; }
    * html ul#menutt li a { height: 1%; }
    /* End */
    ul#menutt a:hover {
    color: #fff;
    background: #EDE1ED;
    border-right: 4px solid #CDAFCD;
    border-left: 15px solid #CDAFCD;
    }
    ul#menutt a span {
    display: none;
    }
    ul#menutt a:hover span {
    display: block;
    position: absolute;
    top:0;
    left: 160px;
    width: 130px;
    padding: 30px;
    margin-left:8px;
    color: #fff;
    background:#EDE1ED;
    font-size: 10px;
    text-align:left;
    border:1px solid #000;
    }






    Agora clique em "Elementos da página", agora clique em "Adicionar elemento de página" e depois em "HTML/Javascript e cole na tabela que abriu o código abaixo colocando seus links. Salve.














    <ul id="menutt">
    <li>
    <a href="ENDEREÇO DO SEU LINK 1">LINK 1
    <span>
    ESCREVA AQUI O QUE QUISER SOBRE O LINK 1
    </span>
    </a>
    </li>


    <li>
    <a href="ENDEREÇO DO SEU LINK 2">LINK 2
    <span>
    ESCREVA AQUI O QUE QUISER SOBRE O LINK 2
    </span>
    </a>
    </li>


    <li>
    <a href="ENDEREÇO DO SEU LINK 3">LINK 3
    <span>
    ESCREVA AQUI O QUE QUISER SOBRE O LINK 3
    </span>
    </a>
    </li>
    <li>
    <a href="ENDEREÇO DO SEU LINK 4">LINK 4
    <span>
    ESCREVA AQUI O QUE QUISER SOBRE O LINK 4
    </span>
    </a>
    </li>
    <li>
    <a href="ENDEREÇO DO SEU LINK 5">LINK 5
    <span>
    ESCREVA AQUI O QUE QUISER SOBRE O LINK 5
    </span>
    </a>
    </li>
    <li>
    <a href="ENDEREÇO DO SEU LINK 6">LINK 6
    <span>
    ESCREVA AQUI O QUE QUISER SOBRE O LINK 6
    </span>
    </a>
    </li>
    <li>
    <a href="ENDEREÇO DO SEU LINK 7">LINK 7
    <span>
    ESCREVA AQUI O QUE QUISER SOBRE O LINK 7
    </span>
    </a>
    </li>
    <li>
    <a href="ENDEREÇO DO SEU LINK 8">LINK 8
    <span>
    ESCREVA AQUI O QUE QUISER SOBRE O LINK 8
    </span>
    </a>
    </li>
    <li>
    <a href="ENDEREÇO DO SEU LINK 9">LINK 9
    <span>
    ESCREVA AQUI O QUE QUISER SOBRE O LINK 9
    </span>
    </a>
    </li>

    </ul>

    15 de fev. de 2008

    Menu gradiente

    Nenhum comentário:
    Só funciona no Internet Explorer



    Copie o código e cole em "Elementos de página", no HTML/Javascript. Coloque os links e salve.



    <style type="text/css">
    .Menutje{width:340; height:22; background-color:#FFD6CF; filter:blendTrans(duration=0.6); color:#000000; text-align:LEFT; font:14px Tahoma; }
    </style>
    <script type="text/javascript">
    //verander hieronder de kleuren
    var OverKleur = "#F98957"; // Dit is de kleur waar het menu naar moet vervagen
    var Kleur = "#F49A7E"; // Dit is de normale kleur van de cel na de mouse-over
    function Vervaag(){ if(!document.all) return;
    var obj = event.srcElement;
    while(obj.tagName!="TD") obj=obj.parentElement;
    obj.filters[0].Apply();
    obj.style.backgroundColor = OverKleur;
    obj.filters[0].Play(); }
    function VaagUit(){
    if(!document.all) return;
    var obj = event.srcElement;
    while(obj.tagName!="TD") obj=obj.parentElement;if (event.fromElement.contains(event.toElement)obj.contains(event.toElement)) return
    obj.filters[0].Apply();
    obj.style.backgroundColor = Kleur;
    obj.filters[0].Play(); }
    </script>
    <div align="center">
    <center>
    <table width="120" height="140">
    <tr><td onmouseover="Vervaag()" onmouseout="VaagUit()" class="Menutje">
    <p align="center">
    <a target="_blank" href="ENDEREÇO DO LINK 1">Link 1</a></p>
    </td></tr>
    <tr><td onmouseover="Vervaag()" onmouseout="VaagUit()" class="Menutje">
    <p align="center"><a href="ENDEREÇO DO LINK 2" target="_blank">Link 2</a></p>
    </td></tr>
    <tr><td onmouseover="Vervaag()" onmouseout="VaagUit()" class="Menutje">
    <p align="center"><a href="ENDEREÇO DO LINK 3" target="_blank">Link 3</a></p>
    </td></tr>
    <tr><td onmouseover="Vervaag()" onmouseout="VaagUit()" class="Menutje">
    <p align="center"><a href="ENDEREÇO DO LINK 4" target="_blank">Link 4</a></p>
    </td></tr>
    <tr><td onmouseover="Vervaag()" onmouseout="VaagUit()" class="Menutje">
    <p align="center"><a href="ENDEREÇO DO LINK 5" target="_blank">Link 5</a></p>
    </td></tr>
    <tr><td onmouseover="Vervaag()" onmouseout="VaagUit()" class="Menutje">
    <p align="center"><a href="ENDEREÇO DO LINK 6" target="_blank">Link 6</a></p>
    </td></tr>
    <tr><td onmouseover="Vervaag()" onmouseout="VaagUit()" class="Menutje">
    <p align="center"><a href="ENDEREÇO DO LINK 7" target="_blank">Link 7</a></p>
    </td></tr>
    <tr><td onmouseover="Vervaag()" onmouseout="VaagUit()" class="Menutje">
    <p align="center"><a href="ENDEREÇO DO LINK 8" target="_blank">Link 8</a></p>
    </td></tr>
    <tr><td onmouseover="Vervaag()" onmouseout="VaagUit()" class="Menutje">
    <p align="center"><a href="ENDEREÇO DO LINK 9" target="_blank">Link 9</a></p>
    </td></tr>
    </table>
    </center>
    </div>

    5 de fev. de 2008

    Menu com caixinha seletora

    Um comentário:


    Copie o código, vá até Elementos de página" e cole no HTML/Javascript. Coloque os endereços dos links e salve.



    <Center><form name="rolloverbox">
    <div align="left"><p align="center"><b><input type="checkbox" name="boxes" value="ON">
    </font>
    <a href="ENDEREÇO DA PAGINA" onMouseover="rollovercheck(1)" onMouseout="rolloutcheck(0)" target="_blank" style="text-decoration: none">
    <font color="#CAB456">Link 1</a><br>
    <input type="checkbox" name="boxes" value="ON">
    <a href="ENDEREÇO DA PAGINA" onMouseover="rollovercheck(2)" onMouseout="rolloutcheck(1)" target="_blank" style="text-decoration: none">
    Link 2</a><br>
    <input type="checkbox" name="boxes" value="ON">
    <a href="ENDEREÇO DA PAGINA" onMouseover="rollovercheck(3)" onMouseout="rolloutcheck(2)" target="_blank" style="text-decoration: none">
    Link 3</a><br>
    <input type="checkbox" name="boxes" value="ON">
    <a href="ENDEREÇO DA PAGINA" onMouseover="rollovercheck(4)" onMouseout="rolloutcheck(3)" target="_blank" style="text-decoration: none">
    Link 4</a><br>
    <input type="checkbox" name="boxes" value="ON">
    <a href="ENDEREÇO DA PAGINA" onMouseover="rollovercheck(5)" onMouseout="rolloutcheck(4)" target="_blank" style="text-decoration: none">
    Link 5</a><br>
    <input type="checkbox" name="boxes" value="ON">
    <a href="ENDEREÇO DA PAGINA" onMouseover="rollovercheck(6)" onMouseout="rolloutcheck(5)" target="_blank" style="text-decoration: none">
    Link 6</a></b><p><p></p>
    </div>
    </form>
    <script>
    var thebox=document.rolloverbox
    function rollovercheck(whichbox){
    thebox.boxes[whichbox].checked=true
    }
    function rolloutcheck(whichbox){
    thebox.boxes[whichbox].checked=false
    }
    </script><center>



    2 de fev. de 2008

    Menu com efeito

    2 comentários:
    Para ter um menu como este, copie o código e cole no HTML/Javascript no seu blog. Querendo modificar as cores é só mudar os números que estão na cor verde.






    <style>
    .menulines{
    border:2.5px solid #7ECECD;
    }
    .menulines a{
    text-decoration:none;
    color:black;
    }
    </style>
    <script language="JavaScript1.2">
    function over_effect(e,state){
    if (document.all)
    source4=event.srcElement
    else if (document.getElementById)
    source4=e.target
    if (source4.className=="menulines")
    source4.style.borderStyle=state
    else{
    while(source4.tagName!="TABLE"){
    source4=document.getElementById? source4.parentNode : source4.parentElement
    if (source4.className=="menulines")
    source4.style.borderStyle=state
    }
    }
    }
    </script>
    <table onmouseout="over_effect(event,'solid')" cellspacing="0" border="0" cellpadding="0" onmouseover="over_effect(event,'outset')" style="background-">B0E0DF" width="150" onmousedown="over_effect(event,'inset')" onmouseup="over_effect(event,'outset')">
    <tr><td width="100%" bgcolor="#DFF3F3"><font face="Arial" size="2"><b>menu</b></font></td></tr>
    <tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="ENDEREÇO DO SEU LINK AQUI">link 1</a></font></td></tr>
    <tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="ENDEREÇO DO SEU LINK AQUI">link 2</a></font></td></tr>
    <tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="ENDEREÇO DO SEU LINK AQUI">link 3</a></font></td></tr>
    <tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="ENDEREÇO DO SEU LINK AQUI">link 4</a></font></td></tr>
    </table>

    Menu Aleatório

    Nenhum comentário:
    Para ter um menu como esse, copie o código e cole no HTML/Javascript em seu blog.







    <script>
    <!--
    var count=0
    function dothis(){
    setTimeout("document.wheel.wheel2.selectedIndex =1000",100)
    setTimeout("document.wheel.wheel2.selectedIndex =count",200)
    setTimeout("document.wheel.wheel2.selectedIndex =1000",300)
    setTimeout("document.wheel.wheel2.selectedIndex =count",400)
    setTimeout("document.wheel.wheel2.selectedIndex =1000",500)
    setTimeout("document.wheel.wheel2.selectedIndex =count",600)
    setTimeout("window.location=document.wheel.wheel2.options[document.wheel.wheel2.selectedIndex].value",800)
    }
    function animate(){
    var countfinal=Math.round(Math.random()*(document.wheel.wheel2.length-1))
    document.wheel.wheel2.selectedIndex =count
    if (count==countfinal){
    dothis()
    return
    }
    if (count<document.wheel.wheel2.length)
    count++
    else
    count=0
    setTimeout("animate()",50)
    }
    //-->
    </script>
    <form name="wheel" method="POST">
    <div align="center"><center><p><select name="wheel2" size="6">
    <option value="ENDEREÇO DO LINK 1"/>Link 1
    <option value="ENDEREÇO DO LINK 2"/>Link 2
    <option value="ENDEREÇO DO LINK 3"/>Link3
    <option value="ENDEREÇO DO LINK 4"/>Link 3
    <option value="ENDEREÇO DO LINK 5"/>Link 4
    <option value="ENDEREÇO DO LINK 6"/>Link 5
    </select></p>
    </center></div><div align="center"><center><p><input value="Clique"
    name="B1" onclick="animate()" type="button"/></p>
    </center></div>
    </form>

    Menu embutido colorido

    Um comentário:
    Para ter estes menus em seu blog, copie o código e cole no HTML/Javascript em seu blog. Coloque o endereço dos links e salve.








    <style>

    select.Menu{
    font-family: Verdana,sans serif;
    font-size: 8pt;
    font-style: normal;
    }
    option.menu1{
    color:#FFFFFF;
    background-color:#FFC0FF;
    }
    option.menu2{
    color:#CC0000;
    background-color:#FF80FF;
    }
    option.menu3{
    color:#123456;
    background-color:#FF40FF;
    }
    }
    option.menu4{
    color:#123456;
    background-color:#CE8AEE;
    }
    }
    option.menu5{
    color:#123456;
    background-color:#E1AAF8;
    }
    }
    option.menu6{
    color:#123456;
    background-color:#C19BF9;
    }
    </style>
    <form>
    <select onchange="if(options[selectedIndex].value) parent.frames.location.href= (options[selectedIndex].value)" class="Menu" name="URL" size="1">
    <option/>escolha
    <option/>
    <option class="menu1" value="AQUI O ENDEREÇO DO SEU LINK 1"/>item 1
    <option class="menu2" value="AQUI O ENDEREÇO DO SEU LINK 2"/>item 2
    <option class="menu3" value="AQUI O ENDEREÇO DO SEU LINK 3"/>item 3
    <option class="menu4" value="AQUI O ENDEREÇO DO SEU LINK 4"/>item 4
    <option class="menu5" value="AQUI O ENDEREÇO DO SEU LINK 5"/>item 5
    <option class="menu6" value="AQUI O ENDEREÇO DO SEU LINK 6"/>item 6
    </select>
    </form>












    Para os menus coloridos:
    Para trocar as cores é só modificar os números que estão em verde.



    <select onchange="if(options[selectedIndex].value) parent.frames.location.href= (options[selectedIndex].value)" style="background: #B3D87F; color: rgb(0, 0, 0); font-family: Arial; font-size: 10pt;" class="links" name="URL" size="1">
    <option selected="selected"/>--primeiro--
    <option value="ENDEREÇO DO SEU LINK/>Link 1
    <option value="ENDEREÇO DO SEU LINK/>Link 2
    <option value="ENDEREÇO DO SEU LINK/>Link 3
    <option value="ENDEREÇO DO SEU LINK/>Link 4
    <option value="ENDEREÇO DO SEU LINK/>Link 5
    </select>

    <select onchange="if(options[selectedIndex].value) parent.frames.location.href= (options[selectedIndex].value)" style="background: #D3E9DD; color: rgb(0, 0 , 0); font-family: Arial; font-size: 8pt;" class="links" name="URL" size="1">
    <option selected="selected"/>--segundo--
    <option value="ENDEREÇO DO SEU LINK/>Link 1
    <option value="ENDEREÇO DO SEU LINK/>Link 2
    <option value="ENDEREÇO DO SEU LINK/>Link 3
    <option value="ENDEREÇO DO SEU LINK/>Link 4
    <option value="ENDEREÇO DO SEU LINK/>Link 5
    </select>
    <select onchange="if(options[selectedIndex].value) parent.frames.location.href= (options[selectedIndex].value)" style="background: #ADC6E5; color: rgb(0, 0, 0); font-family: Arial; font-size: 8pt;" class="links" name="URL" size="1">
    <option selected="selected"/>--terceiro--
    <option value="ENDEREÇO DO SEU LINK/>Link 1
    <option value="ENDEREÇO DO SEU LINK/>Link 2
    <option value="ENDEREÇO DO SEU LINK/>Link 3
    <option value="ENDEREÇO DO SEU LINK/>Link 4
    <option value="ENDEREÇO DO SEU LINK/>Link 5
    </select>

    29 de jan. de 2008

    Menu deslizante

    Nenhum comentário:

    Pegue o código, faça as modificações e cole no HTML/Javascript no seu blogger















    <style>
    #menuShow{
    border: 1px solid #666666;
    background-color: #eef7f8;
    padding: 13px;
    font-size: 13px;
    font-family: Verdana, Arial;
    position: absolute;
    width: auto;
    height: auto;
    }
    #menuSelect{
    border: 1px solid #666666;
    background-color: #eef7f8;
    padding: 13px;
    font-size: 13px;
    font-family: Verdana, Arial;
    position: absolute;
    width: auto;
    height: auto;
    }
    </style>
    <!-- STEP TWO: Copy this code into the BODY of your HTML document -->
    <!--
    Place the two <div>'s below in the <body> of your code.
    (Normally, this will be immediately after the <body>
    tag.) The menuShow div will contain your links; change
    the text, links, and targets as needed.
    //-->
    <div id="menuSelect">
    <a href="#" onclick="moveOnMenu();moveOffSelector()">
    <img border="0" width="28" src="http://img352.imageshack.us/img352/7780/5arrowaxmk5.gif" height="28"/></a>
    </div>
    <div id="menuShow">
    <a href="#" onclick="moveOffMenu();moveOnSelector()">
    <img border="0" width="28" src="http://img352.imageshack.us/img352/7780/5arrowaxmk5.gif" height="28"/></a>
    <br/>
    <br/>
    <a href="AQUI O ENDEREÇO DO SEU LINK">Menu Item A</a><br/>
    <a href="AQUI O ENDEREÇO DO SEU LINK">Menu Item B</a><br/>
    <a href="AQUI O ENDEREÇO DO SEU LINK">Menu Item C</a><br/>
    <br/>
    <a href="AQUI O ENDEREÇO DO SEU LINK">Menu Item D</a><br/>
    <a href="AQUI O ENDEREÇO DO SEU LINK">Menu Item E</a><br/>
    <br/>
    <a href="AQUI O ENDEREÇO DO SEU LINK">Menu Item F</a><br/>
    <a href="AQUI O ENDEREÇO DO SEU LINK">Menu Item G</a><br/>
    <a href="AQUI O ENDEREÇO DO SEU LINK">Menu Item H</a><br/>
    </div>
    <!--
    Put the following script immediately *after* the
    <div>'s (above) in your page. Set the variables as
    indicated in the script.
    //-->
    <script language="JavaScript">
    <!-- Original: David Sosnowski (support@codelifter.com) -->
    <!-- Web Site: http://www.codelifter.com/ -->
    <!-- This script and many more are available free online at -->
    <!-- The JavaScript Source!! http://javascript.internet.com/ -->
    <!-- Begin
    // (C) 2001 http://www.codelifter.com/
    // http://www.codelifter.com/
    // Free for all users, but leave in this header.
    // Set Show to "yes" to show the menu on start-up.
    // Set Show to "no" to show the selector on start-up.
    Show ="yes";
    // Set OffX in pixels to a negative number
    // somewhat larger than the width of the menu.
    var OffX = -150;
    // Set the PosX and PosY variables
    // to the location on the screen where the
    // menu should position (in pixels) when stopped.
    var PosX = 250;
    var PosY = 100;
    // Usually, use the settings shown; but you can
    // change the speed and the increment of motion
    // across the screen, below.
    var speed = 1;
    var increment = 1;
    var incrementNS4 = 5; // for slower NS4 browsers
    // do not edit below this line
    // ===========================
    var is_NS = navigator.appName=="Netscape";
    var is_Ver = parseInt(navigator.appVersion);
    var is_NS4 = is_NS&&is_Ver>=4&&is_Ver<5;
    var is_NS5up = is_NS&&is_Ver>=5;
    var MenuX = OffX;
    var SelX = PosX;
    var sPosX = PosX;
    var sOffX = OffX;
    if (Show == "yes") {
    sPosX = OffX;
    sOffX = PosX;
    MenuX = sOffX;
    SelX = sPosX;
    }
    if (is_NS4) {
    increment = incrementNS4;
    Lq = "document.layers.";
    Sq = "";
    eval(Lq+'menuSelect'+Sq+'.left=sPosX');
    eval(Lq+'menuShow'+Sq+'.left=sOffX');
    eval(Lq+'menuSelect'+Sq+'.top=PosY');
    eval(Lq+'menuShow'+Sq+'.top=PosY');
    } else {
    Lq = "document.all.";
    Sq = ".style";
    document.getElementById('menuSelect').style.left = sPosX+"px";
    document.getElementById('menuShow').style.left = sOffX+"px";
    document.getElementById('menuSelect').style.top = PosY+"px";
    document.getElementById('menuShow').style.top = PosY+"px";
    }
    function moveOnMenu() {
    if (MenuX < PosX) {
    MenuX = MenuX + increment;
    if (is_NS5up) {
    document.getElementById('menuShow').style.left = MenuX+"px";
    } else {
    eval(Lq+'menuShow'+Sq+'.left=MenuX');
    }
    setTimeout('moveOnMenu()',speed);
    }
    }
    function moveOffMenu() {
    if (MenuX > OffX) {
    MenuX = MenuX - increment;
    if (is_NS5up) {
    document.getElementById('menuShow').style.left = MenuX+"px";
    } else {
    eval(Lq+'menuShow'+Sq+'.left=MenuX');
    }
    setTimeout('moveOffMenu()',speed);
    }
    }
    function moveOffSelector() {
    if (SelX > OffX) {
    SelX = SelX - increment;
    if (is_NS5up) {
    document.getElementById('menuSelect').style.left = SelX+"px";
    } else {
    eval(Lq+'menuSelect'+Sq+'.left=SelX');
    }
    setTimeout('moveOffSelector()',speed);
    }
    }
    function moveOnSelector() {
    if (SelX < PosX) {
    SelX = SelX + increment;
    if (is_NS5up) {
    document.getElementById('menuSelect').style.left = SelX+"px";
    } else {
    eval(Lq+'menuSelect'+Sq+'.left=SelX');
    }
    setTimeout('moveOnSelector()',speed);
    }
    }
    // End -->
    </script>
    <!-- Script Size: 5.71 KB -->





    Créditos: Code Lifter


    Menu embutido com botão

    Um comentário:
    Para ter um menu assim, copie e coloque em HTML/Javascript, faça as modificações e publique.








    <script language="JavaScript">
    <!--
    function goTo(form) {
    var myindex=form.dest.selectedIndex
    window.open(form.dest.options[myindex].value);
    }
    //-->
    </script>
    <center>
    <form name="myindex">
    <select name="dest" size="1">
    <option selected value=""/>Favoritos
    <option value="ENDEREÇO DO SEU LINK 1" target="_new"/>Link 1
    <option value="ENDEREÇO DO SEU LINK 2" target="new"/>Link 2
    <option value="ENDEREÇO DO SEU LINK 3" target="_new"/>Link 3
    <option value="ENDEREÇO DO SEU LINK 4" target="_new"/>Link4
    <option value="ENDEREÇO DO SEU LINK 5" target="_new"/>Link5
    <option value="ENDEREÇO DO SEU LINK 6" target="_new"/>Link6
    <option value="ENDEREÇO DO SEU LINK 7" target="_new"/>Link7
    <option value="ENDEREÇO DO SEU LINK 8" target="_new"/>Link8
    </select>
    <input value="Ir" onclick="goTo(this.form)" type="BUTTON"/>
    </form>
    </center>

    7 de jan. de 2008

    Menu expansivel

    9 comentários:




    Para ter um menu que se expande, como este acima, copie o código abaixo, vá até o HTML do seu blog, procure pelo código




    <head>



    e abaixo dele, cole o próximo código.




    <style type='text/css'>.texthidden {display:inline}.shown {display:block}</style><script type='text/javascript'>document.write('<style>.texthidden {display:none} </style>');</script><script type='text/Javascript'>function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className=="shown") {whichpost.className="texthidden";}else {whichpost.className="shown";}}</script>
    <style type='text/css'>
    #dolphincontainer{position:relative;height:43px;color:#f06214;background:#ffffff;
    width:100%;font-family:Helvetica,Arial,Verdana,sans-serif;}
    #dolphinnav{position:relative;height:34px;font-size:12px;text-transform:uppercase;
    font-weight:bold;background:#F06214 url() repeat-x bottom left;
    padding:0 0 0 20px;}
    #dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
    #dolphinnav ul li{display:block;float:left;margin:0 1px;}
    #dolphinnav ul li a{display:block;float:left;color:#ffffff;text-decoration:none;
    padding:0 0 0 20px;height:33px;}
    #dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}
    #dolphinnav ul li a:hover{color:#000000;
    background:transparent url() repeat-x bottom left;}
    #dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;}
    #dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#FCD9B6;
    background:#ffffff url() no-repeat top left;line-height:275%;}
    #dolphinnav ul li a.current span{display:block;padding:0 18px 0 0;width:auto;
    background:#805E5E url() no-repeat top right;height:33px;}
    </style>


    Salve.



    Agora vá em layout,




    Clique em "Adicionar um Gadget"






    Clique então em HTML/Javascript




    E cole o código abaixo, inserindo os links nos locais indicados.




    <a href="javascript:void(0);" onclick="expandcollapse('lista de link 1')"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrz0lBn_09WoPjH3uQGF8ENjTFaegc0wR-HT8RzRRWcgjtm8oopw8XLVcm7rHypVB2tDQ7KyE1GfFmNFHNRMe5vUs1bi6mhqPtcVsb1Wp218bs1fLOJUEhejTzTlc-VjDo7QuYmeROAsnZ/s1600/lista+de+links+1.png"/></a><br/>
    <ul id="lista de link 1" class="texthidden">
    <li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
    <li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
    <li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
    <li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
     </ul>
    <a href="javascript:void(0);" onclick="expandcollapse('lista de link 2')"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyQLo4i5e5VI3ujH47pYc99XojniN1sm-RIIuxvOwLCuCzAICbXCxP6a36E0OI_pGwTN_S3jTFHXi82ijSP68dh2Qz_s18w3cwlBC4pDJv7uum-Jk-oylkvBD4opdgyfKyqbIAFAUsTGjj/s1600/lista+delink+2.png"/></a><br/>
    <ul id="lista de link 2" class="texthidden">
    <li><a href="http://templateseacessorios.blogspot.com" target="_blank">Templates & Acessórios </a></li>
    <li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
    <li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
    <li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
    <li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
     </ul>
    <a href="javascript:void(0);" onclick="expandcollapse('lista de link 3')"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOn1IBqjl4d-Cna1dQggbmgu435rlFj_g0dniMz8c1A_LkF-ZSdcDhEPUNSVkUAL2PhR3SKeJ4H6wL5JYgNi83gu-I74ppt0YR3yUGb3rsa5rLkXh9gMxwz1KujLBrNl-8lVqQYUIdz1CA/s1600/lista+delink+3.png"/></a><br/>
    <ul id="lista de link 3" class="texthidden">
    <li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
    <li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
    <li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
    <li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
    <li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
     </ul>
    <a href="javascript:void(0);" onclick="expandcollapse('lista de link 4')"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNTg0RlcDBZd2yVX338Bc3L-0gdhyphenhyphentJngyAYxkx4GiIYUZKqlzx-QyzNatmW4lT7fEOTeFKhFtZRsQQEcqIWrhLEISbKX0UKJzkobdXv5xfkChlcjHf4ikEkt0-IWATAFeDEux-8IO0z1h/s1600/lista+delink+4.png"/></a><br/>
    <ul id="lista de link 4" class="texthidden">
    <li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
    <li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
    <li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
    <li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
    <li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
     </ul>
    <a href="javascript:void(0);" onclick="expandcollapse('lista de links 5')"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN5pcPgI2x5ele1xejnQAPqrBTTgmwnyH361cML2nX6CXQ1jM4QWUjxKjNIlirXpXDocT5yhcA19BGA-rxGk91rDzUEcz75q1YVwUyrvNMAHp6Zxk6RcLzZ32f37HNtiw_cPDu18OPtZR-/s1600/lista+de+link+5.png"/></a><br/>
    <ul id="lista de links 5" class="texthidden">
    <li><a href="http://endereçodofcebook.com" target="_blank">Facebook</a></li>
    <li><a href="http://endereçodotwittercom" target="_blank">Twitter</a></li>
    <li><a href="mailto:endereçodoseuemail@seuservidor.com" target="_blank">Email</a></li>
     </ul>


    No código acima é perceptível uma variedade de cores, fiz isso para facilitar para vocês.

    Azul-------------------Código do endereço dos botões, troque-os se forde seu agrado.
    Vermelho-------------Código para a troca de endereço dos links
    Rosa-----------------Código que é a chave para abrir o menu, não precisa mexer senão quiser
    Laranja--------------Código dos nomes dos links


    Abaixo 4 modelos de boões, caso prefira colocar sua inscrição:






    29 de dez. de 2007

    Menu animado

    Um comentário:

    Quer um menu como este abaixo ?


    Gostou ? Então clique em "Modelo" depois em "Elementos de página". Agora clique em "Adicionar um elemento de página" e clique em HTML/Javascript.

    Cole o código aí fazendo as modificações necessárias e colando os links nos locais indicados.

    Em verde é a cor da barra de cima. Mude se quiser.

    Em azul é a cor de fundo da caixinha






    <div style="background-"#EB8B35;width:187px;">
    <center><a href="javascript:movedown()">SUBIR</a> <a href="javascript:moveup()">DESCER</a>
    <a href="javascript:stopscroll()">PARAR</a> <a href="javascript:movetop()">VOLTAR</a></center>
    </div>
    <script language="JavaScript1.2">
    var speed=2

    iens6=document.alldocument.getElementById
    ns4=document.layers

    if (iens6)
    {document.write
    ('<div id="container" style="background: #ffffff; position:relative;width:185px;height:150px;overflow:hidden;border:2px ridge white">')

    document.write('<div id="content" style="position:absolute;width:183px;left:2px;top:0px">')
    }
    </script>

    <center><form name="rolloverbox">
    <!--Scripts--->
    <div align="left"><p align="left"><b><input value="ON" name="boxes" type="checkbox"/>
    <a onmouseover="rollovercheck(0)" style="text-decoration: none" onmouseout="rolloutcheck(0)" href="AQUI O ENDEREÇO DO QUE QUERES LINKAR" target="_blank">
    NOME DO LINK<br/>

    <input value="ON" name="boxes" type="checkbox"/>
    <a onmouseover="rollovercheck(1)" style="text-decoration: none" onmouseout="rolloutcheck(1)" href="AQUI O ENDEREÇO DO QUE QUERES LINKAR" target="_blank">
    NOME DO LINK<br/>

    <input value="ON" name="boxes" type="checkbox"/>
    <a onmouseover="rollovercheck(2)" style="text-decoration: none" onmouseout="rolloutcheck(2)" href="AQUI O ENDEREÇO DO QUE QUERES LINKAR" target="_blank">
    NOME DO LINK<br/>
    <input value="ON" name="boxes" type="checkbox"/>
    <a onmouseover="rollovercheck(3)" style="text-decoration: none" onmouseout="rolloutcheck(3)" href="AQUI O ENDEREÇO DO QUE QUERES LINKAR" target="_blank">
    NOME DO LINK <br/>

    <input value="ON" name="boxes" type="checkbox"/>
    <a onmouseover="rollovercheck(4)" style="text-decoration: none" onmouseout="rolloutcheck(4)" href="AQUI O ENDEREÇO DO QUE QUERES LINKAR" target="_blank">
    NOME DO LINK<br/>
    <input value="ON" name="boxes" type="checkbox"/>
    <a onmouseover="rollovercheck(5)" style="text-decoration: none" onmouseout="rolloutcheck(5)" href="AQUI O ENDEREÇO DO QUE QUERES LINKAR" target="_blank">
    NOME DO LINK<br/>
    <input value="ON" name="boxes" type="checkbox"/>
    <a onmouseover="rollovercheck(6)" style="text-decoration: none" onmouseout="rolloutcheck(6)" href="AQUI O ENDEREÇO DO QUE QUERES LINKAR" target="_blank">
    NOME DO LINK<br/>

    <input value="ON" name="boxes" type="checkbox"/>
    <a onmouseover="rollovercheck(7)" style="text-decoration: none" onmouseout="rolloutcheck(7)" href="AQUI O ENDEREÇO DO QUE QUERES LINKAR" target="_blank">
    NOME DO LINK<br/>

    <input value="ON" name="boxes" type="checkbox"/>
    <a onmouseover="rollovercheck(8)" style="text-decoration: none" onmouseout="rolloutcheck(8)" href="AQUI O ENDEREÇO DO QUE QUERES LINKAR" target="_blank">
    NOME DO LINK<br/>

    <input value="ON" name="boxes" type="checkbox"/>
    <a onmouseover="rollovercheck(9)" style="text-decoration: none" onmouseout="rolloutcheck(9)" href="AQUI O ENDEREÇO DO QUE QUERES LINKAR" target="_blank">
    NOME DO LINK<br/>

    <input value="ON" name="boxes" type="checkbox"/>
    <a onmouseover="rollovercheck(10)" style="text-decoration: none" onmouseout="rolloutcheck(10)" href="AQUI O ENDEREÇO DO QUE QUERES LINKAR" target="_blank">
    NOME DO LINK<br/>

    <input value="ON" name="boxes" type="checkbox"/>
    <a onmouseover="rollovercheck(11)" style="text-decoration: none" onmouseout="rolloutcheck(11)" href="AQUI O ENDEREÇO DO QUE QUERES LINKAR" target="_blank">
    NOME DO LINK<br/>

    </a></a></a></a></a></a></a></b></p>
    </div></form>
    <script>
    var thebox=document.rolloverbox
    function rollovercheck(whichbox){
    thebox.boxes[whichbox].checked=true
    }

    function rolloutcheck(whichbox){
    thebox.boxes[whichbox].checked=false
    }
    </script><center>
    <script language="JavaScript1.2">
    if (iens6){
    document.write('</div></div>')
    var crossobj=document.getElementById? document.getElementById("content") : document.all.content
    var contentheight=crossobj.offsetHeight
    }
    else if (ns4){
    var crossobj=document.nscontainer.document.nscontent
    var contentheight=crossobj.clip.height
    }
    function movedown(){
    if (window.moveupvar) clearTimeout(moveupvar)
    if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
    crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
    else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
    crossobj.top-=speed
    movedownvar=setTimeout("movedown()",20)
    }
    function moveup(){
    if (window.movedownvar) clearTimeout(movedownvar)
    if (iens6&&parseInt(crossobj.style.top)<=0)
    crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
    else if (ns4&&crossobj.top<=0)
    crossobj.top+=speed
    moveupvar=setTimeout("moveup()",20)
    }
    function stopscroll(){
    if (window.moveupvar) clearTimeout(moveupvar)
    if (window.movedownvar) clearTimeout(movedownvar)
    }

    function movetop(){
    stopscroll()
    if (iens6)
    crossobj.style.top=0+"px"
    else if (ns4)
    crossobj.top=0
    }
    function getcontent_height(){
    if (iens6)
    contentheight=crossobj.offsetHeight
    else if (ns4)
    document.nscontainer.document.nscontent.visibility="show"
    }
    window.onload=getcontent_height
    </script>

    Copyright © Templates e Acessórios |
    Design by Elke di Barros | Tecnologia do Blogger
      Twitter Facebook Google + YouTube