DéveloppementsFichiers XML

Barre de boutons de partage fixe - Pack share link


Les posts publiés avant juin 2015 sont susceptibles de contenir des informations obsolètes !
Référez-vous à la nouvelle théorie du langage XML ou/et posez vos questions sur le forum pour en savoir plus.
Description Gadget Gadget Version Template Version
Une barre composée de boutons de partage, configuration pour Blogger, validé HTML5, format share link. Partage l'url canonique de la page courante vers GooglePlus, Facebook, Twitter, Pinterest, LinkedIn et StumbleUpon. Divers réglages CSS: position fixe ou relative, couleur, bordure, etc.
Blog
1
1
2
Barre de boutons - Pack share link
Une barre composée de boutons de partage, configuration pour Blogger, validé HTML5, format share link.
Partage l'url canonique de la page courante vers Google+, Facebook, Twitter, Pinterest, LinkedIn et StumbleUpon.
Choix et disposition des boutons.
Divers réglages CSS: position fixe ou relative, couleur, bordure, etc.


Barre de boutons - Pack share link


Configurer le code de l'inclusion

Choisissez d'abord les paramètres dans ce tableau. Le code ci-dessous variera en fonction de vos choix.

Boutons Activer / Désactiver / Renommer
GooglePlus Renommer
Facebook Renommer
Twitter Renommer
Pinterest Renommer
LinkedIn Renommer
StumbleUpon Renommer

<b:includable id='shareButtonsFix'>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>

<div class='sharefixe'>
<b:if cond='data:blog.searchQuery == &quot;&quot;'>
<b:if cond='data:blog.searchLabel == &quot;&quot;'>
  <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:blog.url.canonical' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' target='_blank' title='Partager sur GooglePlus'><img height='24' src='https://ssl.gstatic.com/images/icons/gplus-32.png' width='24'/></a>
</b:if>
</b:if>
  <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url.canonical' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' title='Partager sur Facebook' target='_blank'><img src='https://lh5.googleusercontent.com/-uc1PSaldPEE/TKOVToln_zI/AAAAAAAACJc/R6F7msZ6NoA/s24/facebook.png'/></a>
  <a expr:href='&quot;https://twitter.com/share?url=&quot; + data:blog.url.canonical + &quot;&amp;amp;text=&quot;+ data:blog.pageTitle' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' target='_blank' title='Partager sur Twitter'><img src='https://lh6.googleusercontent.com/-i0iZH12ILvM/T1LS2U3C2uI/AAAAAAAAGuo/Sf_LncSkkLk/s24/twitter-2.png'/></a>
  <a href='javascript:void(bookmarks())' id='pinbookmarksshare' title='Partager sur Pinterest'><img src='https://lh4.googleusercontent.com/-bgCcoQkT4N0/T1LStoMvOzI/AAAAAAAAGuo/fD-MTTPp8Ng/s24/pinterest.png'/></a>
<script type='text/javascript'>
function bookmarks() {
  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>
  <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot;+ data:blog.url.canonical + &quot;&amp;amp;title=&quot;+ data:blog.pageTitle' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' target='_blank' title='Partager sur LinkedIn'><img src='https://lh5.googleusercontent.com/-JzP2Aav9A4c/TKOVnHD9Q5I/AAAAAAAACKg/a4w1woY0Gqc/s24/linkedin.png'/></a>
  <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:blog.url.canonical + &quot;&amp;amp;title=&quot;+ data:blog.pageTitle' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=580,width=800\&quot;); return false;&quot;' target='_blank' title='Partager sur StumbleUpon'><img src='https://lh4.googleusercontent.com/-6EMmSnbNDf4/T1LXjAmF4aI/AAAAAAAAG1E/UEj2gB65w3U/s24/stumbleupon-2.png'/></a>
</div>

</b:if>
</b:includable>


Où copier ce code ?
Tableau de bordModèleModifier le code HTML


Déployez le gadget blog
<b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog'>...</b:widget>


Recopiez le code après :
<b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog'>


Haut de page


Raccorder l'inclusion

Pour que le code de l'inclusion devienne fonctionnel, vous devez ajouter cette ligne :

    <!-- share link -->
    <b:include name='shareButtonsFix'/>


Où copier cette ligne ?
Tableau de bordModèleModifier le code HTML


Déployez le gadget blog
<b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog'>...</b:widget>


Déployez l'inclusion main
<b:includable id='main' var='top'>...</b:includable>


Dans l'inclusion main, recopiez le code après :
<b:include name='feedLinks'/>


Haut de page


Configurer le code CSS

Par défaut, sans CSS, les boutons s'afficheront dans le pied de page.
Pour fixer la barre verticalement à gauche ou à droite et lui attribuer un design, paramétrez et recopiez les CSS ci-dessous.

Configurer le style
Position dans la fenêtre Placer à Distance : px Aperçu

Placer en Distance px
Espace intérieur px
Bordures
Épaisseur px
Style
Couleur #
Couleur d'arrière plan #
Ombre de la barre
Coins arrondis de la barre px

.sharefixe {
  position: fixed;
  top: 200px;
  left: 10px;
  width: 24px;
  overflow: hidden;
  padding: 5px;
  background: #ffffff;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc;
  -moz-box-shadow: 1px 1px 3px #666666;
  -webkit-box-shadow: 1px 1px 3px #666666;
  box-shadow: 1px 1px 3px #666666;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
}


Où recopier les CSS ?
Tableau de bordModèlePersonnaliserAvancéAjouter fichier CSS
Dernière modification :
Assistance publique pour le produit Blogger sur les Forums d'aides :

Certifiée par Google - Experte Platine TC (Ambassador & Advanced Troubleshooter):
  • Affectation Google France, produit Blogger, du 11/07/2011 au 28/07/2014.
  • Affectation Google US, produit Blogger depuis le 28/07/2014.

Posts les plus consultés de ce blog

DéveloppementsFichiers XML
Populaire
ThéorieRéférences XMLParamètres des données
Le paramètre Image redimensionnable [isResizable]
Populaire
DéveloppementsFichiers XML
Résumés des articles avec images réactives [Pack 2016]
Populaire