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.
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:
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:
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:
4 Comentários
como faço para centralizar eles?
10 de janeiro de 2012 às 01:11Olá Boi Passarim, para ajusta-lo e centraliza-lo você terá que usar a opção, margin-left ou margin-right.
10 de janeiro de 2012 às 08:40Espero ter ajudado.
Obrigado por comentar
muito obrigado valeu
10 de janeiro de 2012 às 19:07De nada, Obrigado por comentar.
10 de janeiro de 2012 às 20:58Postar 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!