Vá até "Elementos de página", se usar o antigo Blogger ou em "Layout", se usar o novo Blogger, clique em "Adicionar gadget" e clique em HTML/Javascript" e cole o código abaixo fazendo as modificações necessárias.
<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/AVvXsEgWoXr9nLcbgIU8G-9KwXoItrLFDEH0AMi9F0lR34pUrBy7kAVczgWt4yNiWHeBtlQKQdfa3avzL_lu9b70vKn546WPQQMlBrriOWDgx0u-SgpqBRbggf2bhhTlrDoQnBC4hyLVX_LEn0VR/s1600/bloggerc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}
#feedbourner1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSpJLGlDQfU15l2HRE5Rg4wETMSXsFds0y9FIld2snyaEWKL7Ezm_5REzTBQe5jU1DVJLBos9gatfrCvNRDyXjNKt0nE7h5P5R-k5FIosfIdjzhpfOfl1s0kX0ixWQiqqvLWSd9q9gwsTJ/s1600/feedburnerc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}
#twitter1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSM46eksWpDA1DjlPkAPAn_12YD65rY3tlCHTn5Ukt4_hxZllg6We7pF4HNQPUx3q10zTL8nPwqSJ548sbK-5jVfF7cOBsJa-JUliUdJOeKwP21eVDK85tZdnpTv_P_7MEGXIRgS87I4u4/s1600/twitterc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}
#facebook1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXN5w8WccK1Skia5XsI5x02cyh41MMVejFhacZZpEq8c4VIF5Te2GRXaLw5yaE-c_B6B6Z4qOGV7l-rgjZdG6TDCjPVmyQxZ_sQk7F_7niqNH9u8_NfbuwHpgQeyBRv4ILYrrOgByqqM5H/s1600/facebookc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}
#blogblogs1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBEFO_SVhyphenhyphenS82LEvkz2-WFZXiyiHFeC5kvknhExljLHaLxXhLxRyGXAcwXWk9goEp6SrYl8Y2N4Zw8NHKek1UU8uOaA1OOHZXZkJXtT1orPdyNAvttalmr1hc8SuFaHmxayAfcPlbbyUtz/s1600/blogblogsc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}
#technoraty1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCPPLcjLL44uWsviUGnPh05oivBgyktamfwuomN76UKvbgwKQPdzfzU3Ib6Cbecv-vY3ndQy-yn4lgTMESoJaW8xJhepdTl6JQEC_AFx7052bCfE_JUKGs9J0n-vB0R8sNkcD6KolSTOV9/s1600/technoratic.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}
#orkut1{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaefhPamP7jWXPFRWfMeRVtwjwzYfzpl1sHLsRtdnctMMuTEh4itJIoX2gWTE5rDjkSI0flAfXftJYw-pPsrw709YBBVIVjdL9ckAfyQD-mmmWAMj7mmC6Tmlrq9sBMibwsxVnD60SUcWx/s1600/orkutc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}
#youtube1{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1lwTqBqePoSN2QQM-4pCKKjC1Fq50a4vlYfO-YqgEZM6KVA7_i651Adh5Zchor8LBtzvHc-CZCe2CAhnz8z9AvkvOjCrCJIaMTjeSSgQbCCf9lBpN2uxh-Qw_at2N0OPL2pJPjO9vvUs/s1600/youtubec.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}
#favoritos1{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAQ8V9vY1_vkGTeA9SUm9iZ5vsd6RCpdqvxvRWMCt4DRGwddIbLQvHcJHnXNvi2vYNWg7jdLjoMNRmKDJMG4T-2w5XQKOTaWv1Jl2e8hVJgqySO1y0uS-wWyg4dOxq1SRIcP5FgAnEgY6R/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/AVvXsEi2vZiSMVnjW35DZlIiZxy6ues7VTq8jgzmR0mUwlNTsB7aSkRk2WeNnb_97CCNyGOAiY_ZbDm9EcrQk-TJz2Mreh6J-npDsdboYAQWXwhrfknytGdXg5eKM5dj4EvA1fowfDq6491VnObf/s1600/blogger.png) 0 0 no-repeat;
}
#feedbourner1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7LWHdm7BkQ3CZk5he2hWUnt8Fn_wBOCTDjGapixRUQzzfs_uB0DxkrKEuG3oS8gbmKBvKFVtIB7b8Gbl_V_BvMhdWEsRsrurnN7stSXZ6scj1UIUD1QGakwpIFZtZ6gzimpi6K0h5acXR/s1600/feedburner.png) 0 0 no-repeat;
}
#twitter1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidYoMKRUwrnrm85SvHVMh_IGGkKEck8OWdirvq9RAZ0Gble6p1c-hDhNXFz0NXkq3qN7W3j1ZsrqVLmEYIMDq54Uycr0UyRH-f5LBHCNqW75Y-EYa3jNCi3prLNABCsIcUWDcD4jZJZfi5/s1600/twitter.png) 0 0 no-repeat;
}
#facebook1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbtRq9IywUwcHAy1bJX3UjEWqou17X1cAUPy5pe1SR37OkiOHAVCom9Aa5DnvjhYWrjNlnBR54I8D_5MRdl9oVAH1qgyl1DDHm1g0tymAuNObD71EHxXrDNreIenhJIFaG7PAi7me90tNZ/s1600/facebook.png) 0 0 no-repeat;
}
#blogblogs1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvqCjmjUN1YjjmVGl6w9Hg1xDurokjdo1PBeNSaicgE69sORA1rMoxmB7e57Af7zcfcBlqRfAyFAWU4LBxuawBKMQtMvV6d30O1kMcwIXgvMeAW9wYPSVp1qUbyKrwadi-AQtekM0X6Hk-/s1600/blogblogs.png) 0 0 no-repeat;
}
#technoraty1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs3ghFKKiUdYhriF6FKpn3AGznPuqJa4XbYDPmlOcjw0KuBH2WXT6WXHsRYB8mnqakAQ_WOnGSB0tcR4LDmK0PTma2OUFF2zDq8HW4GLdCsTyUi35cpTsZotZvtizit2kJ_Ij9OZcE0Pgd/s1600/technorati.png) 0 0 no-repeat;
}
#orkut1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrRcPtKY0gxq3j-jnFHIyhVGlJGewzGm0M8GMBKq4cZfe1xN2UbCGZe89afJbw4uZm8iJEL3RnVntojf_TO97cKPvNRrYeQtqDyS3-w9yo7zJcXPqoD7YWp-4ehDU0WUSuzmewotpi8x0e/s1600/orkut.png) 0 0 no-repeat;
}
#youtube1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMbAPN0caFCMe2xINO68JJ9sljWKXNWg318aG0yIKG_Eb-RtfUJRW9NeWcyGDvehZ7ygjucfc9BIYU0XB_85QsrOHMmEhtKkRsETihkD_Tkuk_Gu1nF9ZBQaFZIaYRzF7kAOmxEY7ykRth/s1600/youtube.png) 0 0 no-repeat;
}
#favoritos1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivzoKnY4fMFyvHiobiAmCGJc-GFZx4kh5iOqpBQUZJLiMBis_cINpsxQgyPmVHD4FxpltqZ7yOP6JwnmOoEXXEaaKG3jg92I_gi3hUzbRn84gGk_WWYdeLMqTDQLcz1Esi49_c3SEuBKRd/s1600/favorites.png) 0 0 no-repeat;
}
</style>
<div id='menuhover'>
<ul>
<li><a href="#" id='blogger1'target="_blank" title="Home"></a></li>
<li><a href="ENDEREÇO DO FEEDBOURNE" 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 DO FACEBOOK" id='facebook1'target="_blank" title="Facebook"></a></li>
<li><a href="ENDEREÇO DO BLOGBLOGS" id='blogblogs1'target="_blank" title="BlogBlogs"></a></li>
<li><a href="ENDEREÇO DO TECHNORATY" id='technoraty1'target="_blank" title="Thecnoraty"></a></li>
<li><a href="ENDEREÇO DO ORKUT" id='orkut1'target="_blank" title="Orkut"></a></li>
<li><a href="ENDEREÇO DO YOU TUBE" id='youtube1'target="_blank" title="YouTube"></a></li>
<li><a href="ENDEREÇO DA PÁGINA COM FAVORITOS" id='favoritos1'target="_blank" title="Favoritos"></a></li>
</ul>
</div>
Se quiser mudar as imagens, mude todos os códigos que estão na cor azule na cor amarela sendo que:
CÓDIGO NA COR AZUL: imagem que se vê
CÓDIGO NA COR AMARELA: imagem que se vê ao passar o mouse
CÓDIGO NA COR VERMELHA: troque pelo endereço de seus links
Os de cor verde, são os botões com efeito hover( ao passar o mouse) NÃO MEXA, É APENAS PARA SE ORIENTAR
O código em Laranja indica onde e qual é o botão específico. NÃO MEXA, É APENAS PARA SE ORIENTAR
Como colocar Menu de redes sociais efeito hover
Deixe seu Comentário »
0 comentários:
Postar um comentário