Ajouter Icons sociaux Metro Style pour Blogger

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.