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.
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=)
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
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 :
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 :
Pour plus d'informations sur les balises conditionnelles, consultez l'article suivant :
Comment utiliser les balises conditionnelles <b:if>, <b:else/> dans Blogger
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".<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>
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>
<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 == "item"'>
<!-- 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>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- 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 == "static_page"'>
<!-- 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>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "static_page"'>
<!-- 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>
<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 == "URL_De_La_Page"'>
<!-- 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>
<b:includable id='main'>
<b:if cond='data:blog.url == "URL_De_La_Page"'>
<!-- 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 != "archive"'>
<!-- 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>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "archive"'>
<!-- 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>
<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
Bonjour,
RépondreSupprimerbravo 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 !
Bonjour ,
RépondreSupprimeressayer avec les balises suivantes :
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == "Le_NOM_DE_Libellé#1"'>
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 == "NOM-DE-LIBELLE-1"'>
LE CONTENU à AFFICHER
</b:if>
<b:if cond='data:label.name == "NOM-DE-LIBELLE-2"'>
LE CONTENU à AFFICHER
</b:if>
<b:if cond='data:label.name == "NOM-DE-LIBELLE-3"'>
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.
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épondreSupprimerBonjour,
RépondreSupprimerest 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 !
Bonjour ,
RépondreSupprimerDans votre cas il faut regrouper deux conditions :
<b:if cond='data:blog.url == "http://monblog.blogspot.com"'>
<b:if cond='data:blog.url == "http://monblog.blogspot.com/#"'>
et n'oubliez pas de fermer les conditions avec deux balises </b:if>
Bonsoir :)
RépondreSupprimerSerait-il possible d'afficher un widget partout sur le blog sauf une seule et unique page statique ?
Merci.
BEN
Bonjour,
RépondreSupprimerSavez-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 !
Bonjour,
RépondreSupprimerJ'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 ?
Magnifique travail, et un bon effort, je vous remercie pour votre sujet :)
RépondreSupprimerDans 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 :)
Howdy! Someone in my Myspace group shared this website with us
RépondreSupprimerso 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
Bonjour, j'essaie d'afficher un widget (contact) uniquement sur une page.
RépondreSupprimerApparemment 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
Ca marche super :) ! Merci beaucoup.
RépondreSupprimerTrès bon tuto parfaitement détaillé et proposant toutes les options possibles. Merci.
RépondreSupprimerBonjour à tous !
RépondreSupprimerEst-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.
merci pour ton tuto, simple et facile à comprendre.
RépondreSupprimerSuper 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épondreSupprimerMerci ! Méthode parfaite pour cibler de manière plus intelligente...
RépondreSupprimerJ'ai l'honneur de visiter votre blog.Bonne continuation
RépondreSupprimerc'est un article très intèressant.
RépondreSupprimerWatch Super Bowl 2018 Live Stream HD Online Here:
RépondreSupprimerSuper Bowl 2018
Super Bowl 2018 Tickets
Super Bowl Tickets
Super Bowl 2018 Live
Super Bowl 2018 Live Stream
Super Bowl 52
Super Bowl 52 Tickets
Super Bowl 52 Live
Super Bowl 52 Live Stream
Super Bowl LII
Super Bowl LII Tickets
Super Bowl LII Live
Super Bowl LII Live Stream
Watch Winter Olympics 2018 Live Stream HD Online Here:
RépondreSupprimerWinter Olympics 2018
Winter Olympics 2018 Live
Winter Olympics 2018 Live Stream
Buy Elton John Tour 2018 Best Tickets Here:
RépondreSupprimerElton John Tour
Elton John Tour 2018
Elton John Tour Tickets
Elton John Tour 2018 Tickets
Elton John Tour
RépondreSupprimerElton John Tour 2018
Genesis Open
Genesis Open 2018
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épondreSupprimerBonjour,
RépondreSupprimerÇà fonctionne très bien dans le modèle SOHO.
very nice content
RépondreSupprimer