jeudi 12 mars 2009

L'art de blogguer sous Blogger

Nous sommes plusieurs à utiliser ce template sous Blogger et je dois dire que je le trouve assez professionnel :-)
Cependant, je n'appréciais pas plusieurs choses :
- la largeur par défaut
- les coins arrondis
- l'impossibilité d'afficher un résumé des posts sur la page d'accueil

J'ai donc du modifier le template pour pouvoir satisfaire tout ce dont j'ai besoin d'un blog et que Blogger ne m'offre pas par défaut !

En prérequis, il faut bien sûr que vous vous connectiez sur votre dashboard en allant sur https://www.blogger.com/start. Ensuite, vous vous rendez dans la section Layout du blog que vous voulez modifier, puis dans Edit HTML.
Il ne vous reste plus qu'à cocher la case dans la partie Edit Template.

Modifier la largeur par défaut

Recherchez Page Structure dans la zone d'édition car les modifications à faire se trouvent dans les css qui suivent. Il suffit ensuite d'augmenter la valeur du paramètre width pour les IDs outer-wrapper, main-wrap1, main-wrap2, main et les classes main, Blog :

#outer-wrapper {
width:930px;
....
}
#main-wrap1 {
width:680px;
...
}
#main-wrap2 {
width:100%;
...
}
#main {
width:655px;
...
}
.main .widget {
width: 668px;
...
}

.main .Blog {
width: 684px;
...
}

Supprimer les coins arrondis

Le fait de modifier la largeur par défaut nécessite de modifier les images de fond utilisées pour affichée des coins arrondis. J'ai donc préféré supprimer ces coins en retirant les images de fond http://www1.blogblog.com/rounders2/corners_main_bot.gif et http://www1.blogblog.com/rounders2/corners_main_top.gif pour les IDs main-wrap1 et main-wrap2.

Afficher le résumé de certains posts sur la page d'accueil

Pour pouvoir résoudre cette problématique je me suis inspiré des posts http://help.blogger.com/bin/answer.py?hl=en&answer=42215 et http://coderstalk.blogspot.com/2008/06/how-to-create-expandable-post-summaries.html#step-01.
La démarche est assez simple une fois qu'elle est bien cernée. Il faut suivre les étapes suivantes :

- rechercher la balise <div class='post-header-line-1'/> et ajouter le code suivant à la suite :

<style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
span.fullpost{display:inline;}
<b:else/>
span.fullpost{display:none;}
</b:if>
</style>


- rechercher la balise <div class='post-footer'> et ajouter le code suivant avant cette balise :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;more&quot;'>
<a expr:href='data:post.url'><b>Lire la suite...</b></a>
</b:if>
</b:loop>
</b:if>
</b:if>


- se rendre sur le dashboard
- cliquer sur l'option Settings de votre blog
- choisir l'onglet Formatting
- renseigner la partie Post Template avec :

<span class="fullpost">
</span>


Vous pouvez maintenant rédiger ou modifier vos anciens posts pour n'en afficher qu'un résumé sur la page d'accueil en respectant les 2 règles suivantes :

- Mettez la partie que vous voulez voir apparaître sur la page principale en dehors de la balise <span class=fullpost>
- Ajoutez le label more à votre post

Comme Rien ne vaut mieux qu'un petit exemple, voici un exemple de post que vous pouvez utiliser :

salut à tous, ce post n'est qu'un exemple parmis d'autres.
Je voudrais vous en dire plus mais<span class="fullpost">, en fait je n'ai pas grand chose à dire :-)</span>

Bien sûr vous n'oublierez pas d'ajouter le label more à ce post comme indiqué dans la méthode.
Blogged with the Flock Browser

Aucun commentaire: