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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs5s751au0wSUReH25CqpzirTvpUPhofjxDuQPYjYc5oE715CO_n4Q2qMclhNlpBLwZVHINR3Cxc6LdKYlWay4_qyOU4xxllLrmf6tfbZCDg6oVY0CpaKbp8FMI3Gq2BlWW5OWjfE5RTh6/s1600/bloggerc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}
#feedbourner1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilYNl6cDrTbs-Ssf89Zqxeq2UrbyasEl3BxboPaP_Y1Rjilht4Y3WNHnI66acRbULvbaHbr5v4fJd834wU0OzNBc5p3qOLl94U0z7jSNHQd23-XMUY2unLofzASCzU6yKQo17zwn4k6kAw/s1600/feedburnerc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}
#twitter1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikdjZyYvFX8AhN7cAQot-HEcOQio1RiedjMemJNyLLzNSAf-iqn2LKkD2StcB9bADEF0tk6aPD3rOCPblFjTUD3THLMOFtG1aCF44wetoJmvU2bv9VBLYSu8NYuqXaFbOEtTqTYzDAEUoB/s1600/twitterc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}
#facebook1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBFPvLaF2K-dBqMxN237f6Eu3x8gwb0GHs9Qh09sCAhwRiD2eML5of1ZgjDlgw-vWM5LxnOqTIgGxzgpKQJT0LStpHMF9KT-ZIf-o1OXjFR3Q_yGLeE_yPKyoaZA0gQtDZnNIJDWcG1E1k/s1600/facebookc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}
#blogblogs1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS8yDBzV2WTDbu3Nrzlx-rfrj6-wYNRozjoega39G0XQJSsdfLOgcaKFMBm_cOT19vkuqyLIU1D8BZwgwA2oTthclw6Sso2p8EE65QSBUx1Xz4OcwAO8-fd2_DEUZ1d50TmvSPK1Rq4own/s1600/blogblogsc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}
#technoraty1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWzLK7EEi0ghpJV7b9aIXTca_3pA6DxNg73UpAug6bR4jhASGMKuR2GDSNBn9ZL9br790RJcjarPJ6-0Pn94DR_JOVosVzVobmJXvEMexLVbso_1AmKItYZGO5GdSCftripc8x6z8E8X34/s1600/technoratic.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}
#orkut1{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitZeKlR12IsTe7WIDLhXEA2act04ahyphenhyphenCzQZTWajpM6cy8Bc2_R78k7M6a4_w2kRR82EWKYft3FJ6HU9ZgyKYozLMKL4HoEkoOVzGZmQ9jzJ7yBkMv7Hb4qxrC1A_K2mvdWXpTwNq_Q5O0A/s1600/orkutc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}
#youtube1{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXEM7HtOSEoTz9VI9Q9R8haKQSQOtYTB34gGQszxTpUqwMRUiDq-zys_pc8HzjyG3hbCKdysH0rRRfW23I5RzzTZ-zZTsXZoEVTiB3lis64_YEo2w-g0vQksEUAcJ6fxl3MAl4LA5nX08/s1600/youtubec.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}
#favoritos1{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizsyjHdybNEgD0iy-azNN1-hVnNkCNNuy7MF8TCuyjWBMAeSYU6zREKRHuvZJeCB5OfqIJ6LDUy4-17Ts-v-6MOpGwdOL0QLiK8SQfIS2f5m0TcQeWXa9cZ2yHDqzrFcuAnv9LTJ6nn2mP/s1600/favoritesc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}
/*hover*/
#blogger1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXyJCb_r4MJ-RYSWEGQBzL5cL0RFJTFyCMb8LyGXroEtXmXOACxtWy_Eu-9TufTkHKJxWxQecD6okA08JqbVVPCojOExS3I5oGhetthWQIvfdym5Rp2tWQtoXVF_xay9jdYFFJyBLuuTDI/s1600/blogger.png)  0 0 no-repeat;
}
#feedbourner1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjChelMBeG_luMfk2tLlkASAYW9K43EDroBhd6v-caMgEgbooraKK1wZB9yFnyzH1_Dpg4DDwgIopIjBAw5n2QLNBiT9L2cxeIeCrMYOOAVF6Z_D5m9msTpex1cDMDoLIs87d8_kF4J0zbm/s1600/feedburner.png)  0 0 no-repeat;
}
#twitter1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC3T3au5J_dbfyO8XfXkDsoN5EgfiT6Sae5MyzUU0g_WJoozqZMwpBDmZGcLSADpg4dg1JonadnsKyDgAmn4nZcYatRl-Ygl8EnFHKi7TwRifSQaDiZ1rh9eCGWFe3lZ_zOygwQaysgi0i/s1600/twitter.png) 0 0 no-repeat;
}
#facebook1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_A_KPF_RIqkhLIR9w7Ri-7IKTW8NATNHw0f2IcJm0DSG9L7enLAWY26RUMpqt2HtBzQQT7icae4NMhwn2p0OtoiKmg78WGLguhAS9h8JV81bUM_GCR73pJAx_qChI6V6wanq_20KkQ5J_/s1600/facebook.png) 0 0 no-repeat;
}
#orkut1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw7adtCsJHQseTIyW1zdicerw479Jbg0UzOfZCsjiVfOL6_2hrHZ09-GZ1Ddk_V44EqO1tWQStpLau2q6Bc7GP-gZ5o9ifeeEUov54EHzIbHsPeZlKbM3y-34WGDfM3g2aQ5KUBn1g16CN/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 às 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 às 08:40
BoiPassarim disse...

muito obrigado valeu

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

De nada, Obrigado por comentar.

10 de janeiro de 2012 às 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!