Ajouter un espace de partage flottant à votre blog

Offrez à votre blog un espace de partage !

Dans ce sujet je vais vous montrer comment créer votre propre espace de partage, sous forme de boutons images, comportant des liens vers des réseaux sociaux comme Facebook, Twitter et Delicious. L'espace de partage est totalement personnalisable, il vaut faut que quelques notions dans le CSS et le HTML. Pour créer votre espace de partage ou Share en anglais, premièrement, ouvrez votre compte Blogger, puis rendez sur la page Présentation, puis sur Modifier le code HTML, puis recherchez "</body>", à mettre juste avant, le code HTML suivant :

<!-- ZEROCS.NET: ESPACE PARTAGE -->
<div class="flt-wdt">
<a href="http://www.facebook.com/Page id" title="Join me on Facebook"><img alt="Join me on Facebook" src="your image" /></a>
<a href="http://twitter.com/Your profile" title="Follow me on Twitter"><img alt="Follow me on Twitter" src="your image" /></a>
<a href="http://www.delicious.com/Profile" title="Find me on Delicious"><img alt="Find me on Delicious" src="your image" /></a>
<a href="http://feeds.feedburner.com/feed-address" title="Subscribe to RSS"><img alt="Subscribe to RSS" src="your image" /></a>
<a href="http://your blog.blogspot.com/p/Contact page" title="Email me"><img alt="Email me" src="your image" /></a>
</div><!-- End -->

Maintenant recherchez "]]></b:skin>" et juste avant, mettez le code CSS suivant :

.flt-wdt{
position:fixed;
margin-right:10px;
right:0;
top:40%;
}
.flt-wdt img{
float:right;
clear:right;
margin:5px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.flt-wdt img:hover{
-moz-transform: scale(1.2) rotate(6deg);
-webkit-transform: scale(1.2) rotate(6deg);
-o-transform: scale(1.2) rotate(6deg);
-ms-transform: scale(1.2) rotate(6deg) translate(0px, 0px) skew(0deg, 0deg);
transform: scale(1.2) rotate(6deg);
}


Pour voir la démo, cliquez-ici !