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
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.
/* 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; }
Le fichier CSS doit être ajouté via le concepteur de modèles :
- Tableau de bord
- Modèle
- Personnaliser
- Avancé
- Ajouter le fichier CSS
<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 + "&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 + "&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 + "&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 + "&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 + "&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>
- 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.