Magazine Emarketing

Ajouter un espace de partage flottant à votre blog

Publié le 18 janvier 2011 par Aimadnet @aimadnet
Offrez à votre blog un espace de partage !
Ajouter un espace de partage flottant à votre blog
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 !


Vous pourriez être intéressé par :

Retour à La Une de Logo Paperblog

Ces articles peuvent vous intéresser :

A propos de l’auteur


Aimadnet 40 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte