Ajouter les boutons sociaux sur blogger 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=" + 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/AVvXsEhtaPM8NnQPogP3e-xJOxWhCRNXkjAe8Q0vF2yHRlbvb-OoZV1n_kASgN23qsxcTsmt_UTMBnSwSizdp4xrJSpaYstPi-h3jUiFl6kb6jqn3bQNSioLbSG9Mjy3_u5cjRHdrvjzTEkyD4E/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 voir le résultat.

3 Commentaires

Laisser un commentaire

  1. Le citadin10 avril, 2011

    Hélas chez moi cela ne fonctionne pas du tout.
    j'ai tout placer comme tu dis, c'est s'en doute parce que j'utilise un template autre que ceux officiels ?
    amitié et merci de tous tes astuces...

    RépondreSupprimer
  2. sharing.i bonne pense qu'il est très agréable et je viendrai time.thanks prochaine.

    RépondreSupprimer

Enregistrer un commentaire

Laisser un commentaire

Plus récente Plus ancienne