Comment ajouter le widget de profil social Metro UI v3.0 sur Blogspot, Blogger ou WordPress ?

by Arcadian
4.2/5 - (21 votes)

/* large monitors */ var adEl = document.createElement("ins"); placeAdEl.replaceWith(adEl); adEl.setAttribute("class", "adsbygoogle"); adEl.setAttribute("style", "display:inline-block;width:468px;height:60px"); adEl.setAttribute("data-ad-client", "ca-pub-1869078019563841"); adEl.setAttribute("data-ad-slot", "2932951658");

} });window.addEventListener("load", function(){ var placeAdEl = document.getElementById("td-ad-placeholder"); if ( null !== placeAdEl && td_screen_width >= 1019 && td_screen_width < 1140 ) { /* landscape tablets */ var adEl = document.createElement("ins"); placeAdEl.replaceWith(adEl); adEl.setAttribute("class", "adsbygoogle"); adEl.setAttribute("style", "display:inline-block;width:468px;height:60px"); adEl.setAttribute("data-ad-client", "ca-pub-1869078019563841"); adEl.setAttribute("data-ad-slot", "2932951658"); } });window.addEventListener("load", function(){ var placeAdEl = document.getElementById("td-ad-placeholder"); if ( null !== placeAdEl && td_screen_width >= 768 && td_screen_width < 1019 ) { /* portrait tablets */ var adEl = document.createElement("ins"); placeAdEl.replaceWith(adEl); adEl.setAttribute("class", "adsbygoogle"); adEl.setAttribute("style", "display:inline-block;width:468px;height:60px"); adEl.setAttribute("data-ad-client", "ca-pub-1869078019563841"); adEl.setAttribute("data-ad-slot", "2932951658"); } });window.addEventListener("load", function(){ var placeAdEl = document.getElementById("td-ad-placeholder"); if ( null !== placeAdEl && td_screen_width < 768 ) { /* Phones */ var adEl = document.createElement("ins"); placeAdEl.replaceWith(adEl); adEl.setAttribute("class", "adsbygoogle"); adEl.setAttribute("style", "display:inline-block;width:300px;height:250px"); adEl.setAttribute("data-ad-client", "ca-pub-1869078019563841"); adEl.setAttribute("data-ad-slot", "2932951658"); } });

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.

Widget de profil de médias sociaux Metro UI 3.0

É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.

/* large monitors */ var adEl = document.createElement("ins"); placeAdEl.replaceWith(adEl); adEl.setAttribute("class", "adsbygoogle"); adEl.setAttribute("style", "display:inline-block;width:468px;height:60px"); adEl.setAttribute("data-ad-client", "ca-pub-1869078019563841"); adEl.setAttribute("data-ad-slot", "1456218456");

} });window.addEventListener("load", function(){ var placeAdEl = document.getElementById("td-ad-placeholder"); if ( null !== placeAdEl && td_screen_width >= 1019 && td_screen_width < 1140 ) { /* landscape tablets */ var adEl = document.createElement("ins"); placeAdEl.replaceWith(adEl); adEl.setAttribute("class", "adsbygoogle"); adEl.setAttribute("style", "display:inline-block;width:468px;height:60px"); adEl.setAttribute("data-ad-client", "ca-pub-1869078019563841"); adEl.setAttribute("data-ad-slot", "1456218456"); } });window.addEventListener("load", function(){ var placeAdEl = document.getElementById("td-ad-placeholder"); if ( null !== placeAdEl && td_screen_width >= 768 && td_screen_width < 1019 ) { /* portrait tablets */ var adEl = document.createElement("ins"); placeAdEl.replaceWith(adEl); adEl.setAttribute("class", "adsbygoogle"); adEl.setAttribute("style", "display:inline-block;width:468px;height:60px"); adEl.setAttribute("data-ad-client", "ca-pub-1869078019563841"); adEl.setAttribute("data-ad-slot", "1456218456"); } });window.addEventListener("load", function(){ var placeAdEl = document.getElementById("td-ad-placeholder"); if ( null !== placeAdEl && td_screen_width < 768 ) { /* Phones */ var adEl = document.createElement("ins"); placeAdEl.replaceWith(adEl); adEl.setAttribute("class", "adsbygoogle"); adEl.setAttribute("style", "display:inline-block;width:320px;height:50px"); adEl.setAttribute("data-ad-client", "ca-pub-1869078019563841"); adEl.setAttribute("data-ad-slot", "1456218456"); } });

<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.


/* large monitors */ var adEl = document.createElement("ins"); placeAdEl.replaceWith(adEl); adEl.setAttribute("class", "adsbygoogle"); adEl.setAttribute("style", "display:inline-block;width:468px;height:60px"); adEl.setAttribute("data-ad-client", "ca-pub-1869078019563841"); adEl.setAttribute("data-ad-slot", "6285012452");

} });window.addEventListener("load", function(){ var placeAdEl = document.getElementById("td-ad-placeholder"); if ( null !== placeAdEl && td_screen_width >= 1019 && td_screen_width < 1140 ) { /* landscape tablets */ var adEl = document.createElement("ins"); placeAdEl.replaceWith(adEl); adEl.setAttribute("class", "adsbygoogle"); adEl.setAttribute("style", "display:inline-block;width:468px;height:60px"); adEl.setAttribute("data-ad-client", "ca-pub-1869078019563841"); adEl.setAttribute("data-ad-slot", "6285012452"); } });window.addEventListener("load", function(){ var placeAdEl = document.getElementById("td-ad-placeholder"); if ( null !== placeAdEl && td_screen_width >= 768 && td_screen_width < 1019 ) { /* portrait tablets */ var adEl = document.createElement("ins"); placeAdEl.replaceWith(adEl); adEl.setAttribute("class", "adsbygoogle"); adEl.setAttribute("style", "display:inline-block;width:468px;height:60px"); adEl.setAttribute("data-ad-client", "ca-pub-1869078019563841"); adEl.setAttribute("data-ad-slot", "6285012452"); } });window.addEventListener("load", function(){ var placeAdEl = document.getElementById("td-ad-placeholder"); if ( null !== placeAdEl && td_screen_width < 768 ) { /* Phones */ var adEl = document.createElement("ins"); placeAdEl.replaceWith(adEl); adEl.setAttribute("class", "adsbygoogle"); adEl.setAttribute("style", "display:inline-block;width:300px;height:250px"); adEl.setAttribute("data-ad-client", "ca-pub-1869078019563841"); adEl.setAttribute("data-ad-slot", "6285012452"); } });

You may also like

Leave a Comment