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='http://2.bp.blogspot.com/_hrhg1n2KA3Y/S3Y8Gi87V8I/AAAAAAAADDc/xpLQ5jnX_Gk/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:

  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

Laisser un commentaire

💯 Meilleurs Articles sur LeBlogger.fr : Astuces Blogger et Blogspot

 
LeBlogger.fr - Astuces Blogger et Blogspot © 2013. Tous Droits Reservés. Produit Par Biz-Media

Le site le plus complet d'aide aux créateurs de blogs avec Blogger. Tutoriels, conseils et astuces.
LeBlogger est une plateforme d'actualité. C'est un service qui offre l'actualité Web, Astuces iPhone et astuces Facebook et des milliers de couverture pour vos page Facebook.
Services gratuits pour webmasters , des widgets pour votre site ou blog, pour mieux capter l'attention de vos visiteurs.
Top