Afficher les boutons sociaux comme sur Mashable

L'une des innovations venues sur le blog avec le nouveau modèle est l'affichage des boutons de partage sur les réseaux sociaux de la même façon que le site Mashable. Je tiens ici à vous montrer comment faire la même chose sur votre blog, au cas où ça vous tenterait.

1. Se connecter sur Blogger. Aller sur "Mise en page", "Modifier le code html" et cocher sur la case "Développer des modèles de gadget"

2. Mettre le code suivant juste avant ]]></b:skin>

.post_share{float:left;border:1px solid #DDD;margin-right:10px; top:215px; padding-top:10px;position:fixed;background:#FFF;margin-left:-80px; padding-bottom:10px;} .post_share .wdt_button{clear:left;margin:0}

Explication : top:215px; indique la distance entre le début de la page et l'endroit où se placera le groupe des boutons de partage. Sur mon blog j'ai mis 215px afin que ceux-ci n'apparaissent qu'après le titre de l'article.

4. Ajouter le code suivant juste avant <p><data:post.body/></p>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='post_share'>
<div class='wdt_button'>
<center>
<script type='text/javascript'>
tweetmeme_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'> </script>
</center>
</div>
<div class='wdt_button'>
<center>

<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' onClick='return buzzPopup(this, &apos;Buzz this&apos;)' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkRt8W5AoPOvzdEhiIcI0P3PcdFkluW5tUPLe0VPBJsmItp_YKSTdeOQTGaBbo9TM7HvwmXNNZHfzDdlkcm4LQF4i-xuJIu6JMknX56v5336rvPKvEiT0FQDEPpE0Nhe1w_LXyuJm4Mzo/s1600/g-buzz.png'/></a>
</center>
</div>
<div class='wdt_button'>
<center>
<script type='text/javascript'>
scoopeo_url=&quot;<data:post.url/>&quot;;
</script>
<script src='http://scoopeo.com/clicker/insert/large' type='text/javascript'/>
</center>
</div>
<div class='wdt_button'>
<center>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='button_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</center>
</div>
<div class='wdt_button'>
<center>
<span class='post-icons'>
          <!-- email post links -->
          <b:if cond='data:post.emailPostUrl'>
            <span class='item-action'>
              <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
                <img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_email.gif'/>Email
              </a>
            </span>
          </b:if>
          <!-- quickedit pencil -->
          <b:include data='post' name='postQuickEdit'/>
        </span>
</center>
</div>
</div>

  </b:if>

5. Enregistrer votre modèle et allez admirer le résultat.

@+