Hello visitante seja bem vindo,sua presença é um enorme prazer.

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

|

 

 

image 

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é o HTML de seu blog e procure pelo seguinte código:

/* Header
-----------------------------------------------
*/

Agora cole o código abaixo acima dele.

/* menu hover--------------------------------------------- */
#menuhover {
margin: -20px 0 0 605px;
list-style:none;
position: relative;
}
#blogger1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0omFY5abkWa56Ex8KuZkIy1lF9eNJ5XnlhKiEpuJ9coG0woXzLjVwFACYqmGxLeUj2UHDGtxXKx6c_co5Yx7SbQlaeEtMWkzwUXkX2YCYdKaZSU2YlWIfJbGgAeZfq03lZN0hjQ-k3LqU/s1600/bloggerc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}
#feedbourner1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9zXO3wWPo9vGSDbt74fJVkZixuZBZzxfIe4gb6-44z3QHtDI7TrWv7sT5fE5nt-EMw0pMYWx3pC_DqY952BmdLzmf_bN3QhSzxzLE2hyphenhyphentZdROm6PSS4AmawQmkQwf_Uz2r69MxA4h1je-/s1600/feedburnerc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}
#flicker1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA8V145Omfd5k7KwE4jFkizq7_mEw_Ux5CiUQimPpAzJPDUz2mopsZPVtCIHdIrFD6c68eIfGh4GSnYNgZJzF8kw2Sy2FwVDqCWvd80gT04YGkVsDFXZzzxjRJnBMqtcKKNlNbj7oRL9wY/s1600/flickrc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}
#twitter1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNfyHwrWO79yXR7cXbsz48luv0khL5njmV-fSZyTkQCzHRupT_TH1soOmjHEYNoMnCcCD6I5Og_7JEg45jE-E3Jbx8nUAcNpXY5Yp9SNt5UG3Nn0G9A2x6-htYheE0oBcfLaIL88KapygN/s1600/twitterc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}
#facebook1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn48ePLxmrlbD2ycyJ4D369oKfaWlgTZ8CZPjg78gqAqIJOxqlePK49ipSF0Z1gLpHsJz7Mj-Mun7P825HfWXQiE9_X3Gsrl_KFeg45Z2a-GcZ_LrpKzhYuV8am7g1QThu5ke2nCSgd0Yk/s1600/facebookc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}
#blogblogs1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg07Woreeq7KM0jDqMsIgGNSxDiCiZZcQqfd60K2KLXrX1gdhTytlZUJLNI-LegdNPQ5XWJCImjyzezes_aCE2G1zUAyqKlaMlWIFT-CnAv7KyIDM13QDBTsSXSxr3V_oKLdiqu3gq2lD-/s1600/blogblogsc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}
#technoraty1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNPqVxcbjt8BeoNLRWgVhgpEfUOz1imzzFmzAXrcMj_LD4UUtZTDq0Mk6MS2QWZ-h_v3zfW_XMq3RTD6Gr4VkHd9siOGvQLSausFpAVM8FQNdvwKhoywd5_UU17fLtDZLXnGKqdftwdYh0/s1600/technoratic.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}
#orkut1{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzPpB-WdJnOd20-eguf2edCpMACaNeOgX_Oyj_qrYZLGcX7zPovzbB1jbNSwqibPXc4YnpGmApzb5meJjWuPsVX5T0AenLK5UnWr0hZWvxNCpM3Lwz6dvMUYNvCy1LoWlAlseUYaGaNKWq/s1600/orkutc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}
#youtube1{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmhQ4JzMIMbDgTi23CqngZ-gUZzoFDe4R-DscHhc_BzTK_E6N69Vcmt3rbeHY4OQv-sVRz7nYBTp5O5BIaP8AKqLpKb48AVR63gv6Si2GPgt7GKw0aDw4FRnWlAIYuftGQMINPjJk48VSS/s1600-h/youtubec.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}
#favoritos1{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS-o4CAm-xh0WK3rXy6ZCO8e6miUeKZUmiTEQ5mncVlvV4A90wKSYC5OcydQoZrFAUoVjD8yoAJJ2Mao1FpsSNwMOcsWADonKYQoYjYrwdAajJo8dsHh6WM-lrQI7eXhKwBhL3ZfBjrmm3/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/AVvXsEge32mQs_7pkrBlskb3Vm9vzSfcSC2bHOg2D5QeJKIlxqA4VEwD7eiwFJs7MKMPW6MLlSRP60gPIC7E0y6IHL4WCrBD9_7Umc8AWcdbxn1yRfCIckiEqLxrZrTazJpTczgfu9V9-jb5aeSX/s1600/blogger.png)  0 0 no-repeat;
}
#feedbourner1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMkRb7nPPNF-Ac23vVKVvcEggK2iUFFkS9muhF2YsejWe01RLAfJIylOAqGmeuu8kosPqv9jPXeJqRn2cELm2MJ1S31AQuc5jyiYXWn-lhnj_eIKw2tVPkMQAiGJVPobhivne_pMSHAJwn/s1600/feedburner.png)  0 0 no-repeat;
}
#flicker1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaBSdmQkUKA641XOqFMdtg0DtubpCYVTrh6ybyh8zD0Scdut-QU9x7zO1ckGwnALPjkKbo7EfOJ4_D1Q5L7_vRVbBZ_fqKRUjn06YUtZJ-Nt-s75-X4s7oP5aScMIbyPxTNV6TslYC9j_R/s1600/flickr.png) 0 0 no-repeat ;
}
#twitter1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ9yKF3kBkqGzvUU_E0mNerbv0kSckS7E3cCiq9KhM5sIIg98jVPs7og3AL8wWpT1NYirc4lZ1ILVRy1Jh3wQYYGvAALwCG80xNC_Mfl9sljEAkOkEFLBARZPI-dpok1TRe4LkAmli7mwV/s1600/emailcor.png)  0 0 no-repeat;
}
#facebook1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguAg0GxPrZLjFpw61uiHcmvsS22gm0ZTbKayGbEH8Gqb1GcRAA-f2IRMXKOOC4pizKilP0Z_xlQmynVMZzTykQbkF-DDvU5TQ0SC2uF45DLBAn-jL836Loausu6pppOyvjPrqZ96-3Wkj9/s1600/facebook.png)  0 0 no-repeat;
}
#blogblogs1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYZNvPk-81Pv9fB0hxcjEaaqNDLYRAnxbC4KCWtwgo6JW7D0wYhgqMFsYcWyHnSdohAG_K3Vxxk2YPtvXNTGiJPfFbSzE00XkloomcGhNSGp7wLi621o6j32tLwYoI3AAgNhHQH8_oke72/s1600/blogblogs.png)  0 0 no-repeat;
}
#feed1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimq_ra1mz3cVYFnlKG7TwN28V78D3SMyd8aClzge9G5Fw-8GsgDPZjNReu2VP2n6VFfX9DGYxuJOvNyXuJ0qBu_w5Z-FuMRLKD7ySVUVyid0-GmDOu13mMLqe_LjWBpJcf4KNsnooqGfxX/s1600/feedcor.png) 0 0 no-repeat ;
}
#twitter1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizafONHg_q0dtqRYG4nk9usYDffcXU53FP4Hiw6YaHthrD8V2g0KT-zGrdy5wx6wOZfbI9mwdYZ5meN84CfFQ9C5HG6OnPWycz-hzk8DOdHr3ZmXUqCHOxL4EQnzNqednbEZHJcJL6m5tz/s1600/twitter.png) 0 0 no-repeat;
}
#technoraty1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDBzo9wMaFQ_9BelbTBxWkcuYlY7u7TnghuNCRQB5e_gNY0Xuvrg36s3fgdLxObVzWYuUHmooTHyYesDLvSVQyb987WGOMkOWjXZEuYIWf8TU9UriH1Rn70x6Uq2SW69GL7tiPK9GUHv_Y/s1600/technorati.png) 0 0 no-repeat;
}
#orkut1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjAgYpOvGcu_454amE_7ULtYK43YiS6VLngWlIeCCr4axzagOs3MQmpXfb1ZkvCmqOV0vEmBeSKHICWxFcgBugUcN4ncdXmNgeOoQmA62HmXAom75v0GE0jsdriUzA01NdbywhJ_xJksdB/s1600/orkut.png) 0 0 no-repeat;
}
#youtube1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlWpp_bb7_1RLsTf_wykgRtrjo8U7XTO0DWThNDmpqHt2m1sRwPNssnsapW_T_k-8wTAa_NLEyIC21RQpM3oDCb37TIAa0u2ygd27lZdlIMFEoAlHnrUaj5PJ1LHdwTtPB_K2qYuJWN6St/s1600/youtube.png) 0 0 no-repeat;
}
#favoritos1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm6TsmhNaOO2kYL3qv5GP2Lkap2mKakT8K1tE8dfcWHqePCnlmTffQ5EQViNTsB7RnJcIleytN0i8bm921kz2pnpMdAqveKRShI6EOOU7ubLwUdw_9Uaml8weCSwUJlbDXnVRLLZOIlAQW/s1600/favorites.png) 0 0 no-repeat;
}

Agora vá até "Elementos de página", clique em "Adicionar gadget" e clique em HTML/Javascript" e cole o  código abaixo fazendo as modificações necessárias.

<div class='section' id='menuhover2'>
<div class='widget-content'>
<a href="https://www.blogger.com/start" target="_blank" title="Login"></a>
</div>
</div>
<div class='section' id='blogger1'>
<div class='widget-content'>
<a href="ENDEREÇO DO SEU BLOG" target="_blank" title="Home"></a>
</div>
</div>
<div class='section' id='feedbourner1'>
<div class='widget-content'>
<a href="ENDEREÇO DO FEEDBOURNE" target="_blank" title="FeedBorner"></a>
</div>
</div>
<div class='section' id='flicker1'>
<div class='widget-content'>
<a href="ENDEREÇO DO FLICKER" target="_blank" title="Flicker"></a>
</div>
</div>
<div class='section' id='twitter1'>
<div class='widget-content'>
<a href="ENDEREÇO DO TWITTER" target="_blank" title="Siga-me no Twitter"></a>
</div>
</div>
<div class='section' id='facebook1'>
<div class='widget-content'>
<a href="ENDEREÇO DO FACEBOOK" target="_blank" title="Facebook"></a>
</div>
</div>
<div class='section' id='blogblogs1'>
<div class='widget-content'>
<a href="ENDEREÇO DO BLOGBLOGS" target="_blank" title="BlogBlogs"></a>
</div>
</div>
<div class='section' id='technoraty1'>
<div class='widget-content'>
<a href="ENDEREÇO DO TECHNORATY" target="_blank" title="Thecnoraty"></a>
</div>
</div>
<div class='section' id='orkut1'>
<div class='widget-content'>
<a href="ENDEREÇO DO ORKUT" target="_blank" title="Orkut"></a>
</div>
</div>
<div class='section' id='favoritos1'>
<div class='widget-content'>
<a href="ENDEREÇO DOS FAVORITOS" target="_blank" title="Favoritos"></a> </div>
</div>

agora estar pronto seu gadget é so salvar.

cretito home templateseacessorios

2 comentários:

Francisco Oliverira disse...

O tutorial esta otimo so colocando uma observação não conseguir fazer esse passo do gadget desse modo ai entao coloquei os marcadores das imagens apos os link e nao antes... espero ter ajudado

Brenda Lima disse...

Adorei, apesar de nao estar procurando por isso, fiz e achei demais, mas removi do blog, pois nao era meu objetivo, parabeéns, deve ter dado mto trabalho!

Postar um comentário

 

©2009 S&O | Template Blue by TNB