Menu com efeito hover

Coloque em seu blog um menu com efeito hover. Ao passar o mouse por cima, os botões do menu trocam de cor.

Veja AQUI o exemplo.

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.

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/AVvXsEiENw8ZoiivqZTpe-0O3Czl6FfhI2hZOEbaLCkMxs-e87IkmOlrVu_XOIYnduGIpByjNnllvEs_aubqEY9EN8GuA1_iO-WVZMqy-RiAdnME8BYxeaQLVyd5J562ZeTRi8ZWs3_WOmYmm5gk/s1600/bloggerc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#feedbourner1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1-_s704L2UUVLgf7F1T1TpBW8u4EfV41qkyguYFyTawdm45pu_5Bocx2PSjKuQVdjllGUlpLgmgCgX6li-up6KUstUwE4RSLoiuY8rD8b1dRITYRgXyEOh0cS8rLjChyphenhyphenm7zEp7QMgTukA/s1600/feedburnerc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#twitter1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7g6d4K_WAJ81hDtysc_SpEbYhx30O1FtOs6nxclGK5Dl56H7uaMHM1o2T7h5qruTAI4NZK6O09-TINW_6xd851B4zS6qmQBEnSyMgat1A-kjW7-xkwIuURpUTCozef1MYDEA_QNRrt8Al/s1600/twitterc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#facebook1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoZyQ8tb9-1NsjE5PXRA9qCcYI7RhzNc8xE8WRlk2pQ-ZZyneAtCmGqwusBBMWbelw495V3wwgvJVNTd8u4n5ktJWLuarkYWi8OD-c8LLdBOnSKUJ9LLbj0MhYAEcfeXRUDNCJj2X73Dfx/s1600/facebookc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#blogblogs1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl2xYUGYLO1QiU6vk8QXgfulmQke9srIiI45ylMKFKNsY9TaBIV3sbqOrZzJ5yv30G0yIrFi7aBStwAvXdQ8BgHEszaOZeC08Pd4E9nlTMDJ5vOCM2CAUNFPItekXt976E6EybYTKXN7Xk/s1600/blogblogsc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#technoraty1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOu8p7UmrAI0C5o54TGpaAmYYnujyAwYzMK__5jYsYuL_lME7XQe24B50LjZeq_oqv76ot-XuArQDWwGZOWiVR-7WmFwqZp9DZKKqApdLhn8rB3dt1npkavroW6cKTbPMNQEhAxEBaoYVh/s1600/technoratic.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#orkut1{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjAk6JJo1EsUecIjL6a-U6CkuNZJmekMdpmdHIPeIMKoyuVWNDjejGaBUvHlmAKgP1-YBRVrbgXnWCa3bHtjPV4hqTC7FH_oqDZ0dsoS548l3su89HgUuOVoqt8Un8sOuyaCe2NOAY_AQ9/s1600/orkutc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#youtube1{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhank_zJAqpgslyMtMK_xbOKU3iyXlI-DCEPUeC578Y1icvoB9Uc1og6Exa_oqIKJhc8Y7te8NNLnlzSAN5_jTwZA4LlY90AecIc6RI5pFiWUmIWRBh92OlCQ8ZFJYu3Fz9pGq8BqWJ92g/s1600/youtubec.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#favoritos1{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4tf0pX6Emlgj5kO2tXdrFQIrVh9dgQsFcc2OJwkHQRuTZksqTC_MoXylwSU6xHFCTlhGZLvckBopRK6_smAavmkWboaTPr2wq6MTP900n6dMK3qHa4se2y21pGQSNmfBe7zvNFNbCHMPA/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/AVvXsEijVPM-BJ7OtEsL4x2Twr_6R9zAQBxV5EJWzUVm8GCFVuT8tRMqj0uBVJhJYpMOx-mGuaVGwkLISsBhvMWeLRbo2WhYzuL1kTjCRlVzplM95HMrDA4YgmL3haIf3Bxstqv8mUDq9xQyAvw_/s1600/blogger.png)  0 0 no-repeat;
}

#feedbourner1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigTrWoqvF3ZpiJEIeWFYU64OA3cB33QFwLFGp79Rf7Jxy6B_WTzOTL1STqroH8vMDcd8kCSHP8Em9wUXEVf8rVMUC3m7BQSdOJUxqZ_Ie8EqpepoL4d4a_9-nx5gXw2Zy8BNoxYS-cbEr3/s1600/feedburner.png)  0 0 no-repeat;
}

#twitter1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCgDQ_LJwWTDM5PxTsUDLWJPu_30rRwFxMY34g7UW_jHOXIS8_2uUvtvBv3bDe7EXtEdEuDuR_vMfj7U-h0QtYYAHBSMgzjolFN2tO5gsKlkcGE5FY3OiiSxdH4gzAMLYfQTNLOV-uXeEe/s1600/twitter.png) 0 0 no-repeat;
}

#facebook1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifFMc4766kP_zXG7-UXBVTK00jo9JBbNod6a6qk8Wa61PNR9j8f39bIqyIvJqeVIUTFNHOF_-_7c_f10N9IM3jvBcaUEUIH-603t_tmzmLqvkff6EP0oc2Vj4e_Iffkm4gfrY0ksXhjCtG/s1600/facebook.png) 0 0 no-repeat;
}

#blogblogs1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyXIKCAM1OqDOj9QmwGIBdNWTbDhO_MnOHiEq-uOm2wZzXVYQlquogpQspb993qfJbn8BM3aPgiyzYdogsNid2RqgWrQjps8bvJc8tTXHc_yi3HiayPdFYplHNUuw1F56oQjhigEJIZzJ_/s1600/blogblogs.png) 0 0 no-repeat;
}


#technoraty1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWq4LvYWyDlHvrhfN2K6RzJGWxaONEX0kctZI4D6Yeq9Q5pNu3OywqkN9em-Wa7EPsewcMuv4_FET8r3Uzjj8vNz4V3LclwGzxhEYYRuQI48ez-vtEpOj5I4v4vc2qc5h3nwrMH9K5WYD6/s1600/technorati.png) 0 0 no-repeat;
}

#orkut1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJi2XgHHJE2yGXuQDLhu1u-vA-yaLJf7ZGdA-dk_UIeOCcGdbcluavTQ6CPeLYBxh2_AMKQnOeM_IeM35gcqX-kP3wOj8W3bbw_WdwB3u7QwvS-IUzlHidhgJahatK5RQ7BFd1pwFdU1Bl/s1600/orkut.png) 0 0 no-repeat;
}

#youtube1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib9Tq5jDrbOzyA6_P41L4vz-BQgWQdPM6Ngy_Mh7H_Y_6PR7bXHI5Oz5eOkoqeA77YxNpw_gyanFSEQqGApOP518Z6BYk3H4usqddtK94oRoHaic0i_W70B97s8cR6lIIntg8C_Q8pcbXr/s1600/youtube.png) 0 0 no-repeat;
}

#favoritos1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZizQ1B7Vs4kHDHD4tES9Qz1J4FEqsLwQSrfkx7XC0EQZsIyxb4MZ3zj8LRE-UoM0PXKjVUfmkHrYLf9wVGRC40zuvZCJeW-2iU8vjwAjbrDnoOqcT2hcg3QBZ00iTeuJ-pIwwLK232fgm/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 azul e 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 rosa indica onde e qual é o botão específico. NÃO MEXA, É APENAS PARA SE ORIENTAR