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

Gadget Top Commentateurs Avec Image Pour Blogger

Ajouter le "Widget Top Commentateurs Avec Image" dans Blogger Blogspot.
Le but du gadget "Top Commentateurs" est très simple : il affiche sur toutes les pages de votre blog le classement des lecteurs et lectrices qui interagissent le plus sur votre blog: les internautes qui ont posté le plus de commentaires, en affichant leur image personnalisé s'il en ont un, ou l'avatar par défaut sinon, avec un lien vers le profil de cette commentateur ce qui pourrait provoquer vos visiteurs à poster plus de commentaire pour apparaitre dans le Top des Commentateurs.


Démonstration :
Voici une capture d'écran du résultat final :

Ajouter Le Gadget Top Commentateurs Avec Image Dans Blogger

Le Widget "Top Commentateurs" est très simple à installer et très fonctionnel;
Pour l'intégrer à votre blog, accédez à "Mise En Page" > "Ajouter Un Gadget" > "HTML/JavaScript"
et copier/coller le code suivant :

<style type="text/css">
.top-commenter-line img {
height: 40px; //Hauteur de l'avatar
width: 40px; //largeur de l'avatar
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.top-commenter-line {margin: 3px 0;}
.top-commenter-line .profile-name-link {padding-left:0;}
.top-commenter-avatar {vertical-align:middle;}
</style>

<script type="text/javascript">
var maxTopCommenters = 5;   // Nombre de commentateurs à afficher
var minComments = 1;        // Nombre minimum de commentaires pour être affiché
var numDays = 0;            // Depuis combien de jours (ex. 30), ou 0 pour "toute la période"
var excludeMe = true;       // true: inclure les commentaires de l'admin
var excludeUsers = ["Anonymous", "someotherusertoexclude"];     // inclure ces noms d'utilisateurs
var maxUserNameLength = 42; // 0: don't cut, >4: cut usernames
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = '';      // empty, or Anonymous user name localized if you want to localize
//
var sizeAvatar = 56;
var cropAvatar = true;
//
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl6lJrtHapNqgxZXzSatnA_981zsZTBXZZYViiNrD8tzp71CFHyJKXy-YVUEY9rJ7EM-CgUSkXsJ1bwqqfxzWOykvEs5C3glnCzjug6ju21YTA6NOYufY5s9O1IUFTCUtKgvp2SYtszxo/"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeable
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var urlMyProfile = ''; // set if you have no profile gadget on page
var urlMyAvatar = '';  // can be empty (then it is fetched) or url to image
// config end
// for old IEs & IE modes:
if(!Array.indexOf) {
 Array.prototype.indexOf=function(obj) {
  for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
  return -1;
}}
function replaceTopCmtVars(text, item, position)
{
  if(!item || !item.author) return text;
  var author = item.author;

  var authorUri = "";
  if(author.uri && author.uri.$t != "")
    authorUri = author.uri.$t;

  var avaimg = urlAnoAvatar;
  var bloggerprofile = "http://www.blogger.com/profile/";
  if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
    avaimg = author.gd$image.src;
  else {
    var parseurl = document.createElement('a');
    if(authorUri != "") {
      parseurl.href = authorUri;
      avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
    }
  }
  if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
    avaimg = urlMyAvatar;
  if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
    avaimg = urlNoAvatar;
  var newsize="s"+sizeAvatar;
  avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
  if(cropAvatar) newsize+="-c";
  avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");

  var authorName = author.name.$t;
  if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
    authorName = txtAnonymous;
  var imgcode = '<img class="top-commenter-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
  if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';

  if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
    authorName = authorName.substr(0, maxUserNameLength-3) + "...";
  var authorcode = authorName;
  if(authorUri!="") authorcode = '<a class="profile-name-link" href="'+authorUri+'">'+authorcode+'</a>';

  text = text.replace('[user]', authorcode);
  text = text.replace('[image]', imgcode);
  text = text.replace('[#]', position);
  text = text.replace('[count]', item.count);
  return text;
}

var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
  var one_day=1000*60*60*24;
  var today = new Date();

  if(urlMyProfile == "") {
    var elements = document.getElementsByTagName("*");
    var expr = /(^| )profile-link( |$)/;
    for(var i=0 ; i<elements.length ; i++)
      if(expr.test(elements[i].className)) {
        urlMyProfile = elements[i].href;
        break;
      }
  }

  for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
    var entry = json.feed.entry[i];
    if(numDays > 0) {
      var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
      var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);

      //Calculate difference btw the two dates, and convert to days
      var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
      if(days > numDays) break;
    }
    var authorUri = "";
    if(entry.author[0].uri && entry.author[0].uri.$t != "")
      authorUri = entry.author[0].uri.$t;

    if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
      continue;
    var authorName = entry.author[0].name.$t;
    if(excludeUsers.indexOf(authorName) != -1)
      continue;

    var hash=entry.author[0].name.$t + "-" + authorUri;
    if(topcommenters[hash])
      topcommenters[hash].count++;
    else {
      var commenter = new Object();
      commenter.author = entry.author[0];
      commenter.count = 1;
      topcommenters[hash] = commenter;
    }
  }
  if(json.feed.entry.length == 200) {
    ndxbase += 200;
    document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
    return;
  }

  // convert object to array of tuples
  var tuplear = [];
  for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);

  tuplear.sort(function(a, b) {
    if(b[1].count-a[1].count)
        return b[1].count-a[1].count;
    return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
  });

  // list top topcommenters:
  var realcount = 0;
  for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
    var item = tuplear[i][1];
    if(item.count < minComments)
        break;
    document.write('<di'+'v class="top-commenter-line">');
    document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
    document.write('</d'+'iv>');
    realcount++;
  }
  if(!realcount)
    document.write(txtNoTopCommenters);
} 
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>

Cliquer sur "Enregistrer".
Le widget "Top Commentateurs Avec Image" est installé maintenant sur votre blog.

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é.

Widget Articles Récents Avec Image Pour Blogger

Dans cet article nous allons voir comment ajouter le widget "Articles Récents Avec Image" afin d'aider vos visiteurs de retrouver directement les derniers articles de votre blog Blogger.
Ainsi, vous pouvez facilement personnaliser l'affichage du gadget grâce à un certain nombre de paramètres tel que  le nombre d'articles à afficher, la largeur et la longueur de l'image, la taille et la couleur du texte...etc

Comment Installer Le Widget Articles Récents Avec Images Dans Blogger

Connectez-vous à Blogger, allez dans "Mise En Page" ➥ "Ajouter Un Gadget" ➥ dans la liste proposée sélectionnez "HTML/JavaScript" ➥ choisissez un titre, puis copier/coller le code suiavnt dans la grande zone et enfin cliquez sur "Enregistrer"

<script language="JavaScript">
imgr = new Array();
showRandomImg = true;
boxwidth = 300;
cellspacing = 2;
borderColor = "#fff";
bgTD = "#000000";
thumbwidth = 32;
thumbheight = 32;
fntsize = 12;
acolor = "#555";
aBold = true;
icon = " ";
text = "Commentaire(s)";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#555";
icon2 = " ";
numposts = 5;
home_page = "http://www.theblogueur.blogspot.com/";
</script>
<script type="text/javascript" src="http://posts-recent.googlecode.com/files/Widget-Articles-Recent.js" />

Personnalisation Du Gadget

Vous pouvez personnaliser l'affichage du widget "Articles Récents Avec Images" en modifiant les valeurs suivantes :

boxwidth = 300;  : Largeur du gadget en pixel.

cellspacing = 2;   : Espacement entre les titres.

borderColor = "#fff";  : couleur de l'arrière plan du gadget.

thumbwidth = 32;  : Largeur de l'image en pixel.

thumbheight = 32;  : Longueur de l'image en pixel.

fntsize = 12;  : Taille des titres.
acolor = "#555";  : Couleur des titres

aBold = true;  : Texte en gras (sinon remplacer true par false)
text = "Commentaire(s)";  : Texte à afficher à côté du nombre de commentaires.

numposts = 5;  : le nombre d'articles à afficher.
home_page = "http://www.theblogueur.blogspot.com/";  : Vous devez absolument modifier theblogueur.blogspot.com avec l'adresse de votre blog.

Voilà, le widget "Articles Récents Avec Image" est installé maintenant sur votre blog Blogger.

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".

Widget Libellés En Nuage De Mots-Clé Avec Animation Flash

Dans cet article, je vais vous montrer comment installer la nouvelle version du Widget Libellés En Nuage De Mots-Clé Avec Animation Flash dans Blogger Blogspot.
L'installation simple, rapide et sans toucher aucune ligne de code de votre modèle.
Vous pouvez également personnaliser le gadget grâce à un certain nombre d'options telles que la largeur, la hauteur, les couleurs et la vitesse.

Live Démo

Cliquez sur le lien suivant pour voir la démo en live widget libellés en nuage de mots-clé animés :
démo

Ajouter Le Widget Libellés de Mots-Clé Animés Dans Blogger

Connectez-vous à Blogger, allez dans "Mise En Page" ➥ "Ajouter Un Gadget" ➥ dans la liste proposée par Blogger, sélectionnez "HTML/JavaScript" ➥ choisissez le titre du gadget (ex: Catégories) et copier/coller le code suivant dans le grand rectangle puis cliquez sur "Enregistrer"

<div id="w2bFlashContent"><p style="display:none;">Flash Labels by <a href="http://www.TheBlogueur.Blogspot.com/">TheBlogueur</a></p></div>
<script type="text/javascript">
/*<![CDATA[*/
var w2bFlashLabelSettings = {
    blogurl        : "http://TheBlogueur.blogspot.com",
    color          : "333333",
    hoverColor     : "666666",
    backgroundColor: "FFFFFF",
    size           : 12,
    speed          : 100,
    width          : 230,
    height         : 300,
    transparency   : true
};
/*]]>*/
</script>
<script type="text/javascript" src="http://label-cloud.googlecode.com/files/TheBlogueur-new-flash-label-cloud.js"></script>

Configuration Du Gadget

Changer les valeurs des paramètres en rouge pour personnaliser l'affichage du gadget :

blogurl : remplacer http://theblogueur.blogspot.com avec l'adresse de votre blog.
color : couleur du texte
hovercolor : couleur au survol.
backgroundColor : couleur de l'arrière plan.
size : taille du texte.
speed : vitesse de rotation des mots-clé.
width : largeur en pixel.
height : hauteur en pixel.
transparency : remplacer true par false pour désactiver l'effet de transparence.

Pour obtenir les codes couleurs, consultez les liens suivants :
Code Des Couleurs HTML
Générateur De Code Couleur Hexadécimal