24 mars 2013

Ajouter Le Bouton Suivre/Follow De Twitter à Blogger

Twitter Follow Me Button
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



<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



<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



<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



<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

12 mars 2013

Gadget Top Commentateurs Avec Image Pour Blogger

Widget Top Commentateur
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 :

Top Commentators

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.

10 mars 2013

Comment Rediriger Une Page Vers Une Autre Dans Blogger

Redirection Temporaire 302
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".
Redirection Blogger

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

5 mars 2013

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

Afficher Cacher Widgets 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=)

Widget Blogger ID

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

1 mars 2013

Comment Utiliser Les Balises Conditionnelles Dans Blogger

Conditional Tags 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érateurSignificationType de valeur
==Est égal à texte ou numérique
!=Est différent detexte ou numérique
&gt;Est plus grand queUniquement numérique
&lt;Est plus petit queUniquement 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é.

Advertissement