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.

• J'ai utilisé des icônes 64x64px avec un petit effet d'opacité.
  
• Pour les réseaux sociaux, j'ai utilisé Twitter, Facebook, Google Buzz et Delicious. Vous pouvez utiliser ceux que vous voulez, vous trouverez les codes dans cet article: Ajouter les boutons des réseaux sociaux à la fin de chaque Message dans Blogger.
  
• Pour l'abonnement RSS j'ai ajouté de liens pour Feedburner, l'abonnement par email, Google Reader et via Netvibes.
• La barre de partage et d'abonnement ne s'affichera pas dans la page d'accueil, cf Afficher un Widget dans la Page d'Accueil ou dans les pages d'Articles ou dans une page unique.
• Les images sont hébergés dans mon compte Blogspot.LeBlogger.com vous pouvez utiliser mes liens ou les héberger vous même: 20 Gb de bande passante et 10 Gb d'espace de stockage pour héberger gratuitement vos fichiers.

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

Libellés : Astuces, Réseaux Sociaux Publié le vendredi, mars 19, 2010