Redes Sociais com efeito Hover

► +A +/- -A
Olá caro leitor do Tecnoblog hoje venho ensinando a colocar este gadget de redes sociais com um efeito bem legal o " Efeito Hover ", as redes sociais, para seu blog, servem com meio de divulgar seu blog nas redes sociais.

Instalando
1. Faça o login no blogger 
2. Vá em layout
3. Adicionar um Gadget
4. E escolha HTML/JavaScript
5. E no seu conteúdo 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>



Faça as modificações nas partes que estão de vermelho.
Vou mostrar um exemplo de como é ( ele se adapta a cor do blog ) :
Se quiser retirar alguma parte do código e só remover a parte que consta o código:


► Postagens Relacionadas:

4 Comentários

Boi Passarim disse...

como faço para centralizar eles?

10 de janeiro de 2012 01:11
Caio Vinicius disse...

Olá Boi Passarim, para ajusta-lo e centraliza-lo você terá que usar a opção, margin-left ou margin-right.
Espero ter ajudado.
Obrigado por comentar

10 de janeiro de 2012 08:40
BoiPassarim disse...

muito obrigado valeu

10 de janeiro de 2012 19:07
Caio Vinicius disse...

De nada, Obrigado por comentar.

10 de janeiro de 2012 20:58

Postar um comentário

Seu comentário é bem vindo, mas leia antes de comentar...
→ Se os comentários conter palavrões, xingamentos, ofensas ao autor ou qualquer pessoa, não serão publicados!
→ Não Contiver outros sites!
→ Não conversar com comentários!
→ Não conter propaganda!
→ Visite o nosso termos de uso
Obrigado e volte sempre!