Danbobi Download

14 setembro, 2011


Menu de Redes Sociais com Efeito Hover



Estava eu visitando blogs e achei um widget com menu de redes sociais com efeito hover,é claro que eu dei algumas modificadas, é muito legal veja a demonstração abaixo :






Legal né ? para por em seu blog siga as instruções abaixo :

1-Faça o login no blogger
2-vai em Design
3-Elementos da página
4-Adicionar gadget - HTML/JavaScripit
e 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/AVvXsEh85gktMrn6dbVZ_TdpNVT_4EaCPklXaPy22p35nusMbM0qM9PUZ3uVkSLnBX8iVFJxnQqa8HefQUQHQw1Mph6AGnPKU3scwuFC7QpVr3TWBkiGHL89yQh5aHnMPssX8vSPABNWDGA1V-lS/s1600/bloggerc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#feedbourner1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnOY8t9ih_zyrzLAk4KSNSDrRCZ-8aUtYQ5Y7e1D-5ilIjkPzvBOwtobKkYD83sPhBz1ytTcpXNblzfqzx_D2m_Kdp9g-cAobq6h6icMiD6Pf9q7jwmEWdOkeWeYVYnG5rjgG0mVRHvYu6/s1600/feedburnerc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#twitter1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEJKRcpVUvZCF2NZEym-3hZ8H3MxPWuqkbX8Z6LRycH07CWp8_S_94HPrg25ijh3uXpAH40hnZoljeAzcHOC5R0WAOZq-_eTNSOJ2XbUDpMVipw-HW5N35LGXDxnB3vlFc0nQVNLBtISZt/s1600/twitterc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

#facebook1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP9CimQhg4auLw0vRVkACH22NDlbYfwasxrSkJavJ6x68LQEIKBP5BvGpi48igDgZVwI5tXEEBVeGmWzbD143M-v6FIdD8rnEZSc8969TsSRdv7ioLbNva0BjfeGmTihbXD4bdb-2A9GSG/s1600/facebookc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

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

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

#orkut1{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKkc-p-H6uer5S7Nu746zsbzzgzTTkJCfg-NMtyp6mPxmBi9tiVZU4B4UBhGNF7-9TtcblrQi5U2Dwlkef9b2XWdCcDUZ4LoA5tT-wz8alYQR63-k5_8shOvtzZH8zXbxUp2Z7Cs6IBT19/s1600/orkutc.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}

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

#favoritos1{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcpF9pWV2thFlgZU3z_Ak_CCEEFMWCfsuZxeETWrNx9N5Rn9YMhtEC2hkN4WFxpNwOAgsH_ve-csuksCk_Z7V2n3IZTrFxhiZFtAuwfS1A1bGXh0RJUwxWGiBDvDv_eo4eitXwZf4YpEb8/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/AVvXsEg6sXJliwNzO6BpZmXBw6yZBC4lwUQODv4BIyuWn5mmCgnWtbY3U2okCtemsYipmqYT5F8GgPMsimKtPlygh3xW2xHTBSjIbTPXaKtVpyOd646HI1a91xYkzgnI8Zzri_6UGH2Kr4draaCR/s1600/blogger.png)  0 0 no-repeat;
}
#feedbourner1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkz6puyFJnKaqXHKAdmu8zEEzWW1JQdstByVsREXi-_5VIHvURAQE5ysclV09OUbLQf6zNzTFynVdobiE8ENKgYg9y7G6tlYuIf7Kfh1mg2RlsKTlftLPJSnl6Cu0nCeh9zBGae3bUhpJ7/s1600/feedburner.png)  0 0 no-repeat;
}
#twitter1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNWWf3vcMEYTkatbiNXsngjesLDckJHnotjW2YNJGzKST1Xk-gcJ9UYAaTqR-eTOD369JXiszkKn1txK1hXjjz8GT4UXdu-cpaIYDjcx5WmVyv14_Y36TleiymmZmJ4uVhYwafIHytGLi4/s1600/twitter.png) 0 0 no-repeat;
}
#facebook1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggQvM1JfGA2yQvul-A-IqAfpzMJFT9vfC_i1OdkB0uXNwM4kF6io0X5Gux9nYV13NUlKbXLnKPMSFzWd4gUrLq2bh6xuWKB7_MjtPCajV6BZoL7bIJqbc2thwbtPPrfpQFbduIf-rt3dDU/s1600/facebook.png) 0 0 no-repeat;
}
#orkut1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgojxd-MGdPm3OIwDajJIT-QmjG52S0JwXKvQqTCmqmRQNAD-OBo-M3xN8_wf1nwtvJ-cSrHv5HAzo47e_jELfuduKHOSJ7xFOBb0ydOrKlS07jNgz-daHzstY4G0HUd5PaFleZ5BDrxQao/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>
E faça as seguintes modificações :

Onde está em VERMELHO troque por seus endereços.

Depois Salve.


Temos:
Comentários (0)

Postar um comentário

Página Anterior Próxima Página Home

Menu