terça-feira, 28 de maio de 2013

Como inserir um menu diferenciado em seu blog.

Olá pessoal, sempre achei que o menu pode fazer uma diferença e muita no blog. Quando a pessoa visita a página, logo vê o menu, e claro se tiver um super-menu, irá chamar mais atenção e trazer um ar de profissionalismo, gerando assim uma confiança no visitante, fazendo com que ele volte mais vezes e até divulgue seu blog. Então vamos lá, mãos á obra.

Coloque o código abaixo antes de ]]></b:skin>

/* Styles for the entire LavaLamp menu */
.lavaLamp {
position: relative;
height: 0px; width: 421px;
background: url("../image/bg.gif") no-repeat top;
padding: 72px; margin: -40px 0;
overflow: hidden;
}
/* Force the list to flow horizontally */
.lavaLamp li {
float: left;
list-style: none;
}
/* Represents the background of the highlighted menu-item. */
.lavaLamp li.back {
background: url("http://perfeitodownload.webs.com/PERFEITO%20DOWNS%20IMG/lavalampd.png") no-repeat right -30px;
width: 9px; height: 30px;
z-index: 8;
position: absolute;
}
.lavaLamp li.back .left {
background: url("http://perfeitodownload.webs.com/PERFEITO%20DOWNS%20IMG/lavalampd.png") no-repeat top left;
height: 30px;
margin-right: 9px;
}
/* Styles for each menu-item. */
.lavaLamp li a {
font: bold 12px tahoma, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #fff;
outline: center;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
padding:5px 13px 0px 0px;
margin:3px 0px 0px 15px;
}


Agora vamos para o script coloque ele antes de </head>

<script src='https://dl.dropbox.com/u/8526013/jquery-1.2.3.min.js' type='text/javascript'/>
<script src='https://dl.dropbox.com/u/8526013/jquery.lavalamp.min.js' type='text/javascript'/>
<!-- Optional -->
<script src='https://dl.dropbox.com/u/8526013/jquery.easing.min.js' type='text/javascript'/><script type='text/javascript'>

$(function() { $(&quot;.lavaLamp&quot;).lavaLamp({ fx: &quot;backout&quot;, speed: 700 })});</script>

Coloque abaixo de <body> ou onde quiser deixar o menu

Atenção! Caso tenha erro apague esse código: <div id='topo-menu'>

<div id='topo-menu'> 
<div id='menu'> 
<ul> 
<li class='back'><div class='left'/></li>
<ul class='lavaLamp'>
<li><a href='http://perfeitodowns.blogspot.com/'>Home</a></li>
<li><a href='http://perfeitodowns.blogspot.com/2010/07/termos-de-parceria-nos-do-perfeito.html'>Parceria</a></li>
<li><a href='http://perfeitodowns.blogspot.com/2010/07/fale-conosco.html'>Contato</a></li>
<li><a href='http://perfeitodowns.blogspot.com/p/mapa-do-site.html'>Mapa Do Site</a></li>
<li><a href='http://perfeitodowns.blogspot.com/2010/11/pedido.html'>Pedidos</a></li>
</ul>
<li class='back' style='left: 10px; width: 57px; display: block; overflow: hidden;'><div class='left'/></li></ul>

Qualquer dúvida ou sugestões, deixe um comentário!
Compartilhe esta postagen.
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

4 comentários:

  1. gostaria de inserir esse menu diferenciado em meu blog meu amigo como eu faço isso? Ha parabens pelo blog muito bom viu ha espero por suas visitas tbm acessa aí espero que goste

    http://juniorcis.blogspot.com
    http://junior-juniorcis.blogspot.com

    grato

    junior

    ResponderExcluir
  2. Oi, Parabéns pelo blog. Gostaria de inserir um menu com submenu igual ao seu, a casinha do home ficou um charme. Pode me ajudar?

    ResponderExcluir
  3. boa tade
    eu tenho muita dificuldade de que site eu baixo o office 2010 pois não estou conseguindo ou eu tenho que entra no site da morosoft e baixar a ai sim desconectar da rede internet e inseri os códigos, minha maior duvida de onde baixo, obrigado

    ResponderExcluir
    Respostas
    1. alguém pode me passar o link onde eu consiga baixar o office 2010 pois tem tanto e estou apavorado em fazer besteira

      Excluir