Metro Social Icons
Je vais vous montrer comment vous pouvez ajouter des icônes sociales métro de style  sur votre blog Blogger. Ces icônes sont constitués exclusivement de CSS sans utilisation d'un JavaScript. Il est livré avec effet de survol et une allure élégante et fraîche.

Ce widget contient 7 célèbres icônes de sites de réseautage social. Ils sont - Facebook, Twitter, Youtube, Google+, LinkedIn, Pinterest et RSS.  



La démo de ce widget peut être vu ci-dessous

Une fois que vous avez vu la démo nous pouvons nous déplacer sur la façon dont vous pouvez ajouter ce widget à votre blog.


Ajouter le widget dans Mise en plac

Aller dans votre blog  Mise en place → Ajouter Widget HTML / JavaScript. Collez le code ci-dessous.

<div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/pages/LeBloggerfr/268125569135 rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/lebloggersdunet></a></li>
<li><a class="gp" href="https://plus.google.com/+LebloggerFr"></a></li>
<li><a class="pi" href=http://pinterest.com/Bizmediafr/leblogger="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/pub/maher-ben/26/449/884="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/user/MrZARKOOBUZZ></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/lebloggers="nofollow"></a></li>
</div>
<style>
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}
.metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}
</style>

Une fois que vous avez ajouté le code modifier le texte qui est mis en évidence dans différentes couleurs. Après que sauver le widget et enfin enregistrer le modèle.

Vous avez terminé maintenant.

0 commentaires:

Enregistrer un commentaire

Laisser un commentaire

💯 Meilleurs Articles sur LeBlogger.fr : Astuces Blogger et Blogspot

 
LeBlogger.fr - Astuces Blogger et Blogspot © 2013. Tous Droits Reservés. Produit Par Biz-Media

Le site le plus complet d'aide aux créateurs de blogs avec Blogger. Tutoriels, conseils et astuces.
LeBlogger est une plateforme d'actualité. C'est un service qui offre l'actualité Web, Astuces iPhone et astuces Facebook et des milliers de couverture pour vos page Facebook.
Services gratuits pour webmasters , des widgets pour votre site ou blog, pour mieux capter l'attention de vos visiteurs.
Top