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>
/* 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;"> </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;"> </span><br />
<a href="LINK"><span style="color: #e53059;">TUTORIAIS BLOGGER</span></a>
<span style="color: #e53059;"> </span><br />
<a href="LINK"><span style="color: #e53059;">HACK BLOGGER</span></a>
<span style="color: #e53059;"> </span><br />
<a href="LINK"><span style="color: #e53059;">XAT</span></a>
<span style="color: #e53059;"> </span><br />
<a href="LINK"><span style="color: #e53059;">FTP</span></a>
<span style="color: #e53059;"> </span><br />
<a href="LINK"><span style="color: #e53059;">SEO</span></a>
<span style="color: #e53059;"> </span><br />
<a href="LINK"><span style="color: #e53059;">OUTROS TUTORIAIS</span></a>
<span style="color: #e53059;"> </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;"> </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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdYXr63QWC7yG2w8D33cM46XUIHhPBOaFyW-1QzYVLVZBzbTa6t5TxcaKl1ZZa7J_sRLNaAU0J67D4dlWb7mk0sbUczNiHbQw60HpBYhiddp0UyAYkb66PKv2TnZs4BVOI9DSdsL-7P0xo/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!!!
