Excessivement populaire

Ajouter des boutons à la barre de partage Blogger

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
Apparence
Thème
Teinte boutons
Teinte boutons survolés
Teinte boutons actifs
Taille 20px
Ombre de portée ?
Fixation ?
Affichage du module ?

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;
}

.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;
}

.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; }
.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; }
.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; }
.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-orkut { display: none; }
.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-gplus { display: none; }
.share-bar .sb-stumble { display: none; }
.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><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>
  </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.



Spotlight

Populaires cette semaine