dicashot
Gata da vez
(+18)
DicasHot
HBO MOVIES ONLINE
TV
dicashot
Cartoon Network PT
TV
dicashot
ANI ROCHA NO FUNK
DANÇANDO MUITO



Menus Sensíveis ao Mouse Para Blog



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
Menus Sensíveis ao Mouse Para Blog Menus Sensíveis ao Mouse Para Blog Reviewed by Muca on 4/08/2014 12:30:00 PM Rating: 5