Ajouter Le Bouton Suivre/Follow De Twitter à Blogger

Ajouter le bouton Suivre de Twitter (Twitter Follow Me Button) à votre blog Blogger pour augmenter le nombre de vos abonnées et valoriser votre audience en affichant le nombre de personnes qui vous suivent.
L'intégration du bouton Follow Me/Suivez Moi est simplissime et toute personne connectée cliquant sur celui-ci s'abonnera instantanément à vos publications sans même passer par Twitter.

Présentation Et Code Du Bouton Follow/Suivre De Twitter

Bouton Large Avec Compteur

Suivre @TBlogueur

<a href="https://twitter.com/TBlogueur" class="twitter-follow-button" data-show-count="true" data-size="large">Suivre @TBlogueur</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Bouton Large Sans Compteur

Suivre @TBlogueur

<a href="https://twitter.com/TBlogueur" class="twitter-follow-button" data-show-count="false" data-size="large">Suivre @TBlogueur</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Bouton Normal Avec Compteur

Suivre @TBlogueur

<a href="https://twitter.com/TBlogueur" class="twitter-follow-button" data-show-count="true" data-size="medium">Suivre @TBlogueur</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Bouton Normal Sans Compteur

Suivre @TBlogueur

<a href="https://twitter.com/TBlogueur" class="twitter-follow-button" data-show-count="false" data-size="medium">Suivre @TBlogueur</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Configuration Du Bouton

- Remplacez TBlogueur avec votre nom d'utilisateur Twitter.
- Vous pouvez remplacer le mot Suivre avec un mot de votre choix, par exemple : Follow , S'abonner...
- Vous pouvez masquer votre pseudonyme en supprimant @Nom_D'utilisateur.
- Si vous avez déjà installer le bouton de partage Twitter, alors ne recopiez pas le script :

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

car c'est le même utilisé.

Ajouter Le Bouton D'abonnement Suivre De Twitter à Blogger

Pour intégrer le bouton Suivez-moi de Twitter dans votre blog, il vous suffit de copier son code puis allez à "Mise En Page" > "Ajouter un Gadget" > "HTML/JavaScript"
collez le bout de code précédemment copié, puis cliquez sur "Enregistrer".

Pour placer le bouton Follow au début des articles,
allez à "Modèle" > "Modifier le code HTML" > "Développer des modèles de gadgets"
et insérez le code du bouton juste après la balise :

<div class='post-header-line-1'>

Si vous désirez afficher le bouton à la fin de vos articles, alors placez le code approprié juste après une des lignes suivantes :

<div class='post-footer-line post-footer-line-1'>

<div class='post-footer-line post-footer-line-2'>

<div class='post-footer-line post-footer-line-3'>

Pour plus d'informations, visitez la page Twitter ressources :
https://twitter.com/about/resources/buttons#follow

Comment Rediriger Une Page Vers Une Autre Dans Blogger

Blogger offre la fonctionnalité redirection temporaire "302" sous l’appellation "Redirections Personnalisées" qui permet de rediriger automatiquement les visiteurs du blog d'une page à une autre de manière transparente.
Cette fonctionnalité ne s'applique que sur les pages internes de votre blog.
Donc si de manière temporaire une page, un article est inaccessible (après une suppression par erreur par exemple) ou que vous souhaitez que l'url de votre blog pointe directement sur une page spécifique sans passer par la page d’accueil, il peut être intéressant de définir une redirection personnalisée.

Comment Rediriger Une Page Vers Une Autre Dans Blogger

Pour saisir une redirection personnalisée, accédez à "Paramètres" > "Préférences de recherche", puis cliquez sur "Modifier" à côté de "Redirections personnalisées".

Saisissez l'ancienne URL dans le champ "Source" (De) et la nouvelle dans le champ "Destination" (Pour).
à noter que les URLs à mentionner doivent contenir uniquement le chemin path : il ne faut pas indiquer la racine du blog
par exemple, pour un article dont l'url est :

http://www.theblogueur.blogspot.com/2013/03/redirections-personnalisees.html

Ne doit être repris que cette partie :

/2013/03/redirections-personnalisees.html

Pour les pages statiques, la partie qui doit être reprise est :

/p/Nom-De-La-Page.html

Pour les pages libellés :

/search/label/Nom-De-Libellé

Pour rediriger la page d'accueil, il suffit de mentionner un slash "/" :

Pour désactiver une redirection, cocher la case puis cliquer sur "Supprimer".
Cocher la case "Permanent" si vous voulez que les moteurs de recherche prendre en considération la redirection.
Pour ajouter d'autres redirections, sélectionnez "Nouvelle redirection"...

Comment Afficher Ou Cacher Les Widgets Sur Des Pages Specifiques Dans Blogger

Lorsque vous installez un widget dans Blogger, il sera affiché, par défaut, sur toutes les pages de votre blog.
Parfois, vous souhaitez peut être de ne faire apparaître ce widget que sur la page d'accueil, ou de le cacher uniquement dans les pages des articles, ou de l'afficher seulement dans les pages statiques, les pages de libellés ou même dans des pages spécifiques du blog.
Dans cette optique, nous allons utiliser les balises conditionnelles pour pouvoir afficher les widget sur certaines pages et de les masquer sur le reste du blog.

Comment Afficher - Cacher Des Widgets Sur Certaines Pages Dans Blogger

Tout d'abord, il faut connaître le nom du widget, sinon vous devez récupérer son ID : "HTML1", "TEXT1", "LINKLIST3"...
Pour ce faire, allez à "Mise En Page" puis cliquez sur le lien "Modifier" dans le widget désiré.
L'id du gadget apparaît à la fin de l'url dans la barre d'adresse de la petite fenêtre qui s'ouvre.(juste après widgetid=)

Une fois l'id récupéré, allez à "Modèle" > "Modifier le code HTML" > et cochez la case "Développer des modèles de gadgets". Recherchez ensuite votre widget en utilisant la fonction CTRL+F et en saisissant le nom ou l'id du gadget dans la zone de recherche.
Vous allez trouver un code qui ressemble à ceci :

<b:widget id='ID_Du_Gadget' locked='false' title='Nom_Du_Gadget' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

 C'est le code du widget ou gadget que vous avez ajouté dans la rubrique "Mise En Page".
Il ne reste qu'à ajouter les balises conditionnelles en dessous et au-dessus des balises <b:includable id='main'> et </b:includable> pour afficher les widgets dans des pages ou messages spécifiques. Et d'insérer un code CSS juste après la balise <b:include name='quickedit'/> afin que le contenu du widget n’apparaîtra pas comme une boîte vide sur le reste des pages.
Voici quelques exemples :

Afficher le widget seulement dans la page d'accueil :

<b:widget id='ID_Du_Gadget' locked='false' title='Nom_Du_Gadget' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
<b:else/>
<style type='text/css'>
#ID_Du_Gadget {display:none;}
</style>
</b:if>
</b:includable>
</b:widget>

Afficher le widget seulement dans les pages de messages (les articles) :

<b:widget id='ID_Du_Gadget' locked='false' title='Nom_Du_Gadget' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
<b:else/>
<style type='text/css'>
#ID_Du_Gadget {display:none;}
</style>
</b:if>
</b:includable>
</b:widget>

Afficher le widget seulement dans les pages statiques :

<b:widget id='ID_Du_Gadget' locked='false' title='Nom_Du_Gadget' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
<b:else/>
<style type='text/css'>
#ID_Du_Gadget {display:none;}
</style>
</b:if>
</b:includable>
</b:widget>

Afficher le widget seulement dans les pages articles et les pages statiques :

<b:widget id='ID_Du_Gadget' locked='false' title='Nom_Du_Gadget' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:post.url'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
<b:else/>
<style type='text/css'>
#ID_Du_Gadget {display:none;}
</style>
</b:if>
</b:includable>
</b:widget>

Afficher le widget uniquement dans une page spécifique :

<b:widget id='ID_Du_Gadget' locked='false' title='Nom_Du_Gadget' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == &quot;URL_De_La_Page&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
<b:else/>
<style type='text/css'>
#ID_Du_Gadget {display:none;}
</style>
</b:if>
</b:includable>
</b:widget>

Cacher le widget seulement dans les pages archives :

<b:widget id='ID_Du_Gadget' locked='false' title='Nom_Du_Gadget' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != &quot;archive&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
<b:else/>
<style type='text/css'>
#ID_Du_Gadget {display:none;}
</style>
</b:if>
</b:includable>
</b:widget>

Afficher le widget uniquement sur la page d'accueil et les pages de libellés :

<b:widget id='ID_Du_Gadget' locked='false' title='Nom_Du_Gadget' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.searchLabel'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
<b:else/>
<style type='text/css'>
#ID_Du_Gadget {display:none;}
</style>
</b:if>
</b:if> 
</b:includable>
</b:widget>

Pour plus d'informations sur les balises conditionnelles, consultez l'article suivant :
Comment utiliser les balises conditionnelles <b:if>, <b:else/> dans Blogger

Comment Utiliser Les Balises Conditionnelles Dans Blogger

Les balises conditionnelles <b:if> / <b:else/> ( si / sinon) sont des éléments spécifiques à Blogger qui offrent davantage de souplesse en permettant de définir des modifications de modèle qui ont lieu uniquement dans certaines conditions.
Les balises des conditions, Blogger Conditional Tags, sont utilisées dans le code HTML du modèle pour indiquer aux navigateurs ce que doit être afficher ou cacher selon le cas.
Vous allez voir que les conditions constituent vraiment la base pour rendre votre blog dynamique, c'est-à-dire pour afficher des choses différentes en fonction de type des pages, de l'auteur, du nombre de commentaires, etc.

Principe Et Syntaxe Des Balises Conditionnelles

Le principe d'utilisation des balises conditionnelles est simple : on définie une condition et le contenu sera exécuté selon tel ou tel cas.
Ces balises peuvent être insérées aussi bien dans le code HTML du modèle que dans une gadget HTML/Js.
D'une manière générale, la syntaxe (en français) est la suivante :

Si Condition  = élément_comparé | opérateur de comparaison | élément comparant
=>Exécuter cette partie
Sinon
=>Exécuter cette autre partie
Fin si

Exemple :

SI le type de la page est égale à TYPE
=> Exécuter cette partie
SINON
=> Exécuter cette autre partie
Fin de condition 
 

on peut aussi utiliser une deuxième condition à la place de SINON :

SI le type de la page est égale à TYPE
=> Exécuter cette partie
Fin de condition1 
SI le type de la page est différent de  TYPE
=> Exécuter cette autre partie
Fin de condition2

Par exemple, si on veut afficher BONJOUR dans les pages article et BYE sur toutes les autres pages, alors en langage HTML cela donne :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
BONJOUR
<b:else/>
BYE
</b:if>

ou encore :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
BONJOUR
</b:if>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
BYE
</b:if>

* à noter que la comparaison avec un autre élément n'est pas obligatoire; donc s'il n'existe pas d'élément comparant, la comparaison se fait selon le contenu de la donnée.
Exemple :

<b:if cond='data:post.title'>

Cependant, la balise b:else n'est pas aussi obligatoire. Elle est utile s'il s'agit d'exécuter une alternative.

 * L'élément comparé peut être une donnée Blogger, une valeur texte ou une valeur numérique.
s'il s'agit d'une valeur texte, elle doit être encadré de guillemet (' ') échappés (&quot;) => Exemple : &quot;Texte encadré&quot;

* Les opérateurs de comparaison :
Voici comment comparer les données dans Blogger :

Opérateur	Signification	Type de valeur
==	Est égal à	texte ou numérique
!=	Est différent de	texte ou numérique
>	Est plus grand que	Uniquement numérique
<	Est plus petit que	Uniquement numérique

Les Différents Types De Pages Blogger Et Les Balises Conditionnelles à Utiliser

La page d'accueil du blog : Blogger Home page

<b:if cond='data:blog.url == data:blog.homepageUrl'>
{...}
</b:if>

Les pages articles (message,post) ou Items

<b:if cond='data:blog.pageType == &quot;item&quot;'>
{...}
</b:if>

Les pages index : index page 
Elle se réfère à toutes les autres pages sauf les pages articles càd la page d'accueil, de libellés, des archives et celle de la recherche.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
{...}
</b:if>

Les pages statiques : static page

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
{...}
</b:if>

Cibler à la fois les pages articles et les pages statiques

<b:if cond='data:blog.url == data:post.url'>
{...}
</b:if>

Les pages de libellés : Label page

<b:if cond='data:blog.searchLabel'>
{...}
</b:if>

Les pages des archives : Archive page

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
{...}
</b:if>

Une page en particulier :
Il suffit d'insérer l'adresse URL de la page désirée.

<b:if cond='data:blog.url == &quot;URL_De_La_Page&quot;'>
{...}
</b:if>

Page d'erreur 404 : Blogger error page

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
{...}
</b:if>

Le premier article ou l'article le plus récent du blog

<b:if cond='data:post.isFirstPost'>

La version mobile

<b:if cond='data:blog.isMobile'>

Inverser Une Condition

Une condition peut être inversé simplement en remplaçant l'opérateur == (est égal à) avec l'opérateur != (est différent de) :

<b:if cond='data:blog.url != data:blog.homepageUrl'>
{...}
</b:if>

Dans l'exemple précédant le contenu va s'afficher dans toutes les pages du blog mais pas dans la page d'accueil.

Comment utiliser les balises conditionnelles

Le contenu qu'on veut afficher/masquer doit être insérer à l'intérieur de la condition càd entre les deux balises <b:if...> et </b:if>
Les conditions peuvent être utiliser n'importe-où dans le code HTML, mais dans certain cas il faut les insérer avec soin afin d'éviter l'affichage des erreurs lors de l'enregistrement du modèle.
Par exemple si on veut appliquer une condition sur un widget il faut la mettre entre les deux balises <b:includable id=....> et </b:includable>
Dans certaines situations il faut regrouper plusieurs conditions afin d'arriver à un résultat. Par exemple pour afficher un contenu dans la page d'accueil, dans les pages statiques et dans un article en particulier, il faut écrire ça :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.url == &quot;static_page&quot;'>
<b:if cond='data:blog.url == &quot;URL_De_La_Page&quot;'> 
Le contenu qu'on veut l'afficher uniquement si on se trouve dans la page d'accueil ou dans une page statique ou dans l'article indiqué.
</b:if>
</b:if>
</b:if>

N'oubliez surtout pas de fermer les conditions avec la balise </b:if> pour chaque <b:if...> usé.

Liste Déroulante Avec Liens Hypertexte

Afficher une liste déroulante HTML dont chaque option serait un lien hypertexte aboutissant à une des pages de votre site/blog.
Lorsque l'on choisi un élément, l'url de cette page s'ouvre sans que l'on soit obliger de cliquer sur un bouton envoyer (submit).
Dans la suite, nous allons voir comment créer une liste déroulante simple contenant une série de liens parmi lesquelles le visiteur peut en choisir un, et une autre liste qui demande d'utiliser l'élément optgroup si vous choisissez de regrouper des éléments.  

Comment Créer Une Liste Déroulante Avec Des Liens Hypertextes

Démonstration

-Selectionnez votre destination- Widget Libellés En Nuage Animé Widget Commentaires Récents Ajouter L'effet Arc En Ciel Formulaire De Contact Gratuit

Code De La Liste

<script language="JavaScript">
function ChangeUrl(formulaire)
   {
   if (formulaire.ListeUrl.selectedIndex != 0)
      {
     var url ;
     url = formulaire.ListeUrl.options[formulaire.ListeUrl.selectedIndex].value;
     window.open(url,'_blank');
       }
   }
</script>
<FORM >
<SELECT NAME="ListeUrl" SIZE=1 onChange="ChangeUrl(this.form)"  >
<OPTION SELECTED VALUE="">-Menu Déroulant De Liens-</option>
  <option value="Lien 1">Titre 1</option>
  <option value="Lien 2">Titre 2</option>
  <option value="Lien 3">Titre 3</option>
  <option value="Lien 4">Titre 4</option> 
</SELECT>
</FORM>

Configuration De La Liste

Menu Déroulant De Liens :  c'est le titre à afficher sur la lite, vous pouvez le modifier avec un titre de votre choix.
Lien 1, Lien2, Lien 3 et Lien 4 sont les adresses (url) des pages vers lesquelles vont pointer les entrées Titre1, Titre 2, Titre 3 et Titre 4; Vous devez faire les modifications nécessaires.
Vous pouvez rajouter autant de liens que vous le désirez en recopiant la ligne : 

<option value="Lien X">Titre X</option>

Liste Déroulante Avec Regroupement D'éléments :

Plutôt que de définir les éléments <option> les uns à la suite des autres, ce qui donne un aspect uniforme à la liste une fois déroulée, il est possible de créer des groupes d’options et de leur attribuer un titre qui fait ressortir les groupements effectués pour structurer la liste, en particulier quand elle contient un grand nombre d’éléments. Pour réaliser ces groupes, il faut faire intervenir l’élément <optgroup> dans l’élément <select>.

Démonstration :

-Selectionnez votre destination- Liens De Navigation Blogger Résumé Automatique Avec Image Bouton De Partage Facebook Bouton StumbleUpon Bouton De Partage LinkedIn Sitemap Blogger Inscription Moteurs De Recherche

Code De La Liste

<script language="JavaScript">
function ChangeUrl(formulaire)
   {
   if (formulaire.ListeUrl.selectedIndex != 0)
      {
     var url ;
     url = formulaire.ListeUrl.options[formulaire.ListeUrl.selectedIndex].value;
     window.open(url,'_blank');
       }
   }
</script>
<FORM >
<SELECT NAME="ListeUrl" SIZE=1 onChange="ChangeUrl(this.form)"  >
<OPTION SELECTED VALUE="">-Menu Déroulant De Liens-</option>
<optgroup label="Groupe 1">
  <option value="Lien 1">Titre1</option>
  <option value="Lien 2">Titre 2</option>
</optgroup>
<optgroup label="Groupe 2">
  <option value="Lien 3">Titre 3</option>
  <option value="Lien 4">Titre 4</option> 
<option value="Lien 5">Titre 5</option>
</optgroup>
<optgroup label="Groupe 3">
<option value="Lien 6">Titre 6</option>
  <option value="Lien 7">Titre 7</option> 
</optgroup>
</SELECT>
</FORM>

Configuration De La Liste 

Les options de chaque groupe sont incluses entre les balises <optgroup> et </optgroup>. À l’intérieur d’un élément <select>, on peut inclure autant de groupes que l’on veut. Le libellé de chaque groupe est donné dans l’attribut label de l’élément <optgroup>.

Comment Ajouter Un Menu Déroulant De Liens Dans Blogger

Copier le code de la liste de votre choix (sans ou avec regroupement d'éléments) et allez à :
"Mise En Page" > "Ajouter un Gadget" > "HTML/JavaScript"
collez le code dans la petite fenêtre qui s'ouvre, et enfin cliquez sur "Enregistrer".

Ajouter L'effet Arc En Ciel Sur Vos Liens

L'effet Arc En Ciel (rainbow colors effect) donnera des couleurs aléatoires au passage de la souris sur les liens de votre blog et ces derniers reprennent leur couleur d'origine quand la souris se retire.
Si vous en avez marre des couleurs uniques et que vous voulez mettre un peu d'effet sur vos liens de manière assez simple, alors ajouter le widget "Arc En Ciel".

Démonstration

Faites passer la souris sur les liens suivants pour voir l'effet Arc En Ciel :

Ajouter L'effet Arc En Ciel Sur Vos liens

Pour ajouter l'effet arc en ciel sur les liens de votre blog, procédez comme suit:
Allez à "Mise En Page" ➥ "Ajouter Un Gadget" ➥ "HTML/JavaScript"
Collez le code suivant dans la fenêtre qui s'ouvre puis cliquez sur "Enregistrer".

<script src="http://arc-en-ciel.googlecode.com/files/arc-en-ciel.js" type="text/javascript"></script>

Comment Ajouter Un Flux RSS Pour Chaque Libellé Blogger

Comment ajouter un lien Flux RSS pour chaque libellé Blogger.
Dans ce tutoriel, nous allons voir comment ajouter un bouton image devant toutes les libellés (catégories) de votre blog Blogger afin de permettre à vos visiteurs de s'abonner aux articles appartenant à un libellé particulier au lieu de s'inscrire à tous les messages du blog.
Ceci est très utile pour les Blogs "mixte" avec plusieurs catégories de type différent.

Avant De Commencer

1. Sauvegardez une copie de votre modèle actuel et de vos widgets sur votre disque dur.
Pour ce faire, allez à "Modèle", cliquer sur le bouton "Sauvegarder/Restauration" situé en haut à droite, puis cliquer sur "Télécharger le modèle complet".

2. Le widget Libellé doit être installé sur votre blog. Si ce n'est pas le cas, rendez-vous dans l'onglet "Mise En Page" de votre blog, et cliquez sur "Ajouter un gadget".
Dans la liste des gadgets proposée par Blogger, sélectionnez "Libellés". Vous pouvez ensuite configurer ce gadget en choisissant d'afficher tous les libellés de votre blog, ou seulement une sélection correspondant à vos catégories les plus importants. Ces libellés pourront également être classés par fréquence ou par ordre alphabétique. Il ne vous restera ensuite qu'à choisir l'emplacement de votre widget libellés.

Comment Ajouter Un Flux RSS à Chaque Libellé Blogger

Pour ajouter un flux RSS pour chaque libellé Blogger, procédez comme suit :
1. Allez à "Modèle" ➥ "Modifier le code HTML" ➥ "Développer les modèles de gadgets"

2. Cherchez et remplacez ce code: 

<b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>

Avec le code suivant :

<b:loop values='data:labels' var='label'>
        <li>
    <a expr:href='data:blog.homepageUrl + "feeds/posts/default/-/" + data:label.name'>
        <img alt='S inscrire' src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png' style='vertical-align:middle;border:0' />
    </a>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>

Notez que vous pouvez choisir pratiquement n'importe quelle image en modifiant l'url suivante :
http://www.feedburner.com/fb/images/pub/feed-icon16x16.png

3. Enregistrer ensuite votre modèle.

Et voilà, vous avez maintenant ajouter un lien de flux RSS pour chaque libellé de votre blog Blogger.

Ajouter Un Menu Horizontal Déroulant Dans Blogger

Nous allons voir dans ce tutoriel comment ajouter un menu horizontal déroulant à quatre niveaux (Menu et Sous Menus) dans Blogger Blogspot.
Le menu de navigation à niveaux multiple vous aidera à bien organiser les catégories et les liens importants de votre blog. Ainsi, il permettra à vos lecteurs de naviguer facilement à travers le blog et le déplacement entre les différentes rubriques devient plus confort.

Comment Ajouter Un Menu Horizontal Déroulant à Blogger

Avant de commencer, vous pouvez voir la démo ici : blogueur- test.blogspot.com

Allez à "Mise En Page" et juste en dessous de l'entête de votre blog, cliquez sur "Ajouter Un Gadget".

Dans la liste proposée par Blogger choisissez "HTML/JavaScript", collez le code du menu dans la fenêtre qui s'ouvre puis cliquez sur "Enregistrer".

Voici le code du menu à insérer :

 <script src='http://theblogueur-menu.googlecode.com/files/TheBlogueur_Menu.js'
type='text/javascript'></script>
<style>
/* ######### Menu Horizontal Déroulant TheBlogueur.blogspot.com ######### */  
/* ######### Menu Horizontal Déroulant à Multiple Niveaux ######### */
.ddsubmenustyle, .ddsubmenustyle div {
        /*topmost and sub DIVs, respectively*/
    font: normal 13px Verdana;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    list-style-type: none;
    background: white;
    border: 1px solid black;
    border-bottom-width: 0;
    visibility: hidden;
    z-index: 100;
}

.ddsubmenustyle ul {
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    list-style-type: none;
    border: 0px none;
}

.ddsubmenustyle li a {
    display: block;
    width: 170px;
        /*width of menu (not including side paddings)*/
    color: black;
    background-color: lightyellow;
    text-decoration: none;
    padding: 4px 5px;
    border-bottom: 1px solid black;
}

* html .ddsubmenustyle li {
        /*IE6 CSS hack*/
    display: inline-block;
    width: 170px;
        /*width of menu (include side paddings of LI A*/
}

.ddsubmenustyle li a:hover {
    background-color: black;
    color: white;
}

.downarrowpointer {
        /*CSS for "down" arrow image added to top menu items*/
    padding-left: 4px;
    border: 0;
}

.rightarrowpointer {
        /*CSS for "right" arrow image added to drop down menu items*/
    position: absolute;
    padding-top: 3px;
    left: 100px;
    border: 0;
}

.ddiframeshim {
    position: absolute;
    z-index: 500;
    background: transparent;
    border-width: 0;
    width: 0;
    height: 0;
    display: block;
}
    /* ######### Black Strip Main Menu Bar CSS ######### */
.mattblackmenu ul {
    margin: 0;
    padding: 0;
    font: bold 12px Verdana;
    list-style-type: none;
    border-bottom: 1px solid gray;
    background: #414141;
    overflow: hidden;
    width: 100%;
}

.mattblackmenu li {
    display: inline;
    margin: 0;
}

.mattblackmenu li a {
    float: left;
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 6px 8px;
        /*padding inside each tab*/
    border-right: 1px solid white;
        /*right divider between tabs*/
    color: white;
    background: #414141;
}

.mattblackmenu li a:visited {
    color: white;
}

.mattblackmenu li a:hover {
    background: black;
        /*background of tabs for hover state */
}

.mattblackmenu a.selected {
    background: black;
        /*background of tab with "selected" class assigned to its LI */
}
</style>
<div id="ddtopmenubar" class="mattblackmenu">
    <ul>
        <li>
            <a href="#">LINK1</a>
        </li>
        <li>
            <a href="#" rel="ddsubmenu1">LINK2</a>
        </li>
        <li>
            <a href="#" rel="ddsubmenu2">LINK3</a>
        </li>
        <li>
            <a href="#">Link4</a>
        </li>
        <li>
            <a href="#" rel="ddsubmenu3">LINK5</a>
        </li>
    </ul>
</div>
<script type="text/javascript">
    ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar| sidebar")
</script>
<ul class='ddsubmenustyle' id='ddsubmenu1'>
    <li>
        <a href='#'>LINK2 ITEM 1</a>
    </li>
    <li>
        <a href='#'>LINK2 ITEM 2</a>
        <ul>
            <li>
                <a href='#'>LINK2 ITEM 2.1</a>
            </li>
            <li>
                <a href='#'>LINK2 ITEM 2.2</a>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK2 ITEM 3</a>
        <ul>
            <li>
                <a href='#'>LINK2 ITEM 3.1</a>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK2 ITEM 4</a>
    </li>
</ul>
<ul class='ddsubmenustyle' id='ddsubmenu2'>
    <li>
        <a href='#'>LINK3 ITEM 1</a>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 2</a>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 3</a>
        <ul>
            <li>
                <a href='#'>LINK3 ITEM 3.1</a>
            </li>
            <li>
                <a href='#'>LINK3 ITEM 3.2</a>
            </li>
            <li>
                <a href='#'>LINK3 ITEM 3.3</a>
            </li>
            <li>
                <a href='#'>LINK3 ITEM 3.4</a>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 4</a>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 5</a>
        <ul>
            <li>
                <a href='#'>LINK3 ITEM 5.1</a>
            </li>
            <li>
                <a href='#'>LINK3 ITEM 5.2</a>
                <ul>
                    <li>
                      &n bsp; <a href='#'>LINK3 ITEM 5.2 1</a>
                    </li>
                    <li>
                      &n bsp; <a href='#'>LINK3 ITEM 5.2 2</a>
                    </li>
                    <li>
                      &n bsp; <a href='#'>LINK3 ITEM 5.2 3</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 6</a>
    </li>
</ul>
<ul class='ddsubmenustyle' id='ddsubmenu3'>
    <li>
        <a href='#'>LINK5 ITEM 1</a>
    </li>
    <li>
        <a href='#'>LINK5 ITEM 2</a>
    </li>
    <li>
        <a href='#'>LINK5 ITEM 3</a>
    </li>
    <li>
        <a href='#'>LINK5 ITEM 4</a>
    </li>
    <li>
        <a href='#'>LINK5 ITEM 5</a>
    </li>
</ul> 

Comment Personnaliser Le Menu De Navigation

• Pour changer la couleur du fond, il suffit de changer background: #414141;
• Remplacez toutes les signes # avec votre propres liens.
• Remplacez LINKS x et Item x avec les titres des liens.
• Pour créer un sous-menu à l'intérieur d'un menu il suffit de lui ajouter l'attribut "rel" comme indiqué dans le code ci-dessus : rel="ddsubmenu1" et changez le nombre du menu en conséquence.  

Note: Les liens de libellés dans Blogger prennent la forme suivante :

<a href="http://Nom-De-Votre-Blog.blogspot.com/search/label/Nom-De-Libellé">Titre-De-L'URL</a>

Par défaut, les libellés Blogger affiche 20 articles par page.
Utilisez alors l'URL ci-dessous pour afficher le nombre d'articles que vous voulez:

<a href='http://Nom-De-Votre-Blog.blogspot.com/search/label/Nom-De- Libellé?&amp;max-results=X'>Titre-De- L'URL</a>

X: le nombre d'articles à afficher.

Des problèmes ? des questions à propos de ce tutoriel ?
Vous pouvez me contacter via les commentaires.