Nouvelle version Widget de profil social Metro UI v3.0 pour Blogspot ou Blogger est une version étendue du widget précédent publié sur Tech Prevue Labs. Le titre du message est Gadget de profil social Metro UI pour Blogger v2.0. Après avoir publié le dernier message, de nombreuses demandes m'ont été adressées pour étendre ce gadget afin de le rendre plus attrayant. Pour cela, j'ai ajouté trois médias sociaux Pinterest, Linkedin et YouTube. J'espère que la plupart des lecteurs aimeront le diffuser avec de bons mots. Je crois que ce nouveau gadget social fera partie de votre blog. Les principales caractéristiques de ce widget sont l'effet de survol et le design élégant.
Étapes pour ajouter le widget de profil social Metro UI v3.0 sur votre blog ?
Il est facile d'installer ce gadget/widget sur votre Blogspot, Blogger, WordPress ou un autre service de blogs. Il vous suffit d'ajouter un gadget HTML/Javascript et d'y enregistrer le code suivant.
Noter: N'oubliez pas de modifier les valeurs en surbrillance suivantes : page Facebook/nom d'utilisateur, nom d'utilisateur Twitter, identifiant Google+, nom d'utilisateur Pinterest, URL du profil Linkedin, nom d'utilisateur ou URL Youtube, URL du flux RSS/Feedburner.
<div class="metro-social"> <li><a class="fb" href="http://www.facebook.com/techprevue"></a></li> <li><a class="tw" href="http://twitter.com/techprevue"></a></li> <li><a class="gp" href="https://plus.google.com/103741144523748761550"></a></li> <li><a class="pi" href="http://pinterest.com/techprevue"></a></li> <li><a class="in" href="https://www.linkedin.com/in/vinayprajapati"></a></li> <li><a class="yt" href="http://www.youtube.com/techprevue"></a></li> <li><a class="fd" href="http://feeds.feedburner.com/techprevue"></a></li> </div> <style> /*Metro UI Social Profile Widget v3.0 by Tech Prevue Labs Web link to gadget code: https://www.techprevue.com/social-profile-widget-for-blogger-metro-ui-v3-0 Distributed under license CC BY-NC-ND 3.0 INT Please keep license information intact while using this widget*/ .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{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:69px;height:70px} .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>
J'espère que vous l'apprécierez.
Où puis-je voir la démo du widget de profil social Metro UI v3.0 ?
Pour voir la démo du widget de profil social Metro UI v3.0, cliquez ici.
Obtenir Widget de profil social Metro UI v2.0 ici.
