Comment ajouter des boutons de partage sur les réseaux sociaux et d'abonnement RSS dans Blogger-Blogspot

Comme promis voici les codes pour ajouter une barre de partage sur les réseaux sociaux et d'abonnement RSS comme celle utilisée sur LeBlogger.com en ce moment.
Partager réseaux sociaux flux RSS

Installation

Connectez vous à Blogger, Allez dans "Mise en page", "Modifier le code HTML", cochez la case "Développer des modèles de gadgets", et recherchez ce code ]]></b:skin> et juste avant ajoutez ces lignes :
/* Partager */
.partager {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
    border: 2px solid #C0DEED; /* couleur des bordures */
    background: #73CAE4; /* Couleur de l'arrière plan */
    color:#FFFFFF; /* Couleur du texte */
    margin: 10px 0 0;
    padding: 0 0 5px;
    font:bold 25px Arial, Helvetica, sans-serif;
}
.partager img {
    text-align: center;
    filter:alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;
    -khtml-opacity: 0.7;
}
.partager a:hover img {
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
    -khtml-opacity: 1.0;
}
Recherchez <data:post.body/> et juste après ajoutez ces lignes:
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='partager'><table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
    <th align='center' height='30' width='50%'>
        Partager cet article
    </th>
    <th align='center' width='50%'>
        Les nouveautés
    </th>
</tr>
</table>
<div style='margin: -10px 0px -15px 0px;'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
    <th align='center' height='70' width='70'>
<script type='text/javascript'>
     var topsy_url = &#39;<data:post.url/>&#39;;
     var topsy_title = &#39;<data:post.title/>&#39;;
     var topsy_nick = &#39;LeBlogWeb&#39;;
     var topsy_style = &#39;big&#39;;
     var topsy_theme = &#39;blue&#39;;
     var topsy_text_retweet = &#39;Twitter&#39;;
</script>
<script src='http://cdn.topsy.com/button.js' type='text/javascript'/>
    </th>
    <th align='center' height='70' width='70'>
        <a href='javascript:var%20b=document.body;var%20GR________bookmarklet_domain=&quot;http://www.google.com&quot;;if(b&amp;&amp;!document.xmlVersion){void(z=document.createElement(&quot;script&quot;));void(z.src=&quot;http://www.google.com/reader/ui/link-bookmarklet.js&quot;);void(b.appendChild(z));}else{}'> <img alt='Gogle Buzz' src='http://blogspot.leblogger.com/divers/google-buzz.png' title='Partager dans Google Buzz'/></a>
    </th>
    <th align='center' height='70' width='70'>
        <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot;   data:post.url   &quot;&amp;t=&quot;   data:post.title' rel='external nofollow' target='_blank' title='Facebook'><img alt='Facebook' src='http://blogspot.leblogger.com/social/64/facebook64.png' title='Partager cet article sur Facebook'/></a>
    </th>
    <th align='center' height='70' width='70'>
        <a expr:href='&quot;http://del.icio.us/post?url=&quot;   data:post.url   &quot;&amp;title=&quot;   data:post.title' rel='external nofollow' target='_blank' title='Delicious'><img alt='Delicious' src='http://blogspot.leblogger.com/social/64/delicious64.png' title='Ajouter cet article à vos Delicious'/></a>
    </th>
    <th align='center' height='70' width='20'>
       
    </th>
    <th align='center' height='70' width='70'>
        <a href='http://feeds2.feedburner.com/LeBlogger' rel='nofollow' target='_blank'><img alt='FeedBurner' src='http://blogspot.leblogger.com/social/64/RSS64-2.png' title='Flux RSS'/></a>
    </th>
    <th align='center' height='70' width='70'>
        <a href='http://feedburner.google.com/fb/a/mailverify?uri=LeBlogger&amp;loc=fr_FR' rel='nofollow' target='_blank'><img alt='email' src='http://blogspot.leblogger.com/social/64/gmail64.png' title='Recevoir les nouveaux articles par email'/></a>
    </th>
    <th align='center' height='70' width='70'>
        <a href='http://fusion.google.com/add?feedurl=http://feeds.feedburner.com/LeBlogger' rel='nofollow' target='_blank'><img alt='Google Reader' src='http://blogspot.leblogger.com/social/64/google64.png' title='Abonnez-vous au flux RSS avec Google Reader'/></a>
    </th>
    <th align='center' height='70' width='70'>
        <a href='http://www.netvibes.com/subscribe.php?url=http://feeds.feedburner.com/LeBlogger' rel='nofollow' target='_blank'><img alt='Netvibes' src='http://blogspot.leblogger.com/social/64/netvibes64.png' title='Abonnez-vous au flux RSS avec Netvibes'/></a>
    </th>
</tr></table></div></div>
</b:if>
Remplacez les valeurs en rouge par vos identifiants Twitter et Feedburner.

Qu'est ce que vous pensez de cette barre de partage ? Avez-vous des idées pour l'améliorer ? Vous voulez y ajouter d'autres services ?
N'hésitez pas à partager votre avis et poser vos questions dans les commentaires.

Et bien sûr n'oubliez pas de partager cet article et de vous abonnez au Flux RSS de LeBlogger.com Yahoo
19 Commentaires
  1. Moi je l'ai déjà mis en place :D mercii

    RépondreSupprimer
  2. Chez moi çà ne marche pas, quand je rentre ces codes, le message disparait !

    RépondreSupprimer
  3. @J.
    Quel message ;) ton article ;)
    faut ajouter le code après ;)

    RépondreSupprimer
  4. Bonjour,
    J'étais très interessé mais je n'ai pas trouve : dans le code source de mon blog :
    http://appelsdair.blogspot.com/

    Si leblogger himself ou un internaute confirmé peut me fournir la solution,
    mes congratulations anticipées,
    Baltha

    RépondreSupprimer
  5. pas trouvé quoi ?

    pour trouver le code, il faut bien penser à cocher la case ""Développer des modèles de gadgets""

    RépondreSupprimer
  6. Si vous ne trouvez pas <data:post.body/> il faut chercher post.body ou jumpLink et se localisé à peut près.

    Merci Fox15 pour la réponse :))

    RépondreSupprimer
  7. salut
    j'ai suivi toutes les instruction tout va bien jusqu'à ce que je constate que mes message sont plus visible donc stp tu peu voir ce qui va pas avec ton code

    RépondreSupprimer
  8. @Gamer
    Tu vient de faire un copier coller de ce même commentaire dans un autre article ???

    RépondreSupprimer
  9. oui sans faire attention j'ai posté dans l'autre article
    et pour le code, ta trouvé ?
    merci d'avance

    RépondreSupprimer
  10. merci :) j avais ce prob de coleur mais pour l instant cava
    www.all2-know.blogspot.com

    RépondreSupprimer
  11. Ton astuce me supprime carrément les articles ^^

    RépondreSupprimer
  12. coucou désolée mais chez moi rien n'apparait! j'aii pourtant suivi toutes les instructions et meme crée un feedburner pour etre sur d'avoir des identifiants, quand je fais un apercu de mon blog je n'ai pas les boutons de partage... que dois je faire?

    RépondreSupprimer
  13. Bonjour Soufiane,
    En fait le souci vient lorsque l'article se termine par une photo, dans ce cas, les icônes remontent à droite de la photo au lieu de rester sagement en bas.
    http://dj716.blogspot.com/2008/11/75017-le-petit-acacia.html

    RépondreSupprimer
  14. Bonjour
    voilà j'ai essayer de fois mais
    sa ne veux pas marcher je ne sais pas prk!! exactement

    www.numidiainfo.co.cc

    merci d'avance

    RépondreSupprimer
  15. Bonjour,
    Je voudrais ajouter Pinterst et Tumblr mais quand je vais sur mise en page je ne trouve pas "Modifier le code HTML", et je ne peux pas cocher la case "Développer des modèles de gadgets",
    J'ai chaque case avec modifier...

    Que faire ?
    Merci pour l'aide.

    RépondreSupprimer

Copyright 2015 Soufiane.fr