Ajouter les boutons des réseaux sociaux à la fin de chaque post blogger

Voici une petite astuce pour afficher les icônes des réseaux sociaux à la fin de chaque article de votre blog Blogger-Blogspot.

Démonstration

• J’ai utilisé des icones PNG 32x32 du pack Aquaticus Social.

• Tout les liens s'ouvre dans "une nouvelle fenêtre" et sont en "external nofollow". J'ai également ajouté des tag ALT au images.

• J’ai ajouté une condition b:if pour ne pas afficher les icônes dans la page d’accueil du blog.

• Les réseaux sociaux : Facebook, Twitter, Digg, Technorati, Delicious, Stumble, MySpace, Yahoo, Reddit, Linked IN, Mixx, FriendsFeed, NewsVine, Google Bookmarks et  un bouton pour FeedBurner.

Vous pouvez proposer d’autres services en commentaires et je ferais une mise à jour de l’article.

Instalation

Connectez vous à Blogger, Allez dans "Mise en page", "Modifier le code HTML", et recherchez le code suivant:
 <data:post.body/>      et just Apres coller le code suivant.

  <b:if cond='data:blog.pageType == "item"'> <div style='color: #660000;padding: 10px 0px 0px 0px; margin: 0px 0px px px; line-height: 0.5em; border:5px solid #f8f8f8;text-align:center'> <p> <b>Partager cet Article: </b></p> <p> <!--Facebook--> <a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' title='Facebook' target='_blank'><img alt='Facebook' src='http://blogspot.leblogger.com/social32/facebook.png'/></a> <!--Twitter--> <a expr:href='"http://twitthis.com/twit?url=" + data:post.url' rel='external nofollow' title='Twitter' target='_blank'><img alt='Twitter' src='http://blogspot.leblogger.com/social32/twitter.png'/></a> <!--Technorati--> <a expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='external nofollow' title='Technorati' target='_blank'><img alt='Technorati' src='http://blogspot.leblogger.com/social32/technorati.png'/></a> <!--DIGG--> <a expr:href='"http://digg.com/submit/?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' title='Digg' target='_blank'><img alt='digg' src='http://blogspot.leblogger.com/social32/digg.png'/></a> <!--Stumble--> <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' title='StumbleUpon' target='_blank'><img alt='Stumble' src='http://blogspot.leblogger.com/social32/stumbleupon.png'/></a> <!--Delicious--> <a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' title='Delicious' target='_blank'><img alt='Delicious' src='http://blogspot.leblogger.com/social32/delicious.png'/></a> <!--Myspace--> <a expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u=http"+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='MySpace' target='_blank'><img alt='MySpace' src='http://blogspot.leblogger.com/social32/myspace.png'/></a> <!--Yahoo--> <a expr:href='"http://buzz.yahoo.com/submit/?submitUrl=" + data:post.url' rel='nofollow' title='Buzz up!' target='_blank'><img alt='Yahoo' src='http://blogspot.leblogger.com/social32/yahoo.png'/></a> <!--GoogleBookmarks--> <a expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Google Bookmarks' target='_blank'><img alt='Google' src='http://blogspot.leblogger.com/social32/google.png'/></a> <!--Reddit--> <a expr:href='"http://reddit.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Reddit' target='_blank'><img alt='Reddit' src='http://blogspot.leblogger.com/social32/reddit.png'/></a> <!--Mixx--> <a expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url' rel='nofollow' title='Mixx' target='_blank'><img alt='Mixx' src='http://blogspot.leblogger.com/social32/mixx.png'/></a> <!--LinkedIN--> <a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Linkedin' target='_blank'><img alt='LinkedIN' src='http://blogspot.leblogger.com/social32/linkedin.png'/></a> <!--FriendFeed--> <a expr:href='"http://friendfeed.com/?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' title='FriendFeed' target='_blank'><img alt='FriendFeed' src='http://blogspot.leblogger.com/social32/friendfeed.png'/></a> <!--Newsvine--> <a expr:href='"http://www.newsvine.com/_tools/seed&save?u="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Newsvine' target='_blank'><img alt='Newsvine' src='http://blogspot.leblogger.com/social32/newsvine.png'/></a> <!--Flux-RSS--> <a href='http://feeds2.feedburner.com/THTECHNICIAN' rel='external nofollow' target='_blank'><img alt="Flux RSS" src='http://blogspot.leblogger.com/social32/feed.png'/></a> </p> </div> <a href='http://wwww.thtechnician.blogspot.com' style='display:none;'>Blogger</a></b:if>