Suite à mon tutoriel pour afficher du contenu sur certaines page du blog, vous avez été nombreux à me demander comment créer une page statique sur Blogger. Comment cacher les articles et la barre latérale sur la page d'accueil, et les remplacer par des gadgets qui ne s'afficheraient que sur la page d'accueil ?
Et bien je vous explique tout dans ce nouveau tutoriel !
Sommaire
- Faire une sauvegarde de votre blog
- Ajouter une nouvelle section pour la page d'accueil
- Modifier l'apparence de la section
- Cacher les articles et la barre latérale sur la page d'accueil
- N'afficher la nouvelle section QUE sur la page d'accueil
- Rectifier l'affichage des articles dans les aperçus
Faire une sauvegarde de votre blog
Comme toujours, faites une sauvegarde de votre thème avant d'y apporter des modifications !Si vous faites une erreur vous pourrez alors facilement revenir en arrière !
Pour savoir comment faire une sauvegarde de son blog / thème et comment la charger en cas d'erreur, suivez le tutoriel ;)
Ajouter une nouvelle section pour la page d'accueil
Une fois que vous avez fait une sauvegarde de votre blog, cliquez sur Modifier le code HTML :
Cliquez n'importe où dans la boîte de code. Appuyez sur Ctrl et F en même temps (ou Cmd et F pour Mac). Un champ de recherche doit apparaître en haut à droite de la boîte de code. Si le champ de recherche apparaît en haut de la page web, cliquez bien à l'intérieur de la boîte de code et appuyez à nouveau sur Ctrl et F.
Dans le champ de recherche qui apparaît en haut à droite de la boîte de code collez :
<div class='main-outer'>
Vous serez dirigé vers ce code
Au-dessus de cette ligne de code, nous allons ajouter une section. Une section est un bloc pouvant contenir des gadgets.
Voici le code que nous allons ajouter pour ajouter une section :
<b:section id='gadgets-accueil' showaddelement='yes' name='Gadgets Accueil'></b:section>
<div class='main-outer'>
Enregistrez votre thème.
Maintenant vous pouvez ajouter des gadgets à cette nouvelle section. Pour cela allez dans Mise en Page, puis rechargez la page pour que la section apparaisse.
Vous verrez une nouvelle zone qui s'appelle Gadgets Accueil.
Ajoutez les gadgets que vous voulez afficher sur votre page d'accueil, en cliquant sur le lien Ajouter un gadget.
Dans mon exemple, j'ai ajouté un gadget Image et un gadget Texte, ce qui donne :
Modifier l'apparence de la section
Vous pouvez modifier l'apparence de votre section en utilisant le code CSS de cette section :#gadgets-accueil {
}
]]></b:skin>
Cacher les articles et la barre latérale sur la page d'accueil
Maintenant que vous avez défini les gadgets que vous voulez afficher sur la page d'accueil, il faut cacher les articles et la barre latérale sur cette page.Pour cela, il faut utiliser le code conditionnel pour la page d'accueil.
Vous pouvez retrouver toutes les infos sur ces codes sur ce tutoriel !
Le code pour la page d'accueil est donc :<b:if cond='data:blog.url == data:blog.homepageUrl'>
</b:if>
</body>
Commencez par ajouter le code qui permet d'utiliser du code CSS dans le code conditionnel :
<style type='text/css'>
/* Codes CSS ici */
</style>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
/* Codes CSS ici */
</style>
</b:if>
.main-outer {
display: none;
}
/* Codes CSS ici */
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
.main-outer {
display: none;
}
</style>
</b:if>
Mais sur les autres pages du blog on a :
N'afficher la nouvelle section QUE sur la page d'accueil
Maintenant, il faut cacher les gadgets de la nouvelle section sur toutes les autres pages du blog. Pour cela, il suffit de cacher la section en utilisant le code conditionnel pour toutes les pages du blog sauf le page d'accueil.Si vous avez bien suivi mon tutoriel sur les codes conditionnels, vous savez qu'il suffit de remplacer le signe
== du code pour la page d'accueil, par le signe != comme ceci :<b:if cond='data:blog.url != data:blog.homepageUrl'>
</b:if>
Reprenez votre code conditionnel :
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
.main-outer {
display: none;
}
</style>
</b:if>
<b:else/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
.main-outer {
display: none;
}
</style>
<b:else/>
</b:if>
<b:else/> et </b:if> concernera toutes les autres pages du blog à part la page d'accueil.On veut cacher la nouvelle section sur toutes les autres pages du blog sauf la page d'accueil. Il faut donc ajouter le code CSS pour cacher cette section :
#gadgets-accueil {
display: none;
}
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
.main-outer {
display: none;
}
</style>
<b:else/>
<style type='text/css'>
#gadgets-accueil {
display: none;
}
</style>
</b:if>
Rectifier l'affichage des articles dans les aperçus
Le problème c'est que ces changements vont aussi s'appliquer sur les pages d'aperçu de vos articles, lors de la création de vos articles ou pages.Voici ce que vous verrez sur la page d'aperçu d'un article :
Pour rectifier cela, commencez par vérifier que vous avez installé jQuery sur votre blog.
Cherchez le terme suivant dans votre thème :
jquery<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script></head><script>
//<![CDATA[
var val = $(location).attr('href');
if ( val.indexOf('/b/post-preview') !== -1 ) {
document.write("<style type='text/css'>.main-outer {display: block !important;} #gadgets-accueil {display: none !important;}</style>");
}
//]]>
</script>
</body>
Ce qui donne :
Et voilà ! A vous de jouer avec les gadgets et de créer votre propre page d'accueil sur Blogger ! ;)
