.

terça-feira

Menus Sensíveis ao Mouse Para Blog

ACESSOS:
AQUI


Nesta postagem compartilho com vocês este menu sensível ao mouse, ou seja, quando parar com o mouse em cima das abas do menu, automaticamente o menu se expandirá...



Eu coloquei este código em um dos meus blogs de teste veja uma demonstração:

http://shrekando.blogspot.com.br/





Para colocar em seu blog... Entre em "Modelo" - "Editar HTML" e procure pela tag

]]></b:skin>
Tendo encontrado a tag, cole ACIMA dela o seguinte código
/* Menus Sensíveis ao Mouse Para Blog - By DicasHot
------------------------------------------------------------------------------- */
.mais {
background: url(http://i.imgur.com/yAS4z5z.png) no-repeat 0px .0em;
width: 250px;
height: 60px;
float: left;
padding: 20px 0px 0px 16px;
font-family: Verdana, 'Lucida Grande';
font-weight:normal;
font-size:16px;
color:#fff;
}
.drop-menu:hover {
border: 0px solid #fff;
}
.drop-menu:hover .sub-menu {
display: inline-block;
}
.drop-menu:hover .plus {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.sub-menu {
display: none;
background: #f4f4f;
font-family: Verdana, 'Lucida Grande';
font-weight:normal;
font-size:14px;
}
Tendo colado o código, pode salvar e fechar essa parte.


Agora, entre em "Layout" - "Adicionar um Gadget" - "HTML/JavaScript" e cole o seguinte código:

<div class="drop-menu">

<span class="mais">EDITAR</span>
<ul class="sub-menu">
<a href="LINK"><span style="color: #e53059;">HOME</span></a><br />
<a href="LINK"><span style="color: #e53059;">PUBLICIDADE</span></a><br />
<a href="LINK"><span style="color: #e53059;">PORTFÓLIO</span></a><br />
<a href="LINK"><span style="color: #e53059;">EQUIPE</span></a><br />
<a href="LINK"><span style="color: #e53059;">NEWS</span></a><br /><a href="LINK"><span style="color: #e53059;">RECRUTAMENTO</span></a><br />
<a href="LINK"><span style="color: #e53059;">FACEBOOK</span></a><br />
<a href="LINK"><span style="color: #e53059;">CONTATO</span></a><br />
<a href="LINK"><span style="color: #e53059;">FERRAMENTAS</span></a>

</ul></div>

<br />
<br />
<div class="drop-menu">

<span class="mais">EDITAR</span>
<ul class="sub-menu">

<a href="LINK"><span style="color: #e53059;">CSS</span></a><br /><a href="LINK"><span style="color: #e53059;">HTML5</span></a><br /><a href="LINK"><span style="color: #e53059;">CSS3</span></a><br />

<a href="LINK"><span style="color: #e53059;">HTML</span></a><br />
<a href="LINK"><span style="color: #e53059;">PHP</span></a>
<span style="color: #e53059;">&nbsp;</span><br />
<a href="LINK"><span style="color: #e53059;">JAVASCRIPT</span></a><br />
<a href="LINK"><span style="color: #e53059;">PHOTOSHOP</span></a><br />
<a href="LINK"><span style="color: #e53059;">ELEMENTOS BLOGGER</span></a>
<span style="color: #e53059;">&nbsp;</span><br />
<a href="LINK"><span style="color: #e53059;">TUTORIAIS BLOGGER</span></a>
<span style="color: #e53059;">&nbsp;</span><br />
<a href="LINK"><span style="color: #e53059;">HACK BLOGGER</span></a>
<span style="color: #e53059;">&nbsp;</span><br />
<a href="LINK"><span style="color: #e53059;">XAT</span></a>
<span style="color: #e53059;">&nbsp;</span><br />
<a href="LINK"><span style="color: #e53059;">FTP</span></a>
<span style="color: #e53059;">&nbsp;</span><br />
<a href="LINK"><span style="color: #e53059;">SEO</span></a>
<span style="color: #e53059;">&nbsp;</span><br />
<a href="LINK"><span style="color: #e53059;">OUTROS TUTORIAIS</span></a>
<span style="color: #e53059;">&nbsp;</span><br />
<a href="LINK"><span style="color: #e53059;">VIDEOAULA</span></a>
</ul></div>

<br />
<br />
<div class="drop-menu">

<span class="mais">EDITAR</span>
<ul class="sub-menu">

<a href="LINK"><span style="color: #e53059;">TEMPLATES</span></a><br />
<a class="menu" href="LINK"><span style="color: #e53059;">PROGRAMAS</span></a><br />
<a class="menu" href="LINK"><span style="color: #e53059;">APOSTILAS</span></a><br />
<a class="menu" href="LINK"><span style="color: #e53059;">BRUSHES</span></a><br />
<a class="menu" href="LINK"><span style="color: #e53059;">GLOSSÁRIO WEB</span></a>

<span style="color: #e53059;">&nbsp;</span><br />
<a class="menu" href="LINK"><span style="color: #e53059;">RENDERS</span></a><br />
<a class="menu" href="LINK"><span style="color: #e53059;">SHAPES</span></a><br />
<a class="menu" href="LINK"><span style="color: #e53059;">BANNERS</span></a><br />
<a class="menu" href="LINK"><span style="color: #e53059;">SKIN</span></a><br />
<a class="menu" href="LINK"><span style="color: #e53059;">GFX / SIGN</span></a>
</ul></div>

<br />
<br />
<div class="drop-menu">

<span class="mais">EDITAR</span>
<ul class="sub-menu">

<div style="text-align: center;">
<a href="LINK"><img src="http://i.imgur.com/LtDWzvD.gif" /></a> <a href="LINK"><img src="http://2.bp.blogspot.com/-rjoTAJZf7Lc/Ulhy24dejcI/AAAAAAAAJzU/pY0YOFqeZZM/s1600/KILLUAA.gif" /></a> </div>
<div style="text-align: center;">
<a href="LINK"><img src="http://img716.imageshack.us/img716/1584/buttonft.gif" /></a> <a href="www.neoanimes.net"><img src="http://img534.imageshack.us/img534/6844/sb36.png" /></a><br /><a href="http://www.animescx.com/" target="_blank"><a  href="http://www.animescx.com/"  target="_blank"><img style="width: 88px; height: 31px;"  src="http://img819.imageshack.us/img819/1484/bannercx88x31.png" border="0"  /></a> <a href="http://anima-led.blogspot.com.br/" target="_blank"><img src="http://1.bp.blogspot.com/-SGslKUtabZQ/Ukl6VM3xjYI/AAAAAAAACmk/ogeq3fnc1Wk/s1600/Animaled.png" border="0" /></a>
<br /><iframe frameborder="0" height="31" scrolling="no" src="http://goo.gl/jp5z9r" width="88"></iframe><br />
<!-- Site Meter XHTML Strict 1.0 -->
<script src='http://s51.sitemeter.com/js/counter.js?site=s51lordkira' type='text/javascript'>
</script>
<!-- Copyright (c)2009 Site Meter -->

</a></div>



</ul></div>
Widget by <a href="http://dicashot.blogspot.com.br/" target="_blank">DicasHot</a>
Tendo feito isto, está pronto!!!

Cursos 24 Horas

Cursos Online