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

By
Advertisement

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.





créer une différence d'emplacement des colones entre la page d'accueil et les pages libéllés et archives

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.




referencement seo code modèle

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!


3 commentaires:

  1. bonjour,
    mais mettre exactement toutes ses lignes svp ?
    (avant quoi, après quoi ?)

    Merci

    RépondreSupprimer
  2. Hello !

    Tu pourrais nous expliquer comment faire partager une partie de la sidebar en deux comme tu as fais avec "Archives du Blog" et "Recent Comments" stp ?

    Merci :)

    RépondreSupprimer

Salut Cher Lecteur.

Bien que les commentaires ne sont pas modérés en amont, ne perdez pas votre temps à mettre des commentaires sans aucun lien avec l'article. Ils seront effacés.

Ne venez surtout pas mettre des commentaires bidons pour promouvoir les sciences occultes ici (voyance, magie, etc.), vérifiez le blog, aucun commentaire de ce genre n'a résisté à la gomme de l'administrateur.

Bon, ceci étant dit, puissiez-vous respecter les lois de votre pays, les lois universelles ainsi que le bon sens en postant votre commentaire sur ce blog.

Remarque : Seul un membre de ce blog est autorisé à enregistrer un commentaire.

@ Blogger au bout du doigt. Fourni par Blogger.

SEO & REFERENCEMENT