Blogger: ajouter une barre verticale ou horizontale pour les réseaux sociaux

Indispensable ! De nos jours il est presque inimaginable de tenir un blog sans être présent sur les réseaux sociaux, moi même j'ai pas résisté plus d'un mois pour m'ouvrir un compte Twitter.

La je vais vous donner une astuce pour ajouter une barre verticale et flottante sur votre blog avec les boutons Facebook, Twitter, Google+. et une autre pour ajouter une barre horizontale puis je vous expliquerai un peu ce que vous pouvez changer et améliorer.

La barre que je vous propose d'ajouter est une barre codée en HTML et CSS avec du Javascript mais c'est simplement un lien vers un fichier donc on a pas à s'en occuper.

Voila sur l'image les différentes barres que je vais vous proposer:

Dans tous les cas vous devez coller le code dans un gadget Html/JavaScript.

Barre horizontale

<div class="addthis_toolbox addthis_default_style addthis_32x32_style"><a class="addthis_button_google_plusone_share" title="Google+"></a><a class="addthis_button_facebook" title="Facebook"></a><a class="addthis_button_twitter" title="Twitter"></a><a class="addthis_button_email" title="e-mail"></a><a class="addthis_button_print" title="Imprimer"></a><a class="addthis_button_google" title="Google"></a><a class="addthis_button_favorites" title="Ajouter aux favoris"></a><a class="addthis_button_compact"></a></div><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4dedda0c245832a7"></script>

Barre verticale à gauche de l'écran

<style type="text/css">* html #ss-box{ position: absolute; } #ss-box{ width: 70px; background:#ffffff;border:1px solid #dedede;position:fixed;left:6%; top: 20%; height:200px; height:auto; } #ss-box div{ padding:6px 6px 4px 5px; } #icon_facebook{ margin-left:-5px; } #icon_twitter{ margin-left:-2px; } #icon_linkedin{ margin-left:-5px; } #sfs{ margin-left:-5px; } #ss-get{ bottom: -20px; clear: both; color: #666666; font-size: 9px; left: 18px; position: absolute; text-align: center; text-decoration: none; } </style> <div id="ss-box"><div id="ssl-box"><div id="icon_facebook"><div class='sbutton' id='gb'><script src="http://connect.facebook.net/fr_FR/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div></div><div id="icon_googleplus"><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:plusone size="tall"></g:plusone> </div><div id="icon_twitter"><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> </div><div id="icon_linkedin"><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script> </div></div><div style="clear:both;"></div></div>

Barre verticale à droite de l'écran

<style type="text/css"> * html #ss-box{ position: absolute; } #ss-box{ width: 70px; background:#ffffff;border:1px solid #dedede;position:fixed;right:6%; top: 20%; height:200px; height:auto; } #ss-box div{ padding:6px 6px 4px 5px; } #icon_facebook{ margin-left:-5px; } #icon_twitter{ margin-left:-2px; } #icon_linkedin{ margin-left:-5px; } #sfs{ margin-left:-5px; } #ss-get{ bottom: -20px; clear: both; color: #666666; font-size: 9px; left: 18px; position: absolute; text-align: center; text-decoration: none; } </style> <div id="ss-box"><div id="ssl-box"><div id="icon_facebook"><div class='sbutton' id='gb'><script src="http://connect.facebook.net/fr_FR/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div></div><div id="icon_googleplus"><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:plusone size="tall"></g:plusone> </div><div id="icon_twitter"><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> </div><div id="icon_linkedin"><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script> </div></div><div style="clear:both;"></div></div>

Barre verticale à gauche de l'écran avec effet d'ombre

<style type="text/css"> * html #ss-box{ position: absolute; } #ss-box{ width: 70px; background:#ffffff;border:1px solid #dedede;-moz-box-shadow: 0px 0px 15px #333;-webkit-box-shadow: 0px 0px 15px #333;box-shadow: 0px 0px 15px #333;position:fixed;left:6%; top: 20%; height:200px; height:auto; } #ss-box div{ padding:6px 6px 4px 5px; } #icon_facebook{ margin-left:-5px; } #icon_twitter{ margin-left:-2px; } #icon_linkedin{ margin-left:-5px; } #sfs{ margin-left:-5px; } #ss-get{ bottom: -20px; clear: both; color: #666666; font-size: 9px; left: 18px; position: absolute; text-align: center; text-decoration: none; } </style> <div id="ss-box"><div id="ssl-box"><div id="icon_facebook"><div class='sbutton' id='gb'><script src="http://connect.facebook.net/fr_FR/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div></div><div id="icon_googleplus"><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:plusone size="tall"></g:plusone> </div><div id="icon_twitter"><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> </div><div id="icon_linkedin"><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script> </div></div><div style="clear:both;"></div></div>

Barre verticale à droite de l'écran avec effet d'ombre

<style type="text/css"> * html #ss-box{ position: absolute; } #ss-box{ width: 70px; background:#ffffff;border:1px solid #dedede;-moz-box-shadow: 0px 0px 15px #333;-webkit-box-shadow: 0px 0px 15px #333;box-shadow: 0px 0px 15px #333;position:fixed;right:6%; top: 20%; height:200px; height:auto; } #ss-box div{ padding:6px 6px 4px 5px; } #icon_facebook{ margin-left:-5px; } #icon_twitter{ margin-left:-2px; } #icon_linkedin{ margin-left:-5px; } #sfs{ margin-left:-5px; } #ss-get{ bottom: -20px; clear: both; color: #666666; font-size: 9px; left: 18px; position: absolute; text-align: center; text-decoration: none; } </style> <div id="ss-box"><div id="ssl-box"><div id="icon_facebook"><div class='sbutton' id='gb'><script src="http://connect.facebook.net/fr_FR/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div></div><div id="icon_googleplus"><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:plusone size="tall"></g:plusone> </div><div id="icon_twitter"><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> </div><div id="icon_linkedin"><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script> </div></div><div style="clear:both;"></div></div>

Barre verticale à gauche avec coins arrondis et effet d'ombre

<style type="text/css"> * html #ss-box{ position: absolute; } #ss-box{ width: 70px; background:#ffffff;border:1px solid #dedede;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius: 8px; -moz-box-shadow: 0px 0px 15px #333;-webkit-box-shadow: 0px 0px 15px #333;box-shadow: 0px 0px 15px #333;position:fixed;left:6%; top: 20%; height:200px; height:auto; } #ss-box div{ padding:6px 6px 4px 5px; } #icon_facebook{ margin-left:-5px; } #icon_twitter{ margin-left:-2px; } #icon_linkedin{ margin-left:-5px; } #sfs{ margin-left:-5px; } #ss-get{ bottom: -20px; clear: both; color: #666666; font-size: 9px; left: 18px; position: absolute; text-align: center; text-decoration: none; } </style> <div id="ss-box"><div id="ssl-box"><div id="icon_facebook"><div class='sbutton' id='gb'><script src="http://connect.facebook.net/fr_FR/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div></div><div id="icon_googleplus"><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:plusone size="tall"></g:plusone> </div><div id="icon_twitter"><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> </div><div id="icon_linkedin"><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script> </div></div><div style="clear:both;"></div></div>

Barre verticale à droite avec coins arrondis et effet d'ombre

<style type="text/css"> * html #ss-box{ position: absolute; } #ss-box{ width: 70px; background:#ffffff;border:1px solid #dedede;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius: 8px;-moz-box-shadow: 0px 0px 15px #333;-webkit-box-shadow: 0px 0px 15px #333;box-shadow: 0px 0px 15px #333;position:fixed;right:6%; top: 20%; height:200px; height:auto; } #ss-box div{ padding:6px 6px 4px 5px; } #icon_facebook{ margin-left:-5px; } #icon_twitter{ margin-left:-2px; } #icon_linkedin{ margin-left:-5px; } #sfs{ margin-left:-5px; } #ss-get{ bottom: -20px; clear: both; color: #666666; font-size: 9px; left: 18px; position: absolute; text-align: center; text-decoration: none; } </style> <div id="ss-box"><div id="ssl-box"><div id="icon_facebook"><div class='sbutton' id='gb'><script src="http://connect.facebook.net/fr_FR/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div></div><div id="icon_googleplus"><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:plusone size="tall"></g:plusone> </div><div id="icon_twitter"><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> </div><div id="icon_linkedin"><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script> </div></div><div style="clear:both;"></div></div>

Si vous avez des questions, laissez un commentaire, je ferais le maximum pour vous répondre.