Ajouter des boutons à la barre de partage Blogger

Customiser la barre de partage Blogger en choisissant les services que vous souhaitez proposer à vos lecteurs.
Taille des boutons, thèmes de couleurs, restrictions d'affichage, etc.
Boutons Facebook, Twitter, Envoi par mail, Orkut, StumbleUpon, LinkedIn, BlogThis, Google+ Share, HelloCoton, Pinterest et Google +1.
Tous les boutons partagent l'adresse canonique de l'article.
etc, etc, etc...

Présentation

Version mise à jour le 24/06/2014.

Le générateur ci-dessous a été conçu pour permettre d'ajouter/supprimer des services et de modifier l'apparence de la barre de partage Blogger.

De nouvelles options de personnalisation du design font leur apparition :

• Taille des boutons, libre choix de 20 à 60px.
• Choix des masques : Blogger Light, Blogger Dark et Simple.
• Réglage couleurs/gris selon l'action.
• Ombre de portée.

Une option de fixation de la barre a été également ajouté. Cette nouvelle option n'est disponible que pour les pages de types "Item" (articles) et "static_page" (pages autonomes).

• Réglage de la position (haut, bas, gauche, droite)
• Sens d'orientation de la barre : Vertical ou horizontal.

Activer les boutons de partage

Pour pouvoir ajouter ce développement à votre blog, vous devez d'abord activer l'option de la barre de partage via le tableau de bord.

• Tableau de bord
• Mise en page
• Modifier "Articles du blog"

Dans les paramètres des options des articles, cochez les boutons et sauvegardez.

Personnaliser

Modifiez les paramètres dans ce tableau en fonction de vos envies et recopiez le fichier CSS et le code HTML aux endroits mentionnés ci-dessous.

Choix des boutons Renommer les infobulles	Mail Blogger Twitter Facebook Orkut LinkedIn Pinterest Google+ StumbleUpon Hellocoton Google +1 Annotation sur 1 ligne R.I.P. Google+ Sans compteur
Envoyer par emailBlogThis !Partager sur TwitterPartager sur FacebookÉpingler sur Pinterest
Apparence	Thème Blogger Light Blogger Dark Simple Teinte boutons Colorés Gris Teinte boutons survolés Colorés Gris Teinte boutons actifs Colorés Gris Taille 20px
Ombre de portée ?	Décalage horizontal 1px Décalage vertical 1px Taille 5px Couleur transparent
Fixation ?	Orientation de la barre Sens horizontal Sens vertical Position horizontale A partir de la gauche A partir de la droite Distance horizontale px Position verticale A partir du haut A partir du bas Distance verticale px
Affichage du module ?	Articles Pages autonomes Index Archive Uniquement à la page d'accueil

Le fichier CSS

/* Barre de partage Blogger
   Ref.: http://goo.gl/aZTFm5 */

.share-bar {
  margin-top: .5em;
  vertical-align: bottom;
  display: inline-block;
  font-size: 0px;
  line-height: 0px !important;
  -moz-box-shadow: 1px 1px 5px #000000;
  -webkit-box-shadow: 1px 1px 5px #000000;
  box-shadow: 1px 1px 5px #000000;
}

.share-button {
  background: url(https://sites.google.com/site/bloggercodebc/home/share_buttons/share_buttons_BC_light.png) no-repeat left !important;
  background-size: auto 120px !important;
  width: 20px !important;
  height: 20px !important;
  overflow: hidden !important;
  margin-left: -1px !important;
  position: relative !important;
}

.item-bar, .static_page-bar {
  margin-top: 0;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 9;
}

.item-bar .share-button, .static_page-bar .share-button {
  margin-left: -1px !important;
}

.share-button-link-text {
  text-align: left !important;
}

.post-share-buttons .dummy-container {
  padding-left: 5px;
  vertical-align: bottom;
  font-size: 0px;
  line-height: 0px;
}

.sb-email { background-position: 0 0 !important; }
a:hover.sb-email { background-position: 0 -60px !important; }
a:active.sb-email { background-position: 0 -100px !important; }
.share-bar .sb-email { display: none; }
.sb-blog { background-position: -20px 0 !important; }
a:hover.sb-blog { background-position: -20px -60px !important; }
a:active.sb-blog { background-position: -20px -100px !important; }
.share-bar .sb-blog { display: none; }
.sb-twitter { background-position: -40px 0 !important; }
a:hover.sb-twitter { background-position: -40px -60px !important; }
a:active.sb-twitter { background-position: -40px -100px !important; }
.share-bar .sb-twitter { display: none; }
.sb-facebook { background-position: -60px 0 !important; }
a:hover.sb-facebook { background-position: -60px -60px !important; }
a:active.sb-facebook { background-position: -60px -100px !important; }
.share-bar .sb-facebook { display: none; }
.sb-orkut { background-position: -80px 0 !important; }
a:hover.sb-orkut { background-position: -80px -60px !important; }
a:active.sb-orkut { background-position: -80px -100px !important; }
.share-bar .sb-orkut { display: none; }
.sb-linkedin { background-position: -100px 0 !important; }
a:hover.sb-linkedin { background-position: -100px -60px !important; }
a:active.sb-linkedin { background-position: -100px -100px !important; }
.share-bar .sb-linkedin { display: none; }
.sb-pinterest { background-position: -120px 0 !important; }
a:hover.sb-pinterest { background-position: -120px -60px !important; }
a:active.sb-pinterest { background-position: -120px -100px !important; }
.share-bar .sb-pinterest { display: none; }
.sb-gplus { background-position: -140px 0 !important; }
a:hover.sb-gplus { background-position: -140px -60px !important; }
a:active.sb-gplus { background-position: -140px -100px !important; }
.share-bar .sb-gplus { display: none; }
.sb-stumble { background-position: -160px 0 !important; }
a:hover.sb-stumble { background-position: -160px -60px !important; }
a:active.sb-stumble { background-position: -160px -100px !important; }
.share-bar .sb-stumble { display: none; }
.sb-hc { background-position: -180px 0 !important; }
a:hover.sb-hc { background-position: -180px -60px !important; }
a:active.sb-hc { background-position: -180px -100px !important; }
.share-bar .sb-hc { display: none; }

Où recopier ce fichier CSS ?

Le fichier CSS doit être ajouté via le concepteur de modèles :

• Tableau de bord
• Modèle
• Personnaliser
• Avancé
• Ajouter le fichier CSS

Le code HTML

<b:includable id='shareButtons' var='post'>
<!-- Barre de partage sociale Blogger.
     Ref. : http://goo.gl/aZTFm5 -->
  <div expr:class='"share-bar " + data:blog.pageType + "-bar"'>
<span class='share-button-link-text'><a href='https://bloggercode-blogconnexion.blogspot.com/2012/03/ajouter-des-boutons-la-barre-de-partage.html' target='_blank'>Fourni par Blogger Code</a></span><b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + "&amp;target=email"' title='Envoyer par email' target='_blank'><span class='share-button-link-text'>Envoyer par email</span></a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + "&amp;target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' title='BlogThis !' target='_blank'><span class='share-button-link-text'>BlogThis !</span></a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + "&amp;target=twitter"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' title='Partager sur Twitter' target='_blank'><span class='share-button-link-text'>Partager sur Twitter</span></a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + "&amp;target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' title='Partager sur Facebook' target='_blank'><span class='share-button-link-text'>Partager sur Facebook</span></a></b:if><a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + &quot;&amp;target=orkut&quot;' title='' target='_blank'><span class='share-button-link-text'></span></a><a class='goog-inline-block share-button sb-linkedin' expr:href='"http://www.linkedin.com/shareArticle?mini=true"url=" + data:post.url.canonical + "&amp;title=" + data:post.title' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' target='_blank' title=''><span class='share-button-link-text'></span></a><b:if cond='data:post.firstImageUrl'><a class='goog-inline-block share-button sb-pinterest' expr:href='data:post.sharePostUrl + "&amp;target=pinterest"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' target='_blank' title='Épingler sur Pinterest'><span class='share-button-link-text'>Épingler sur Pinterest</span></a></b:if><a class='goog-inline-block share-button sb-gplus' expr:href='"https://plus.google.com/share?url=" + data:post.url.canonical' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' target='_blank' title=''><span class='share-button-link-text'></span></a><a class='goog-inline-block share-button sb-stumble' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url.canonical + "&amp;title=" + data:post.title' expr:onclick='"window.open(this.href, \"_blank\", \"height=580,width=800\"); return false;"' target='_blank' title=''><span class='share-button-link-text'></span></a><b:if cond='data:blog.pageType != "static_page"'><a class='goog-inline-block share-button sb-hc' expr:href='"http://www.hellocoton.fr/vote?url=" + data:post.url.canonical' target='_blank' title=''><span class='share-button-link-text'></span></a></b:if>
  </div>
</b:includable>

Où recopier le code HTML ?

• Tableau de bord
• Modèle
• Modifier le code HTML
• Rechercher Gadget Blog1

Déployez (►) le gadget Blog1 :

<b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog'></b:widget>

Déployez (►) l'inclusion shareButtons :

<b:includable id='shareButtons' var='post'></b:includable>

Remplacez toute l'inclusion shareButtons.

Visualiser la dernière version du code complet de l'inclusion originale.

Les boutons de partage

• Facebook - Bouton J'aime
• Facebook - Bouton Partager
• Facebook - Bouton Enregistrer
• Pack Facebook
• Pack Blogger
• Twitter - Bouton Tweet
• Twitter - Bouton Mention
• Pinterest - Bouton Pin-It
• LinkedIn - Bouton Partager