DéveloppementsFichiers XML

Barre sociale pour Blogger


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
Barre regroupant les profils sociaux et des boutons de partage avec compteur. Choix des couleurs, de la taille et des boutons.
Blog
1
1
2
Barre sociale Blogger
Barre sociale fixe, permettant d'afficher une liste de profils web et quelques boutons de partage avec compteur.
Choix de la taille, des couleurs et des boutons.

Présentation de la barre

La barre se positionne en bas du blog.
Le côté gauche est réservé aux liens de profils de différents services web, tandis que le côté droit contient des boutons de partage.

Les boutons partageront l'article. Si la page n'est pas un article, ils partageront la page d'accueil du blog.

Au niveau de la personnalisation, vous avez le choix parmi 10 couleurs, 2 tailles, 70 services web et 6 boutons de partage. Ce qui représente un total de 134.400.000 combinaisons possibles.




Haut de page


Configurer la barre

Sélectionnez d'abord les paramètres. Les codes ci-dessous s'adapteront en fonction de vos choix.


Définir la taille et les couleurs
Taille des boutons px
Arrière-plan
Bordures
Logos
Survol des boutons

Choisir les boutons de partage
Google +1 Afficher les recommandations :
Facebook Action :
Twitter Via : @ [non-requis] Chaque tweet mentionnera votre nom d'utilisateur Twitter.
Pinterest URL image : [non-requis] L'url de l'image de substitution permettra d'afficher le bouton dans les pages accueil/index/archives et aussi dans les pages des articles, si ceux-ci ne contiennent pas d'image.
StumbleUpon
LinkedIn

Choisir les boutons des services
Mentionnez l'url correspondant au service et modifiez le texte de l'infobulle.
Pour ne pas ajouter un service, laissez les champs vides.
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL
URL


Haut de page


Le code HTML de la barre

<b:includable id='socialBar'>
<!-- Barre Sociale by Blogger Code - Ref.: http://goo.gl/CgBGu -->
<link href='https://sites.google.com/site/bloggercodebc/js/bc/BCSocialBar.css?attredirects=0&amp;amp;d=1' rel='stylesheet' type='text/css'/>
<div id='fb-root'/>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = '//connect.facebook.net/fr_FR/all.js#xfbml=1';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script type='text/javascript'>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);
</script>
<script type="text/javascript">
  (function() {
    var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;
    li.src = 'https://platform.stumbleupon.com/1/widgets.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);
  })();
</script>
<script src='http://platform.linkedin.com/in.js' type='text/javascript'/>

<div class='bcsocialbar bcsize40 bcbgblack bcbordergrey bcbtngrey bchoverwhite'>
  <div class='bcsocialleft'>
  </div>

  <div class='bcsocialright'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
        <div class='bcbtnshare'>
          <script data-counter='right' expr:data-url='data:blog.homepageUrl.canonical' type='IN/Share'/>
        </div>
        <div class='bcbtnshare'>
          <su:badge layout='1' expr:location='data:blog.homepageUrl.canonical'/>
        </div>
        <div class='bcbtnshare'>
          <a class='twitter-share-button' expr:data-text='data:blog.title + &quot; | &quot; + data:blog.metaDescription' data-count='horizontal' data-lang='fr' expr:data-url='data:blog.homepageUrl.canonical' href='http://twitter.com/share' >Tweet</a>
        </div>
        <div class='bcbtnshare'>
          <div class='fb-like' expr:data-href='data:blog.homepageUrl.canonical' data-layout='button_count' data-action='like' data-colorscheme='light'/>
        </div>
        <div class='bcbtnshare'>
          <div class='g-plusone' expr:data-href='data:blog.homepageUrl.canonical' data-annotation='bubble' data-size='medium' data-align='left' data-recommendations='true' data-expandto='top'/>
        </div>
      </b:if>
    </b:if>

    <b:if cond='data:blog.pageType != &quot;index&quot;'>
      <b:if cond='data:blog.pageType != &quot;archive&quot;'>
        <b:loop values='data:posts' var='sharePost'>
          <div class='bcbtnshare'>
            <script data-counter='right' expr:data-url='data:sharePost.canonicalUrl' type='IN/Share'/>
          </div>
          <div class='bcbtnshare'>
            <su:badge layout='1' expr:location='data:sharePost.canonicalUrl'/>
          </div>
          <b:if cond='data:sharePost.firstImageUrl'>
            <div class='bcbtnshare' style='text-align: left; width: 90px;'>
              <a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:sharePost.canonicalUrl + &quot;&amp;amp;media=&quot; + data:sharePost.firstImageUrl + &quot;&amp;amp;description=&quot; + data:blog.title + &quot; | &quot; + data:sharePost.title + &quot; | &quot; + data:sharePost.snippet' class='pin-it-button' count-layout='horizontal'>Pin It</a>
            </div>
          </b:if>
          <div class='bcbtnshare'>
            <a class='twitter-share-button' expr:data-text='data:blog.title + &quot; | &quot; + data:sharePost.title + &quot; | &quot; + data:sharePost.snippet' data-count='horizontal' data-lang='fr' expr:data-url='data:sharePost.canonicalUrl' href='http://twitter.com/share' >Tweet</a>
          </div>
          <div class='bcbtnshare'>
            <div class='fb-like' expr:data-href='data:sharePost.canonicalUrl' data-layout='button_count' data-action='like' data-colorscheme='light'/>
          </div>
          <div class='bcbtnshare'>
            <div class='g-plusone' expr:data-href='data:sharePost.canonicalUrl' data-annotation='bubble' data-size='medium' data-align='left' data-recommendations='true' data-expandto='top'/>
          </div>
        </b:loop>
      </b:if>
    </b:if>
  </div>
</div>

<script type='text/javascript' src='//assets.pinterest.com/js/pinit.js'/>
</b:includable>


Où copier ce code ?
  • Tableau de bord
  • Modèle
  • Modifier le code HTML
  • Développer Gadget Blog1


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


Haut de page


Raccorder le code HTML de la barre

Pour que la barre soit opérationnelle, il faut raccorder la nouvelle inclusion dans le gadget "blog".


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


Dans l'inclusion, recherchez :
<b:include name='feedLinks'/>


Juste après, ajoutez :
<!-- barre sociale -->
<b:include name='socialBar'/>


Haut de page


Modifier la mise en forme depuis le code HTML du modèle

Lorsque vous avez installé le module, vous pourrez également changer la taille et les couleurs via le code HTML en modifiant le nom des class CSS.


Recherchez :
<div class='bcsocialleft'>


Juste avant, vous trouverez cette balise contenant une multitude de noms de class :
<div class='bcsocialbar bcsize40 bcbgblack bcbordergrey bcbtngrey bchoverwhite'>


  • En rouge : La taille des boutons. 2 valeurs : bcsize30 et bcsize40
  • En bleu : La couleur de l'arrière-plan. 10 valeurs possibles.
  • En vert : La couleur des bordures. 10 valeurs possibles.
  • En orange : La couleur des logos. 10 valeurs possibles.
  • En violet : La couleur de l'arrière-plan des boutons survolés. 10 valeurs possibles.


Tableau des couleurs avec le nom des class
Couleurs Arrière-plan Bordures Logos Boutons survolés
Gris bcbggrey bcbordergrey bcbtngrey bchovergrey
Noir bcbgblack bcborderblack bcbtnblack bchoverblack
Blanc bcbgwhite bcborderwhite bcbtnwhite bchoverwhite
Bleu bcbgblue bcborderblue bcbtnblue bchoverblue
Vert bcbggreen bcbordergreen bcbtngreen bchovergreen
Rouge bcbgred bcbordergred bcbtngred bchoverred
Violet bcbgviolet bcborderviolet bcbtnviolet bchoverviolet
Rose bcbgpink bcborderpink bcbtnpink bchoverpink
Orange bcbgorange bcborderorange bcbtnorange bchoverorange
Jaune bcbgyellow bcborderyellow bcbtnyellow bchoveryellow





Design inspiré du pack SOCIALTOOLBAR Pro WordPress plugin.
Dernière modification :
Assistance publique pour le produit Blogger sur les Forums d'aides :

Certifiée par Google - Experte TC :
  • 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éveloppementsMulti-versions
Facebook : Bouton J'aime [Like button]
Populaire
ThéorieRéférences XMLParamètres des données
Le paramètre Image redimensionnable [isResizable]
Populaire
ThéorieRéférences XMLTypes des variables d'habillage
Variables d'habillage - Les arrière-plans [background]
Populaire