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

25 commentaires:

  1. Bonjour,
    bravo pour ce tuto !
    J'utilisais déjà les instructions sur mon site www.tendance-talons.com, mais quand les widgets n'étaient pas affichés, il y avait une boîte vide. Je ne connaissais pas l'astuce de la commande css {display : none}. MERCI !
    J'ai une question : est-il possible de ne pas afficher un widget sur des articles qui contiennent un libellé donné (pas sur la page de recherche du libellé, mais bien sur les articles qui contiennent ce libellé) ? Et réciproquement, d'afficher un widget donné uniquement sur les articles qui contiennent un libellé donné ?
    Merci d'avance, et keep up the good work !

    RépondreSupprimer
  2. Bonjour ,
    essayer avec les balises suivantes :

    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.name == &quot;Le_NOM_DE_Libellé#1&quot;'>
    Mettez ici le contenu que vous voulez l'afficher
    </b:if>
    </b:loop>

    Si vous voulez afficher/masquer un contenu sur plusieurs libellés, alors utilisez le code suivant :

    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.name == &quot;NOM-DE-LIBELLE-1&quot;'>
    LE CONTENU à AFFICHER
    </b:if>
    <b:if cond='data:label.name == &quot;NOM-DE-LIBELLE-2&quot;'>
    LE CONTENU à AFFICHER
    </b:if>
    <b:if cond='data:label.name == &quot;NOM-DE-LIBELLE-3&quot;'>
    LE CONTENU à AFFICHER
    </b:if>
    etc.......
    </b:loop>

    - Attention aux noms des libellés : ils sont sensibles à la casse, MON_LIBELLE est différent de mon_libellé...

    - Sauvegarder votre modèle avant de commencer les tests.

    Bonne chance.

    RépondreSupprimer
  3. Merci pour votre réponse. Malheureusement, impossible de faire fonctionner l'instruction "loop" :(((( J'ai essayé pendant 2 heures en la plaçant à tous les endroits possible dans le code du widget, ça ne marche pas... Tant pis... Merci quand même !

    RépondreSupprimer
  4. Bonjour,
    est il possible de n'afficher un widget que sur deux URL, c'est à dire http://monblog.blogspot.com/ et http://monblog.blogspot.com/# ?

    Car en fait pour mon lien vers le haut de page j'ai mis en href="#", mais le problème c'est que le widget que je ne veux afficher QUE sur la page d'accueil disparaît...

    Merci d evotre réponse !

    RépondreSupprimer
  5. Bonjour ,
    Dans votre cas il faut regrouper deux conditions :
    <b:if cond='data:blog.url == &quot;http://monblog.blogspot.com&quot;'>
    <b:if cond='data:blog.url == &quot;http://monblog.blogspot.com/#&quot;'>
    et n'oubliez pas de fermer les conditions avec deux balises </b:if>

    RépondreSupprimer
  6. Bonsoir :)
    Serait-il possible d'afficher un widget partout sur le blog sauf une seule et unique page statique ?

    Merci.
    BEN

    RépondreSupprimer
  7. Bonjour,
    Savez-vous comment mettre 3 widgets images les uns à côté des autres (à l'horizontal) et pas les uns en dessous des autres ?
    Merci, bonne journée !

    RépondreSupprimer
  8. Bonjour,
    J'ai suivi vos indications et j'ai supprimé avec succès les gadgets de la droite sur toutes les pages de mon blog sauf sur la page d'accueil ! Merci pour ce tuto !
    En revanche, je souhaite mettre le gadget "Contactform1" uniquement sur la page "présentation". Pour ce faire, j'ai inséré au dessous de b:includable id='main' la ligne avec l'url de la page en question http://eau-en-couleurs.blogspot.fr/p/presentation.html ,et j'ai fait le reste comme pour les autres gadgets.
    mais, le formulaire de contact n'apparait sur aucune page ?
    Pouvez-vous m'aider ?

    RépondreSupprimer
  9. Magnifique travail, et un bon effort, je vous remercie pour votre sujet :)
    Dans le même cadre, je voudrais vous proposer ce merveilleux programme où vous pouvez obtenir des milliers de visiteurs sans le moindre effort:
    Une explication complète du programme des visiteurs et l'inscription des membres et des listes de diffusion: Rusers

    bon chance :)

    RépondreSupprimer
  10. Howdy! Someone in my Myspace group shared this website with us
    so I came to check it out. I'm definitely loving the information.

    I'm bookmarking and will be tweeting this to my followers!
    Fantastic blog and terrific design and style.



    my webpage ... Saints Row IV pas cher

    RépondreSupprimer
  11. Bonjour, j'essaie d'afficher un widget (contact) uniquement sur une page.

    Apparemment la condition n'est jamais reconnue.

    J'ai essayé avec tous les noms de page, mais cela ne marche jamais.

    Par contre si je mets une condition !=, il s'affiche dans toutes les pages.

    J'ai essayé en encadrant le nom de page avec " URL " et " URL "


    Donc je me demandais s'il n'y aurait pas un caractère dans mon nom de page, que le test n'aimerait pas.

    Il y a un "-" dans mon nom de blog.


    Y a

    RépondreSupprimer
  12. Ca marche super :) ! Merci beaucoup.

    RépondreSupprimer
  13. Très bon tuto parfaitement détaillé et proposant toutes les options possibles. Merci.

    RépondreSupprimer
  14. Bonjour à tous !
    Est-il possible d'afficher un widget sur la page d'accueil et également sur deux autres pages ? Si oui, pouvez-vous m'expliquer la méthode ?
    Merci,
    Cordialement.

    RépondreSupprimer
  15. merci pour ton tuto, simple et facile à comprendre.

    RépondreSupprimer
  16. Super merci ! Même 3 ans après la publication de ce tuto cela marche toujours. J'ai fais quelques modif pour ne pas afficher un widget que sur une page en particulier, ..... trop facile.

    RépondreSupprimer
  17. Merci ! Méthode parfaite pour cibler de manière plus intelligente...

    RépondreSupprimer
  18. J'ai l'honneur de visiter votre blog.Bonne continuation

    RépondreSupprimer
  19. bonjour - si l'article est toujorus d'actualité j'aimerais pour ma part cacher un gadget sur ma version pc mais pas mobile comment puis je faire ? merci

    RépondreSupprimer
  20. Bonjour,
    Çà fonctionne très bien dans le modèle SOHO.

    RépondreSupprimer