Créer une différence d'emplacement des colonnes entre la page d'accueil et les pages d'articles

Suite aux nouvelles mises à jour sur le blog et donc à l'affichage d'un emplacement différents des colonnes entre la page d'accueil et les pages d'articles, je me suis mis en tête de vous expliquer comment j'arrive à faire cela.

Normalement, c'est n'est pas sorcier. Il m'a suffit d'utiliser les codes qui interdissent l'affichage de certains widgets ou parties du blog sur des pages déterminées ainsi que les codes pour .ordonner l'affichage des certains éléments seulement sur une catégorie des pages.

Mon modèle donne quelque chose comme ça quand on examine le code html:

<div id='sidebar-droite'>
<b:section class='sidebarl7' id='sidebarl3' preferred='yes'/>
 </div>

<div id='partie-articles'>
<b:section class='content' id='content' showaddelement='no/>
</div>

<div id='sidebar-gauche'>
<b:section class='box3' id='box4' preferred='yes'/>
</div>

<div class='sidebar-gauche-1'>
<b:section class='sidebar24' id='sidebar42' preferred='yes'>
</div>
<div class='sidebar-gauche-2'>
<b:section class='sidebar24' id='sidebar42' preferred='yes'>
</div>

Pour empêcher l'affichage de la colonne droite sur les pages d'articles, il m'a suffit d'encercler le code html de cette colonne par les codes (ici en rouge gras) ordonnant d'afficher la colonne partout sauf aux pages d'articles.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='sidebar-droite'>
<b:section class='sidebarl7' id='sidebarl3' preferred='yes'/>
 </div>
</b:if>

<div id='partie-articles'>
<b:section class='content' id='content' showaddelement='no/>
</div>

<div id='sidebar-gauche'>
<b:section class='box3' id='box4' preferred='yes'/>
</div>

<div class='sidebar-gauche-1'>
<b:section class='sidebar24' id='sidebar42' preferred='yes'>
</div>
<div class='sidebar-gauche-2'>
<b:section class='sidebar24' id='sidebar42' preferred='yes'>
</div>

Le problème c'est qu'il y avait maintenant un espace vide à combler sur les pages d'articles, celui  auparavant occupé par la colonne droite. L'astuce que j'ai utilisé, a été juste de cloner la colonne enlevée et la placer de sorte qu'elle apparaissait juste après la partie dédié aux articles. Comme cette nouvelle colonne ne devait pas apparaître sur la page d'accueil, les pages d'archives, de libellés et de recherches, je l'ai entouré d'un code qui l'instruis de ne s'afficher que sur une page d'article. Ceci a donné quelque comme ceci :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='sidebar-droite'>
<b:section class='sidebarl7' id='sidebarl3' preferred='yes'/>
 </div>
</b:if>

<div id='partie-articles'>
<b:section class='content' id='content' showaddelement='no/>
</div>

<div id='sidebar-gauche'>
<b:section class='box3' id='box4' preferred='yes'/>
</div>

<div class='sidebar-gauche-1'>
<b:section class='sidebar24' id='sidebar42' preferred='yes'>
</div>
<div class='sidebar-gauche-2'>
<b:section class='sidebar24' id='sidebar42' preferred='yes'>
</div>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='clone-sidebar-droite'>
<b:section class='sidebar47' id='sidebar43' preferred='yes'/>
</div>
<div class='break'/>
</b:if>

Le reste du travail a été effectué dans les codes css. Là, j'ai du copier tout le code css de la colonne droite et ai juste changé partout où il était écrit "sidebar-droite" par "clone-sidebar-droite". Ce nouveau code a été installé juste après celui de l'original.

Vous remarquerez que bien qu'elle apparaisse juste après l'article, cette nouvelle colonne est la dernière à s'afficher sur la page, juste après l'affichage complet de la dernière colonne. Pour ça, tout s'est encore joué au css où j'ai ordonné que la nouvelle colonne flotte à droite (float: right;) comme la colonne gauche qui occupe habituellement cet emplacement.

J'espère que cet article vous aura permis d'avoir une idée plus claire des manipulations auxquelles je me suis livré pour avoir ce modèle avec l'emplacement des colonnes changeants aux pages d'articles.

Je prépare un autre article sur la technique pour afficher deux colonnes des résumés d'articles à l'accueil. Alors, restez connecté et Peace!