Développements - Plugins

Blogger - Développements - Plugins
🔧🔨

Blogger est le synonyme de illimité. Laissez libre cours à votre imagination en installant du prêt-à-porter sur votre blog ou en créant vos propres plugins.

Bac à sable

Accéder à la rubrique

Démos et tutoriels

Nos démos qui sont principalement axés sur les développements de plugins dans le fichier XML du thème.

Les lecteurs

Ajoutez des vidéos, des lecteurs de musiques et respirez un bon coup avant d'appuyer sur PLAY...

Les gadgets Blogger

Les plugins sociaux

Des générateurs de boutons de partage, de badges de profil, de timelines, pour équiper votre blog. La solution rapide et idéale si vous débutez.
Sélectionnez un plugin, choisissez vos réglages, prévisualisez et suivez les instructions d'installation.

Accéder à la rubrique

Les boutons de partage

Les boutons d'abonnement et badges de profil

Les boutons et badges permettent à vos lecteurs d’interagir aisément avec vos profils sociaux.

Les timelines

Montrez à vos lecteurs que vous êtes actif sur les réseaux sociaux.

Les contenus sociaux

Agrémentez votre blog avec du contenu en provenance de réseaux sociaux.

Les scripts des plugins sociaux

Chaque réseau à ses propres plugins. La plupart ont besoin d'un fichier JS qui doit être ajouté dans le code du thème afin qu'ils puissent travailler. Mettez-vous à jour.

Installer des plugins

Les tutoriels ci-dessous sont spécifiques aux plugins proposés sur ce blog. Ils vous indiquent comment localiser les bons emplacements dans le fichier XML de votre thème. Dans la plupart des cas, l'accès à l'éditeur de code est requis.

  • UI
  • Thème
  • Menu Personnaliser
  • Modifier le code HTML
Ouvrir l'éditeur XML du thème.

Attention !

Les méthodes de localisation présentées dans nos tutoriels ont été rédigées pour l’interface UI-2010.
Sur l’UI-2020, les emplacements à trouver restent identiques, mais toutes les balises sont déployées par défaut. Ce changement rend les recherches plus fastidieuses à l'œil nu.

Ajouter un code dans les options des articles - Gadget Blog Version 1 - vue web

Étape 1 : Déployer le gadget Blog1

<b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog' visible='true'></b:widget>
Repérer et développer les balises b:widget du gadget Blog

Étape 2 : Déployer l'inclusion post

<b:includable id='post' var='post'></b:includable>
Repérer et développer les balises de l'inclusion Post

Étape 3 : Choisir un emplacement

L'inclusion post contient 4 balises où peuvent être intégré un code XML :

Dans l'entête de l'article : Entre le titre et l'article
<div class='post-header-line-1'>
  <!-- Ajouter le code ici / Add Code here -->
</div>
Dans le pied de l'article : Ligne 1
<div class='post-footer-line post-footer-line-1'>
  <!-- Ajouter le code ici / Add Code here -->
</div>
Dans le pied de l'article : Ligne 2
<div class='post-footer-line post-footer-line-2'>
  <!-- Ajouter le code ici / Add Code here -->
</div>
Dans le pied de l'article : Ligne 3
<div class='post-footer-line post-footer-line-3'>
  <!-- Ajouter le code ici / Add Code here -->
</div>

Ajouter un code dans les options des articles - Gadget Blog Version 1 - vue mobile-post

Étape 1 : Déployer le gadget Blog1

<b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog' visible='true'></b:widget>
Repérer et développer les balises b:widget du gadget Blog

Étape 2 : Déployer l'inclusion mobile-post

<b:includable id='mobile-post' var='post'></b:includable>
Repérer et développer les balises de l'inclusion mobile-post

Étape 3 : Choisir un emplacement

L'inclusion mobile-post contient 3 balises où peuvent être intégré un code XML :

Dans l'entête de l'article : Entre le titre et l'article
<div class='post-header-line-1'>
  <!-- Ajouter le code ici / Add Code here -->
</div>
Dans le pied de l'article : Ligne 1
<div class='post-footer-line post-footer-line-1'>
  <!-- Ajouter le code ici / Add Code here -->
</div>
Dans le pied de l'article : Ligne 2
<div class='post-footer-line post-footer-line-2'>
  <!-- Ajouter le code ici / Add Code here -->
</div>

Ajouter un code dans les options des articles - Gadget Blog Version 1 - vue mobile-index

Étape 1 : Déployer le gadget Blog1

<b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog' visible='true'></b:widget>
Repérer et développer les balises b:widget du gadget Blog

Étape 2 : Déployer l'inclusion mobile-index-post

<b:includable id='mobile-index-post' var='post'></b:includable>
Repérer et développer les balises de l'inclusion mobile-index-post

Étape 3 : Choisir un emplacement

L'endroit le mieux approprié est à proximité de l'option du lien de commentaires.

<div class='mobile-index-comment'>

  <!-- Ajouter le code ici / Add code here -->
</div>
Repérer la balise et ajouter un code XML après la balise

Ajouter un code dans les options des articles - Gadget Blog Version 2

Étape 1 : Déployer le gadget Blog1

<b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog' visible='true'></b:widget>
Repérer et développer les balises b:widget du gadget Blog

Étape 2 : Déployer l'inclusion postFooter

<b:includable id='postFooter' var='post'></b:includable>
Repérer et développer les balises de l'inclusion postFooter

Étape 3 : Choisir un emplacement

Dans les layouts Version 3, le contenu de l'inclusion postFooter peut varier d'un thème à l'autre. Intégrez le code XML de préférence au début de l'inclusion :

Dans le pied de l'article
<b:includable id='postFooter' var='post'>
  <!-- Ajouter le code ici / Add Code here -->
Repérer la balise et ajouter un code XML après la balise

Ajouter un code à proximité du snippet - Gadget FeaturedPost Version 1

Étape 1 : Déployer le gadget FeaturedPost1

<b:widget id='FeaturedPost1' locked='false' title='title' type='FeaturedPost'></b:widget>
Repérer et développer les balises b:widget du gadget FeaturedPost

Étape 2 : Déployer l'inclusion content

<b:includable id='content'></b:includable>
Repérer et développer les balises de l'inclusion content

Étape 3 : Choisir un emplacement

Avant ou après l'extrait
<!-- Add code here / Ajouter le code ici-->
  
<b:if cond='data:showSnippet and data:postSummary != ""'>
  <p>
    <data:postSummary/>
  </p>
</b:if>
  
<!-- Or add code here / Ou ajouter le code ici -->
Repérer la balise et ajouter un code XML après la balise

Ajouter un code à proximité du snippet - Gadget FeaturedPost Version 2

Étape 1 : Déployer le gadget FeaturedPost1

<b:widget id='FeaturedPost1' locked='true' title='title' type='FeaturedPost' visible='true'></b:widget>
Repérer et développer les balises b:widget du gadget FeaturedPost

Étape 2 : Créer une nouvelle inclusion et choisir l'emplacement

Après les balises de réglages <b:widget-settings></b:widget-settings> ajoutez une nouvelle inclusion. A l'intérieur, vous ajoutez votre code XML personnalisé à l'un des endroits mentionnés.

Dans le pied de l'article
<b:includable id='postSnippet'>
  
  <!-- Ajouter code personnel ici / Add custom code here -->
  
  <b:include name='super.postSnippet'/>
  
  <!-- Ou Ajouter code personnel ici / Or Add custom code here -->
  
</b:includable>
Ajouter une nouvelle inclusion

Ajouter un code à proximité du snippet - Gadget PopularPosts Version 1

Étape 1 : Déployer le gadget PopularPosts1

<b:widget id='PopularPosts1' locked='false' title='title' type='PopularPosts'></b:widget>
Repérer et développer les balises b:widget du gadget PopularPosts

Étape 2 : Déployer l'inclusion main

<b:includable id='main'></b:includable>
Repérer et développer les balises de l'inclusion main

Étape 3 : Choisir un emplacement

Après l'extrait
    <div style='clear: both;'/>
  </b:if>
  
  <!-- Add code here / Ajouter le code ici-->
  
</li>
</b:loop>
Repérer la balise et ajouter un code XML après la balise

Ajouter un code à proximité du snippet - Gadget PopularPosts Version 2

Étape 1 : Déployer le gadget PopularPosts1

<b:widget id='PopularPosts1' locked='true' title='title' type='PopularPosts' visible='true'></b:widget>
Repérer et développer les balises b:widget du gadget PopularPosts

Étape 2 : Créer une nouvelle inclusion et choisir l'emplacement

Après les balises de réglages <b:widget-settings></b:widget-settings> ajoutez une nouvelle inclusion. A l'intérieur, vous ajoutez votre code XML personnalisé à l'un des endroits mentionnés. 

<b:includable id='postSnippet'>
  
  <!-- Ajouter code personnel ici / Add custom code here -->
  
  <b:include name='super.postSnippet'/>
  
  <!-- Ou Ajouter code personnel ici / Or Add custom code here -->
  
</b:includable>
Ajouter une nouvelle inclusion

Ajouter un code après la balise <body>

Étape 1 : Rechercher la balise body

Activez la recherche intégrée en cliquant d'abord dans l'éditeur et ensuite, appuyez sur les touches CTRL+F.

Dans la boîte de recherche, tapez : <body

Rechercher et localiser la balise body

Selon les thèmes, la balise peut renfermer plusieurs attributs :

Dans les thèmes officiels Layouts Version 2
<body expr:class='"loading" + data:blog.mobileClass'>
La balise sans attribut
<body>

Étape 2 : Ajouter du contenu après la balise

Lorsque vous avez repéré la balise, vous pouvez ajouter un code XML juste après.

Dans les thèmes officiels Layouts Version 2
<body expr:class='"loading" + data:blog.mobileClass'>
  <!-- Ajouter le code ici / Add code here -->
La balise sans attribut
<body>
  <!-- Ajouter le code ici / Add code here -->

Si la balise est suivie de balises <b:class> ou/et <b:attr>, vous injecter votre code après ces balises.

Cas particuliers
<body>
  <b:class ... />
  <b:attr ... />
  <!-- Ajouter le code ici / Add code here -->
Ajouter un code XML après la balise body

Remarque 1 :

Ne jamais ajouter un code entre les balises </head> et <body>. C'est une erreur.

Remarque 2 :

Il y a toujours qu'une seule balise <body> dans le code XML d'un thème.

Ajouter un code dans la barre de partage - Gadget Blog Version 1 - Vue web

Étape 1 : Déployer le gadget Blog1

<b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog' visible='true'></b:widget>
Repérer et développer les balises b:widget du gadget Blog

Étape 2 : Déployer l'inclusion shareButtons

<b:includable id='shareButtons' var='post'></b:includable>
Repérer et développer les balises de l'inclusion shareButtons

Étape 3 : Choisir un emplacement

L'inclusion shareButtons contient plusieurs emplacements où peuvent être intégré un code XML :

Avant la barre de boutons
<b:includable id='shareButtons' var='post'>
  <!-- Ajouter le code ici / Add code here -->
Après la barre de boutons
  </b:if>
    <!-- Ajouter le code ici / Add code here -->
Les emplacements plausibles pour ajouter un code XML dans la barre de partage

Ajouter un code à côté du bouton de partage - Gadget Blog Version 1 - Vue modile

Étape 1 : Déployer le gadget Blog1

<b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog' visible='true'></b:widget>
Repérer et développer les balises b:widget du gadget Blog

Étape 2 : Déployer l'inclusion mobile-post

<b:includable id='mobile-post' var='post'></b:includable>
Repérer et développer les balises de l'inclusion mobile-post

Étape 3 : Choisir un emplacement

L'inclusion mobile-post contient le code de la barre de partage de la version mobile. Un code XML peut être ajouté à l'un des emplacements suivants :

Avant le bouton PARTAGER
<!-- Ajouter le code ici / Add code here -->
<b:if cond='data:top.showMobileShare'>
Après le bouton PARTAGER
</b:if>
  <!-- Ajouter le code ici / Add code here -->
Emplacements plausible pour ajouter un code XML dans la barre de partage de la version mobile personnalisée

Ajouter un code dans l'option Profil de l'auteur de l'article - Gadget Blog Version 1 - Vue web

Étape 1 : Déployer le gadget Blog1

<b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog' visible='true'></b:widget>
Repérer et développer les balises b:widget du gadget Blog

Étape 2 : Déployer l'inclusion post

<b:includable id='post' var='post'></b:includable>
Repérer et développer les balises de l'inclusion Post

Étape 3 : Choisir un emplacement

Un code XML peut être ajouté avant ou après la description du profil de l'auteur :

  <!-- Ajouter le code ici / Add code here -->
<span itemprop='description'><data:post.authorAboutMe/></span>
  <!-- Ou, ajouter le code ici / or, add code here -->
Repérer l'emplacement et ajouter un code XML avant ou après

Ajouter un code sous le nom de l'auteur - Gadget Profile Version 1

Étape 1 : Déployer le gadget Profile

<b:widget id='Profile1' locked='false' title='WIDGET_TITLE' type='Profile' visible='true'></b:widget>
Repérer et développer les balises b:widget du gadget Profile

Étape 2 : Déployer l'inclusion main

<b:includable id='main'></b:includable>
Repérer et développer les balises de l'inclusion main

Étape 3 : Choisir un emplacement

L'emplacement à trouver est situé dans l'inclusion main. Un code XML peut être ajouté après :

  <div class='g-follow' data-annotation='bubble' data-height='20' expr:data-href='data:userUrl'/>
</b:if>
<!-- Ajouter le code ici / Add code here -->
Repérer la balise et ajouter un code XML après la balise

Ajouter un code sous le nom de l'auteur - Gadget Profile Version 2

Étape 1 : Déployer le gadget Profile

<b:widget id='Profile1' locked='true' title='WIDGET_TITLE' type='Profile' version='2' visible='true'></b:widget>

Étape 2 : Déployer l'inclusion userProfileInfo

<b:includable id='userProfileInfo'></b:includable>

Étape 3 : Choisir un emplacement

L'emplacement à trouver est situé dans l'inclusion userProfileInfo. Un code XML peut être ajouté à l'emplacement mentionné ci-dessous :

  <div class='profile-info'>
    <dl class='profile-datablock'>
      <b:class cond='data:showlocation and data:location != ""' name='has-location'/>

      <b:include name='userProfileData'/>
      <b:include cond='data:showlocation and data:location != ""' name='userLocation'/>
      <b:include cond='data:aboutme != ""' name='userProfileText'/>

      <!-- Ajouter le code ici / Add code here -->

    </dl>
    <b:include name='viewProfileLink'/>
  </div>

Ajouter un code à côté des noms des contributeurs - Gadget Profile Version 1

Étape 1 : Déployer le gadget Profile

<b:widget id='Profile1' locked='false' title='WIDGET_TITLE' type='Profile' visible='true'></b:widget>
Repérer et développer les balises b:widget du gadget Profile

Étape 2 : Déployer l'inclusion main

<b:includable id='main'></b:includable>
Repérer et développer les balises de l'inclusion main

Étape 3 : Choisir un emplacement

L'emplacement à trouver est situé dans l'inclusion main. Un code XML peut être ajouté à l'endroit mentionné ci-dessous :

<li><a class='profile-name-link g-profile' expr:href='data:i.userUrl' expr:style='"background-image: url(" + data:i.profileLogo + ");"'><data:i.display-name/></a><!-- Ajouter le code ici / Add code here --></li>
Repérer l'emplacement et ajouter un code XML après

Ajouter un code à côté des noms des contributeurs - Gadget Profile Version 2

Étape 1 : Déployer le gadget Profile

<b:widget id='Profile1' locked='true' title='WIDGET_TITLE' type='Profile' version='2' visible='true'></b:widget>

Étape 2 : Déployer l'inclusion teamProfile

<b:includable id='teamProfile'></b:includable>

Étape 3 : Choisir un emplacement

L'emplacement à trouver est situé dans l'inclusion teamProfile. Un code XML peut être ajouté à l'endroit mentionné ci-dessous :

  <ul>
    <b:loop values='data:authors' var='author'>
      <li>
        <div class='team-member'>
          <b:include data='author' name='teamProfileLink'/>

            <!-- Ajouter le code ici / Add code here -->

        </div>
      </li>
    </b:loop>
  </ul>

Ajouter un code à proximité du message d'état - Gadget Blog Version 1

Étape 1 : Déployer le gadget Blog1

<b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog' visible='true'></b:widget>
Repérer et développer les balises b:widget du gadget Blog

Étape 2 : Déployer l'inclusion main

<b:includable id='main' var='top'></b:includable>
Repérer et développer les balises de l'inclusion main

Étape 3 : Choisir un emplacement

Le code XML du message d'état se trouve dans l'inclusion main. Un code XML peut être ajouté avant ou après :

<!-- Ajouter le code ici / Add code here -->
<b:include data='top' name='status-message'/>
<!-- OU Ajouter le code ici / or Add code here -->
Repérer la balise et ajouter un code XML avant ou après la balise

Ajouter un code à proximité de la pagination - Gadget Blog Version 1 - Vue web

Étape 1 : Déployer le gadget Blog1

<b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog' visible='true'></b:widget>
Repérer et développer les balises b:widget du gadget Blog

Étape 2 : Déployer l'inclusion main

<b:includable id='main' var='top'></b:includable>
Repérer et développer les balises de l'inclusion main

Étape 3 : Choisir un emplacement

Le code XML des liens de navigation se trouve dans l'inclusion main. Un code XML peut être ajouté avant ou après :

<!-- Ajouter le code ici / Add code here -->
<!-- navigation -->
<b:include name='nextprev'/>
<!-- OU Ajouter le code ici / Or add code here -->
Repérer la balise et ajouter un code XML avant ou après la balise

Ajouter un code à proximité de la pagination - Gadget Blog Version 1 - Vue mobile

Étape 1 : Déployer le gadget Blog1

<b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog' visible='true'></b:widget>
Repérer et développer les balises b:widget du gadget Blog

Étape 2 : Déployer l'inclusion mobile-main

<b:includable id='mobile-main' var='top'></b:includable>
Repérer et développer les balises de l'inclusion mobile-main

Étape 3 : Choisir un emplacement

Le code XML des liens de navigation de la version mobile personnalisée se trouve dans l'inclusion mobile-main. Un code XML peut être ajouté avant ou après :

<!-- Ajouter le code ici / Add code here -->
<b:include name='mobile-nextprev'/>
<!-- OU Ajouter le code ici / or add code here -->
Repérer la balise et ajouter un code XML avant ou après la balise

Ajouter un code à proximité des liens de flux - Gadget Blog Version 1

Étape 1 : Déployer le gadget Blog1

<b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog' visible='true'></b:widget>
Repérer et développer les balises b:widget du gadget Blog

Étape 2 : Déployer l'inclusion main

<b:includable id='main' var='top'></b:includable>
Repérer et développer les balises de l'inclusion main

Étape 3 : Choisir un emplacement

Le code XML des liens de flux se trouve dans l'inclusion main. Un code XML peut être ajouté avant ou après :

<!-- Ajouter le code ici / Add code here -->
<!-- feed links -->
<b:include name='feedLinks'/>
<!-- OU Ajouter le code ici / or add code here -->
Repérer la balise et ajouter un code XML avant ou après la balise

Spotlight

Ajouter son blog dans l’omnibox de Firefox

Image
Et si votre blog apparaissait dans la barre de recherche de Firefox ?Firefox propose une fonctionnalité méconnue ou oubliée : la possibilité d’ajouter un moteur de recherche personnalisé dans le navigateur, au même titre que Google, Wikipedia ou Amazon.Ce que beaucoup ignorent, c’est qu’il est tout à fait possible d’intégrer son propre blog Blogger dans cette liste, en quelques étapes simples.Pas besoin d’extension ou de plugin complexe : un simple fichier XML suffit.Dans cet article, nous allons vous montrer comment créer ce fichier, l’héberger, et le connecter à votre blog.C’est une méthode discrète mais efficace pour offrir à vos lecteurs un accès direct à votre contenu, depuis leur propre navigateur.
En savoir plus ➤

Populaires cette semaine

Foire aux questions Blogger (Novembre 2021)

Image
Halloween a ouvert le bal des festivités en ce mois de novembre et attendez-vous à croiser des citrouilles un peu partout sur les produits Google. Plus particulièrement sur la tête des Googlers qui adorent se déguiser en cette période de l'année. Mais ne paniquez pas, ici sur Blogger Code PE, on est sérieusement sérieux et on veille au grain pendant que d'autres s'amusent...
En savoir plus ➤