É bem simples de colocar, sigam alguns passos:
Vá em, >> Editar HTML >> procure por:
Acima dela adicione o seguinTe CSS:
display: inline-block;
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
}
.drop-menu:hover {
border: 1px 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;
width: 400px;
background: #fff;
padding: 10px 10px;
margin-left: -11px;
margin-top: 10px;
border: 1px solid #fff;
-webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
-moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
}
.sub-menu li {
list-style-type: none;
display: block;
border-bottom: 1px dotted #eaeaea;
font-size: 19px;
height: 22px;
padding: 8px 0;
}
.sub-menu li img {
margin-right: .5em;
}
.sub-menu li:hover {
border-bottom: 1px dotted #bababa;
}
Basta agora usar as seguintes DIV's para chamar o CSS:
<span class="mais">+</span> Menu de Redes sociais
<ul class="sub-menu">
<li><a href="#"><img src="http://1.bp.blogspot.com/-aGYzMlEd8DI/UQW1SIehzuI/AAAAAAAAEsI/yD8QRUQoQRk/s1600/rss.png" border="0" alt="rss"> Assine nosso Feed</a></li>
<li><a href="#"><img src="http://4.bp.blogspot.com/-vIKPVTszOcg/UQW1SXyffuI/AAAAAAAAEsU/Bu43TDcbMHA/s1600/email.png" border="0" alt="email"> Assinantes por E-mail</a></li>
<li><a href="#"><img src="http://1.bp.blogspot.com/-5qh3_VgYmac/UQW1TC2lfhI/AAAAAAAAEsg/ugW01VZGkvs/s1600/twitter.png" border="0" alt="twitter">+ Siga-nos</a></li>
</ul>
</div>
Agora é só editar e posicionar em algum lugar que não atrapalhe outras funções do template... Até mais!
muito bom cara
ResponderExcluirxD
Hey Lord eu sou o Mello da Fairy Tail STORM eu vim dizer que aceitamos a parceria e ja adicionei o banner de vocês, a proposito gosto muito do site de vocês boa sorte e continuem o bom trabalho!
Excluirtambem gostei xD
ResponderExcluirVlws mans
ResponderExcluir