Pin It

Widgets



Salut à tous !


blogspot bouton sociaux
Pour ce nouvel article sur la rubrique Blogger Widgets , je vais vous montrer comment ajouter une barre flottante qui regroupe tous les réseaux sociaux pour plus de visibilité et plus de visiteurs .Dans les libellés précédents, j'ai mis en ligne des widgets sociaux comme la Facebook like box, bouton Google+ en pop-up  ou encore le champ Twitter pour votre blog.Aujourd'hui c'est le All in One, c'est la pack de rêves qui rassemble tout ça !

Le blogging devient plus intéressant si vous voyez que votre contenu commence à faire le tour des réseaux sociaux, ça fait chaud au coeur et ça encourage à donner plus et partager plus. De nos jours, avec la concurrence et la présence de beaucoup de blogueurs dans les mêmes niches, partager les articles sur des médias sociaux prendra énormément de temps, un temps qui pourra être exploité de façon plus productive.

J'ai choisi de mettre en ligne ce widget car je pense qu'il est le meilleur présent sur le web pour la simple raison : Il regroupe l'ensemble des réseaux sociaux dans une barre qui flotte tout au long de l'article ! Facebook, Twitter, Pinterest, Google+ et d'autres réseaux sociaux sont présents sur cette barre pour vous permettre tout d'abord de gagner du temps et en même temps faire connaître votre blog sur les différents réseaux à travers le monde.

Comment ajouter la barre de boutons sociaux Blogger ?

Connectez vous sur votre compte Blogger et suivez les instructions suivantes :

  • Blogger --> Modèle --> Modifier le code HTML --> Mettre en forme le modèle
  • Cliquez sur CTRL+F et cherchez <b:includable id='post' var='post'>
Une fois que vous la trouvez, copiez et collez ce code HTML juste APRES / AU-DESSOUS :

<b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><style>.mbt_social_floating{position:fixed; bottom:10%; margin-left:-60px; float:left;width:60px;background-color:#f7f7f7;padding: 5px 0 0px 0px;border-top:1px solid #ddd;border-left:1px solid #ddd;border-bottom:1px solid #ddd;z-index:9999px !important;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}.mbt_social_floating .mbt_side_social_button{margin-bottom:5px;float:none;height:auto;width:60px;}.mbt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{ margin-left:5px;}.mbt_social_floating .st_fblike_vcount{margin-left:5px;}.mbt_social_floating .stButton_gradient{background:none !important;height:21px !important;padding-left:0 !important;}.mbt_social_floating .chicklets, .mbt_social_floating .stMainServices { background:url(&#39;http://1.bp.blogspot.com/-r3RYZkB4Pis/T7alrxNFYyI/AAAAAAAAGc4/TCBwHNxEwR4/s400/gc_social_sprite.gif&#39;) no-repeat !important;height:19px !important;width:45px !important;padding:0 !important;}.st_email .chicklets{background-position:0 -77px !important;background-image:url(&#39;http://1.bp.blogspot.com/-r3RYZkB4Pis/T7alrxNFYyI/AAAAAAAAGc4/TCBwHNxEwR4/s400/gc_social_sprite.gif&#39;) !important;}.mbt_social_floating .st_twitter_vcount .st-twitter-counter{background-position:0 -58px !important;}.mbt_social_floating .stButton_gradient{border:none !important;}.mbt_social_floating .stBubble_count{width:44px !important;font-size: 15px !important;font-weight: normal !important;padding-top:7px !important;height:23px !important;background:none !important;}.mbt_social_floating .st_twitter_vcount .stBubble_count{color:#00a6df;background-color:#f8fbfc !important;}
.st_fblike_vcount{margin-bottom: 0px;display: block;}.st_twitter_vcount{margin-bottom: 3px;display: block;}
.st_email{margin-bottom: 5px; margin-top: 3px;display: block;}.mbt_social_floating .stBubble{background-position: 21px 31px !important;height:35px !important;}</style>
<div class='mbt_social_floating'><script type='text/javascript'>var switchTo5x=true;</script><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({onhover:false});</script><span class='st_fblike_vcount' displaytext=''/><span class='st_twitter_vcount' displaytext='' st_via='Bloggermecom'/><div style='margin:5px 0 0px 0;'><center><a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a> <a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/><script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/><script type='text/javascript'>function run_pinmarklet() {var e=document.createElement(&#39;script&#39;);e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);document.body.appendChild(e);}</script> </center></div><div style='margin:0px 0 0 5px;'><span class='st_plusone_vcount' displaytext=''/></div>
<div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'><a class='addthis_counter'/></div><script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/><script type='text/javascript'>var addthis_config = {ui_cobrand: &quot;MY BLOGGER TRICKS&quot;,ui_header_color: &quot;#ffffff&quot;,ui_header_background: &quot;#0080FF&quot;}</script><span class='st_email' displaytext=''/><p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://www.mybloggertricks.com/2012/05/create-floating-bar-for-pinterest-other.html' style='color:#CAC8C8;'>Widgets</a></p></div></b:if></b:if>

Personnalisation :


  • Modifiez "Bloggermecom" par votre nom d'utilisateur Twitter
  • Modifiez float:left pour float:right si vous désirez placer la barre à droite 

 Et voilà le tour est joué !! Vous pouvez maintenant partager vos articles facilement et rapidement grâce à cette barre de partage !
KHADIR Hamza

je suis Hamza Khadir, 22ans, jeune marocain résidant à Casablanca. Coté études, je suis en 2ème année Master à la faculté des Sciences économiques juridiques et sociales (option logistique et transport). J’ai décidé de préparer mes valises, et prendre la route vers le nouveau monde du blogging.

8 commentaires to ''Blogger widgets : Blogger boutons sociaux "

ADD COMMENT
  1. Impossible de copier coller le text --'

    Merci quand même

    RépondreSupprimer
  2. Merci pour l'article, intéressant, seulement qu'on ne trouve pas b:includable id='post' var='post' dans le code HTML de blogger, y a t'il une autre astuce ou issue? Merci encore!

    RépondreSupprimer
  3. Merci beaucoup pour ce tuto clair et précis !
    je suis enchanté, ca fonctionne nikel .. ;-)

    RépondreSupprimer
  4. ca fonctione tres bien, sauf un petit bug pour les sitewebs en langue arabe

    RépondreSupprimer
  5. safi platre
    Merci beaucoup pour ce tuto clair et précis !

    RépondreSupprimer
  6. SVP FAIT UNE VIDEO POUR QU'IL SOIT PLUS CLAIR CE TUTO
    ET MERCI

    RépondreSupprimer
  7. C'est a vérifier çà ne marche pas.

    RépondreSupprimer