segunda-feira, 1 de agosto de 2011

Menu de Redes Sociais com Efeito Hover


Estava eu visitando blogs e achei um widget com menu de redes sociais com efeito hover,é claro que eu dei algumas modificadas, é muito legal veja a demonstração abaixo :






Legal né ? para por em seu blog siga as instruções abaixo :

1-Faça o login no blogger
2-vai em Design
3-Elementos da página
4-Adicionar gadget - HTML/JavaScripit
e cole o seguinte código :

<style>
/* menu hover--------------------------------------------- */
#menuhover {
display: inline;

}

#menuhover li {
list-style-type:none;padding: 0 2px;
}

#blogger1 {
background: url(http://2.bp.blogspot.com/_BaCxSD9NFn8/S3C-A8ggT6I/AAAAAAAABPU/4DNs2JPg3ew/s1600/bloggerc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#feedbourner1 {
background: url(http://4.bp.blogspot.com/_BaCxSD9NFn8/S3C-L0HGdXI/AAAAAAAABPs/kXpZirBI9Hg/s1600/feedburnerc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#twitter1 {
background: url(http://1.bp.blogspot.com/_BaCxSD9NFn8/S3C-pyr384I/AAAAAAAABQM/BoeY3vrTjRs/s1600/twitterc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#facebook1 {
background: url(http://4.bp.blogspot.com/_BaCxSD9NFn8/S3C-Lvvjn2I/AAAAAAAABPc/9-9QGVwWIpQ/s1600/facebookc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#blogblogs1 {
background: url(http://4.bp.blogspot.com/_BaCxSD9NFn8/S3C-A76yB9I/AAAAAAAABPM/GIWCOx-NZXE/s1600/blogblogsc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#technoraty1 {
background: url(http://2.bp.blogspot.com/_BaCxSD9NFn8/S3C-p410AzI/AAAAAAAABQE/VSbWkzAeuyc/s1600/technoratic.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#orkut1{
background: url(http://4.bp.blogspot.com/_BaCxSD9NFn8/S3C-darM78I/AAAAAAAABP8/YhRQz4g0tl4/s1600/orkutc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#youtube1{
background: url(http://1.bp.blogspot.com/-ec-GPpE3cSs/TjCYsrLEt8I/AAAAAAAAFyc/uVR6nAsyuJc/s1600/youtubec.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#favoritos1{
background: url(http://4.bp.blogspot.com/_BaCxSD9NFn8/S3C-Lvb_GXI/AAAAAAAABPk/KPPxDuQFNNs/s1600/favoritesc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

/*hover*/

#blogger1:hover {
background: url(http://1.bp.blogspot.com/_BaCxSD9NFn8/S3C-Aw1Pi1I/AAAAAAAABPQ/0ckUW3EopWE/s1600/blogger.png)  0 0 no-repeat;
}
#feedbourner1:hover {
background: url(http://4.bp.blogspot.com/_BaCxSD9NFn8/S3C-LvTzR3I/AAAAAAAABPo/aiXPzXzhSQY/s1600/feedburner.png)  0 0 no-repeat;
}
#twitter1:hover {
background: url(http://2.bp.blogspot.com/_BaCxSD9NFn8/S3C-p-dg-mI/AAAAAAAABQI/S6uKYvq4T5c/s1600/twitter.png) 0 0 no-repeat;
}
#facebook1:hover {
background: url(http://3.bp.blogspot.com/_BaCxSD9NFn8/S3C-BJQQ5oI/AAAAAAAABPY/VmZRCCbYs3Y/s1600/facebook.png) 0 0 no-repeat;
}
#orkut1:hover {
background: url(http://2.bp.blogspot.com/_BaCxSD9NFn8/S3C-deQGG7I/AAAAAAAABP4/iYTOHKsvBpk/s1600/orkut.png) 0 0 no-repeat;
}
</style>

<div id="menuhover">
<ul>
<li><a href="PERFIL DO BLOGGER" id="blogger1" target="_blank" title="Perfil"></a></li>
<li><a href="ENDEREÇO DO FEED" id="feedbourner1" target="_blank" title="FeedBorner"></a></li>
<li><a href="ENDEREÇO DO TWITTER" id="twitter1" target="_blank" title="Siga-me no Twitter"></a></li>
<li><a href="ENDEREÇO D O FACEBOOK" id="facebook1" target="_blank" title="Facebook"></a></li>
<li><a href="ENDEREÇO DO ORKUT" id="orkut1" target="_blank" title="Orkut"></a></li>
</ul>

</div>

E faça as seguintes modificações :

Onde está em VERMELHO troque por seus endereços.

Depois Salve. =)

Créditos: http://templateseacessorios.blogspot.com/2010/03/menu-com-efeito-hover.html 
modificado por Ebrahim

Marcadores: , ,

O mais novo membro do CBLOGGER

Olá seguidores e leitores do CBlogger, sou Joabe Ribeiro dono do blog  Koala Info e também sou o mais novo membro do CBlogger e meu assunto principal é Dicas.

Pois bem, já que essa postagem é só pra me apresentar então vamos lá.

Como já falei, meu nome é Joabe Ribeiro, tenho 18 anos, moro em Fortaleza, Ceará.
Sou estudante de programação em Java, C++ e PHP, e também um blogueiro de carteirinha.
Cursos? não, não, tenho certificados mais cursos não, vê se pode? Pode sim.
Tô solteiro (--'), tenho médio completo, dexa eu ver oque mais... Altura: (não disso vocês não precisam saber).

Tô fazendo essa postagens exatamente as 00:10, horário de Brasilia e é só isso msm,
Não deixem de acessar http://koala-info.com/ e sigam-me:
Twitter, Facebook.

Tchau e ate a proxima!!

Marcadores: , ,