Articles sur deux colonne en page d'accueil

Après  la publication de l’article sur la possibilité d’afficher très simplement un résumé de ses articles à la page d’accueil comme sur le modèle Schemer mag, beaucoup sont ceux qui ont voulu aussi afficher ces résumés d’articles en 2 colonnes à la page d’accueil de leur blog. Cet article va se faire le plaisir d’assouvir leur soif.

Si, après avoir pu afficher les résumés d’articles sur la page d’accueil d’un modèle que vous avez absolument voulu garder, vous voulez en plus de cela afficher deux colonnes des résumés à l’accueil dans ce modèle que vous chérissez tant, voici ce qu’il faut faire :

Conseil : Effectuez d'abord toute la manoeuvre suivante dans un blog test ayant les mêmes modèle et paramètres que le votre. Si tout est réussi dans celui-ci, allez répeter la manoeuvre sur votre blog.

1. Se connecter à votre compte Blogger, aller sur « Mise en page » pour le blog que vous voulez transformez, et allez ensuite sur « Modifier le code html ».

2. Mettre le script suivant juste après la balise </head>

<SCRIPT type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 230; summary_img = 200; img_thumb_height = 80; img_thumb_width = 80; </SCRIPT> <SCRIPT src='http://myblogtalk.com/bloggertemplates/turnoutmag/autoreadmorethumb.js' type='text/javascript'/>

Si vous aviez déjà utilisé le code pour afficher le résumé à la page d’accueil, enlevez-le pour le remplacer par celui ci-haut.

3. Remplacez le code css pour les articles par le code suivant (clic droit puis enregistrer sous). Notez que la partie contenant le code css pour vos articles porte souvent l’identifiant /* Post Body, soit /* Posts ou encore /* content.

Il vous faudra changer la taille dans ce code css pour le faire correspondre aux valeurs de votre blog. Dans le code qui vous sera proposé, la largeur (width) de la partie dédiée aux articles est de 655 pixels et la largeur pour les blocs des résumés à l’accueil est de 315 pixels.

Si dans votre blog, la partie dédiée aux articles a une largeur de 480 pixels, il va de soi que vous devrez diminuer la largeur des blocs de résumé à 230 pixels, à moins que vous ne changiez la valeur de la grandeur de votre blog pour que la partie des articles soit maintenant à 655 pixels.

Le changement que vous allez effectuer dans le code css suivant va affecter le script de l’étape 2 où il vous faudra changer les valeurs de la largeur occupée par le résumé quand il n’y pas d’image (actuellement 230 pixels) et la largeur occupée quand il y a une image illustrative (actuellement 200 pixels).


Voici le nouveau css pour les articles (faire click droit puis « enregistrer sous »).

Notez que vous pouvez simplement copier le code css fournit et allez l'installer juste avant la balise ]]></b:skin> dans votre modèle.

Après l’avoir installé dans votre blog, enregistrez votre modèle.

Petite explication : Les codes css portant l’identifiant #contentb .post, sont ceux pour les résumés à l’accueil tandis que ceux portant l’identifiant #contentb .single, sont ceux pour les articles paraissant seul sur les pages d’articles.

4. Remplacez toute la section contenant le widget blog, qui ressemble à ceci :

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

par ce code (clic droit puis enregistrer sous) et enregistrez votre modèle.

Allez maintenant admirer le résultat que ça donne sur votre blog. Normalement, vous devriez voir apparaître deux colonnes des résumés à l’accueil de votre blog.

Si vous voulez obtenir le même résultat pour les pages des libellés et d’archives, lisez l’article : Résumé d'articles avec photos sur pages libellés - Modèle Turn Out mag