Personnalisez les éléments des colonnes sans (trop) intervenir dans le code

Il n'est pas toujours nécessaire de passer en configuration avancée pour modifier le fonctionnement des modules situés dans les colonnes de votre blog. À condition de disposer du code adéquat, vous pouvez utiliser la gestion du "contenu des colonnes". (Mise à jour d'une note du 2 avril 2009)

J'ai déjà tenté de vous dissuader de modifier le code des éléments de colonne, en intervenant directement dans le code Html, des modèles de page « colonne de droite » ou « colonne de gauche ». Cela fonctionne correctement, mais toute intervention via le module d'administration de « Contenu des colonnes » effacerait vos interventions précédentes.

Je vous recommande donc d'utiliser l'administration de « Contenu des colonnes », accessible sans passer en configuration avancée, en réservant cette dernière à la récupération du code.

Comment récupérer le code d'un élément de colonne ?

Vous trouverez de nombreux exemples de code à récupérer dans mes notes, ce n'est peut-être pas la source la plus fiable, mais c'est celle que je connais le mieux. J'essaie de mettre la version d'origine avant mon code personnalisé, ce qui vous évite de passer en configuration avancée.

Pour récupérer le code d'un élément qui vous intéresse, il faut qu'il soit activé sur votre blog, puis passer en configuration avancée pour aller chercher dans le code des modèles de page « colonne de droite » ou « colonne de gauche ». Si vous avez peur de vous tromper, rien ne vous empêche de ne temporairement laisser activé que l'élément qui vous intéresse. Pour mémoire, la petite croix à côté de « colonne de droite » ou « colonne de gauche » ne fait que désactiver un élément. Pour « supprimer », il faut vraiment cliquer sur ce mot dans la liste des éléments, et H&F vous demande de confirmer.

Comment intégrer un code personnalisé.

Le principe est assez simple, il faut ajouter un élément personnalisé de texte, et y coller le code. Je vous le redis, les instructions spécifiques à la plateforme Hautetfort doivent être placées dans un élément « texte » et non « code Html / Javascript ».

Rappel : La mise à jour du contenu des colonnes réinitialise totalement le code Html de vos colonnes. Sauvegardez d'abord votre code personnel si vous en avez déjà.

1. Dans l'administration, allez à Présentation / Contenu des colonnes

   

2. En bas de page, vous trouvez "Ajouter un élément personnalisé", choisissez « Ajouter un texte »

   

3. Donnez un nom dans "Nom de l'élément"

4. Dans "Contenu de l'élément" collez le code

5. Selon le cas choisissez d'afficher ou non le "Nom de l'élément"

6. Selon le cas choisissez d'aligner ou non le contenu du module

7. Ces deux dernières options seront facile à modifier.

8. Cliquez sur [Ajouter cet élément]

9. Vous avez un nouvel élément dans votre liste, il faut choisir entre Ajouter à gauche ou Ajouter à droite (si vous avez les deux colonnes de côté).

10. Remontez en haut de la page pour régler la position de l'élément dans la colonne

11. Cliquez sur [Mettre à jour ces informations] sous la liste des éléments

Voilà, vous avez un nouvel élément dans votre liste, qui fait référence à votre CSS. Pensez à désactiver l'ancien en cliquant sur la petite croix que l'on voit à côté du contenu de chaque colonne.

 

 

Comment rechercher dans un blog Hautetfort, avec le moteur de recherche de la plateforme

C'est l'une des dernières notes de Lavande sur BlogTuto saluant l'arrivée d'un moteur de recherche chez Canablog qui m'a convaincu de vous parler de celui que propose Hautetfort. Il s'installe très simplement depuis décembre 2008, et rend service à vos lecteurs qui souhaitent utiliser leurs mots pour s'y retrouver dans les vôtres.

Installez le moteur chez vous...
Le mode d'installation pour "Un moteur de recherche sur chacun de vos blogs"  nous a été donné par Alexandra.
Dans l'administation du blog, il faut choisir l'onglet PRÉSENTATION, puis Contenu des colonnes, et dans la liste des Éléments en face de "Rechercher" cliquer sur Ajouter à gauche ou Ajouter à droite. Remonter sur la page puis ajustez l'emplacement de cet élément avec les flèches et , éventuellement ou pour changer de colonne. N'oubliez pas de cliquer sur [ Mettre à jour ces informations ] avant Ajouter un élément personnalisé en bas de page pour que les changements soient pris en compte.

Curieusement, l'article la rubrique contenu des colonnes de la base de connaissances ne mentionne pas le moteur de recherche parmi les éléments disponibles. On aurait pourtant apprécié d'obtenir des précisions sur son fonctionnement. L'on m'a déjà précisé que le moteur n'indexe que le contenu des notes, et pas celui des commentaires. Si la richesse des interventions de vos visiteurs n'est pas exploitable en interne, il faut reconnaître que cela mobiliserait beaucoup de ressources ; tant au moment de l'indexation (volume des bases de données) que lors des recherches (temps de réponse).

... et utilisez-le aussi chez les autres.
Vous pouvez assez simplement sonder le contenu d'un blog sans que le moteur n'y soit en place. Les contenus sont déjà indexés et il suffit de savoir écrire une URL pour lancer une recherche. À l'adresse du blog Hautetfort que vous explorez, ajoutez-donc /search/ puis un mot et validez, vous obtiendrez une liste de résultats. La preuve : http://geemee.hautetfort.com/search/zorglub

Pour rechercher une expression composée de plusieurs mots, comme "élément de colonne", alors que le moteur n'est pas en place, c'est à peine plus compliqué. Il faut remplacer les espaces par %20. La preuve http://geemee.hautetfort.com/search/élément de colonne ne donnera rien, alors que http://geemee.hautetfort.com/search/élément%20de%20colonn... donnera les résultats du moteur.

C'est plus simple que d'utiliser la recherche avancée de Google sur laquelle nous reviendrons plus tard.

Nous verrons d'abord comment personnaliser le moteur interne.

Lectures conseillées :
- La rubrique contenu des colonnes de la base de connaissances Hautetfort
- Gérer le contenu des colonnes de votre blog, ici-même

Proposez une navigation entre les éléments de colonne

Depuis quelques temps, la colonne de droite de ce blog affiche quelques icones permettant un accès rapide à la plupart des éléments, tels que "Dernières notes". Je vous propose de voir quelles sont les bases de cette forme de mini-menu.

Chaque élément de colonne possède un identifiant propre que l'on peut retrouver dans le code Html de la page. Si vous utilisez l'un au moins des éléments standards, vous devriez retrouver dans le code de vos pages, l'un des identifiants suivants :
box-recentposts | box-recentcomments | box-categories | box-archives | box-populartags | box-search | box-aboutme | box-youremail | box-yourphoto | box-photoalbum | box-syndication

Si vous avez créé un élément de colonne personnalisé, ce dernier porte un identifiant aussi du type :
id="box-mybox1700243"

Il suffira d'ajouter à l'adresse du blog, un signe dièse, puis l'identifiant pour établir un accès direct à un élément comme ici : http://geemee.hautetfort.com/#box-recentposts, et puisqu'il s'agit d'un lien interne à la page, on peut se contenter de #box-recentposts (quand on insère un lien hypertexte avec l'éditeur de note  H&F).

Le mini-menu, ne fait rien d'autre que de pointer vers les éléments de colonne que j'ai choisi. Vous pouvez le vérifier vous-même dans le code Html. Celui que je vous propose ci-dessous est directement utilisable chez vous. Il ne peut fonctionner que pour les éléments standards, vous aurez à le personnaliser pour pointer vers des éléments personnalisés. Et puis de toutes façons, il vous faudra bien utiliser des images qui vous conviennent plutôt que les miennes.

Vous noterez, si faites moi plaisir, que le lien "À propos" pointe directement vers la page plutôt que d'aller vers l'élément de colonne.

<a id="menu"></a>
<a href="#box-recentposts" title="Notes récentes">
<img alt="Notes |" src="http://geemee.hautetfort.com/images/UI/note.gif"></a>
<a href="#box-recentcomments" title="Derniers commentaires">
<img alt="Comm |" src="http://geemee.hautetfort.com/images/UI/comm.gif"></a>
<a href="#box-archives" title="Archives">
<img alt="Arch |" src="http://geemee.hautetfort.com/images/UI/arch.gif"></a>
<a href="#box-categories" title="Catégories">
<img alt="Catg |" src="http://geemee.hautetfort.com/images/UI/catg.gif"></a>
<a href="#box-populartags" title="Tags">
<img alt="Tags |" src="http://geemee.hautetfort.com/images/UI/tags.gif"></a>
<a href="{$blog.url}" title="Acceuil">
<img alt="Accueil |" src="http://geemee.hautetfort.com/images/UI/home.gif"></a>
<a href="{$blog.url}/about.html" title="Contact, &Agrave; propos">
<img alt="&Agrave; propos |" src="http://geemee.hautetfort.com/images/UI/about.gif"></a>

Quand vous aurez copié ce code :
- Rendez-vous dans l'interface d'administration
- Propriétés, Contenu des colonnes, descendez jusque "Ajouter un élément personnalisé"
- Vous noterez que cela vient de changer, l'annonce officielle ne devrait pas tarder.
- Cliquez sur "Ajouter le code HTML / Javascript"
- Nommez l'élément "Menu" par exemple
- Collez le code dans lla zone principale
- Pour "Afficher le nom" choisissez "non"
- Pour "centrer l'élément" choisissez ce que vous voulez
- Validez
- Ajoutez l'élément dans une colonne, ajustez son positionnement, et enregistrez les modifications.
- Renouvelez l'opération autant de fois que vous souhaitez afficher un menu.

À vous d'appliquer à ce mini-menu des modifications à la carte.

Afficher les gravatars des auteurs de commentaire en mosaïque dans un élement de colonne

Je vous propose un gadget inutile et donc indispensable visible dans la colonne, à ce niveau là.

Il suffit de récupérer le code ci-dessous pour que cela fonctionne, mais vous aurez peut-être des ajustements à faire dans votre feuille de styles.

Évidemment ce module a des défauts. Il affichera les gravatars des commentaires, et peut tout à fait afficher la même image 16 fois de suite. Il ne passe pas à un autre dès qu'il a déjà affiché un auteur. Et puis la taille du gravatar se règle dans l'administration, pour tout le blog. Il faudra donc trouver le bon équilibre entre commentaires et colonne.

L'idée consiste à récupérer le code présent dans la page "lien permanent", pour appeler l'affichage du gravatar, puis de l'insérer dans le code d'affichage des commentaires habituellement utilisé dans les éléments de colonne.

Dans la page lien permanent, vous devriez trouver quelque chose comme

<p id="c{$comment.id}">{if $blog.blog_comment_gravatar}{$comment.email|gravatar:$blog.blog_comment_gravatar}{/if}{$comment.source}</p>

L'affichage est conditionné à l'activation de la fonctionnalité, on vérifie donc {if...
puis on affiche (le cas échéant) le gravatar {$comment.email|gravatar:$blog.blog_comment_gravatar}
fin de la condition {/if}
et on affiche le texte du commentaire.

Ce qui nous intéresse est surligné.

Le code de mon élément de colonne "commentaires récents" étant déjà personnalisé (il s'appelle d'ailleurs "À propos de...") une analyse approfondie n'est pas opportune pour l'instant. Je me contenterai d'expliquer le code de l'élément personnalisé une fois terminé.

- On ouvre le module "commentaires récents", et on en demande 15
{comments assign="comment" lastn="15" posts="posts"}

- On ouvre le lien hypertexte vers le commentaire
<a href="{$comment.permalink}#c{$comment.id}"

- On attribue un titre, une infobulle à ce lien, qui sera composé du nom de l'auteur (tronqué à 50 caractères)
title="{$comment.authorname|truncate:50:'... '}

- On ajoute  sur puis le titre de la note commentée (tronqué à 150 caractères)
sur {$comment.post|truncate:150:'... '}">

- On affiche le gravatar, et on ferme le lien
{$comment.email|gravatar:$blog.blog_comment_gravatar}</a>

- On ferme le module.
{/comments}

Si vous voulez installer ce module :

Copiez le code ci-dessous :

{comments assign=" lastn="15" posts="posts" href="http://www.hautetfort.com/admin/posts/{$comment.permalink}#c{$comment.id}" title="{$comment.authorname|truncate:50:'... '} sur {$comment.post|truncate:150:'... '}">{$comment.email|gravatar:$blog.blog_comment_gravatar}</a>{/comments}

Puis allez dans l'interface d'administration, dans le contenu des colonnes, ajouter un élément personnalisé, "Ajouter un élément texte". Oui je sais cela peut surprendre. Mais si voulez que le code Hautetfort soit correctement interprété, vous ne devez pas utiliser "Ajouter le code HTML / Javascript".

Donnez un titre à l'élément. "Commentateurs" n'est pas forcément le plus heureux. "Graves avatars" ?

Demandez l'affichage du nom, et centrez le contenu de l'élément.

Enregistrez, ajoutez à droite ou à gauche, puis validez la postion de l'élément avant d'enregistrer les modifications.

En vous souhaitant d'avoir la mosaïque la plus variée possible...

Ajouter un élément personnalisé de colonne avec plus d'efficacité ?

L'annonce officielle en a été faite le 21 septembre dernier sur le blog Hautetfort, Osmany nous invitait avec enthousiasme : "Ajoutez du contenu à vos colonnes de manière plus efficace". Je fais un bilan mitigé de cette promesse.

Dans l'interface d'administration du blog, cliquez sur l'onglet PRÉSENTATION, puis contenu des colonnes, et descendez jusque "Ajouter un élément personnalisé".

Ajouter le code HTML / Javascript

Je commence délibérément par la fin, car c'est la fonctionnalité qui reste la plus proche de la précédente. La fenêtre est identique à celle que vous connaissiez, et son fonctionnement n'est pas différent. Un nom d'élément, une fenêtre pour coller le code copié chez un fournisseur de widget ou de script, l'affichage du nom de l'élément à non par défaut, et enfin l'éventuel centrage.

Ajouter un texte

Vous pouviez déjà le faire, mais la mise en forme de votre texte devait être faite en connaissant le code HTML. Vous pouviez aussi préparer ce texte dans une note, le mettre en forme, établir des liens hypertextes, et récupérer le code en cliquant sur le bouton [HTML] de l'éditeur de note.

Mettons que c'est tout de même plus pratique comme cela, même si la visibilité du texte est vite limité par le code de mise en forme.

Ajouter une image

Cela se fait en deux temps, vous sélectionnez une image sur votre disque dur, ou vous en donnez l'adresse sur le web, puis vous aurez la possibilité de sélectionner une zone.

Le cadre de sélection est assez trompeur puisque vous pouvez sélectionner au-delà de la limite de largeur (pour moi 160 pixels). Nous aurions pu espérer qu'une sélection plus large entrainerait un redimensionnement de l'image, mais il n'en est rien. J'ai droit à 160 de large, et l'image est coupée à partir du 161ème.

Ce n'est pas la seule déception. Cette dernière peut être contournée en ayant d'abord fait l'effort de dimensionner l'image avec ses propres ressources (il y a longtemps, j'avais évoqué Image resize...). Par contre, j'ai rarement l'occasion d'insérer une image sans lui attribuer un lien hypertexte, et cela n'est pas possible. Pour l'instant seulement, essaierai-je de me consoler.

Pour finir, la "légende" se colle à droite du nom de l'élément, et la transparence n'est pas respectée.

Ajouter un flux

C'est la fonctionnalité la plus intéressante, mais je vais forcément en demander plus. Là encore, il faut procéder en deux étapes, indiquer l'adresse du flux "atom" (et non RSS), puis faire le choix de quelques options.

"Nom" devrait correspondre au nom du blog (et pour moi, cela ne veut pas s'afficher) et "Auteur" à celui du blogueur. Pour un test, j'ai vu que cela pouvait être identique à l'affichage, alors qu'en réalité c'est différent. Je n'ai pu tester sur un blog collectif pour voir si les différents auteurs étaient "reconnus".

Quand vous aurez validé, vous aurez une boîte par flux. C'est une petite déception aussi, il n'y a pas moyen de mettre plusieurs flux au même endroit, comme on peut le faire avec Splush notamment. Cela peut obliger à être plus sélectif ;-)

Si je garde mes éléments personnalisés, c'est aussi à cause de la gestion des styles. Les tests que j'ai fait me montraient des comportements compliqués à corriger, et cela n'en valait pas le coup. Pour finir, c'est peut-être mon niveau d'exigence qui me fait faire un bilan mitigé, les blogueurs mal à l'aise avec la technique pourraient y trouver leur compte. Et puis je suis convaincu de la capacité de la plateforme Hautetfort à toujours repousser les limites...

Bon week-end

Installer Google analytics sans (trop) mettre les mains dans le code

La récente mésaventure du service de statistiques de la plateforme Hautetfort finira peut-être de convaincre un certain nombre de blogueurs qu'il leur faut un autre moyen de savoir qui a la plus grosse… fréquentation. Les blogueuses auront beau jeu de dire "size doesn't matter", on sait bien que la plupart d'entre elles y jettent tout de même un œil.
Alors comment mettre le truc dans le machin pour que ça marche, les stats ?

Je n'ai pas beaucoup de reproches à faire à la plateforme Hautetfort, mais le service de statistiques ne me paraît pas très fort et peut-être même pas à la hauteur. Quand bien même cela fonctionne-t-il, je trouve nombre de sites en référents qui ne pointent en aucune manière vers mon blog, discréditant l'ensemble des données. On ne peut certes pas leur demander de se mettre au niveau de Google Analytics (GA)… Alors installons ce dernier.

Rappelons tout d'abord que GA n'est pas la seule solution gratuite accessible aux blogmestres, loin s'en faut. On pourrait notamment citer Xiti, ne serait-ce que par respect pour les anciens. Je ne doute pas qu'il existe d'excellents produits qui me seraient inconnus, et rien ne vous empêche d'en donner les références en commentaire pour que d'autres aillent les tester.
Le problème n'est pas seulement d'avoir un outil fiable, mais d'avoir un outil qui fasse référence, qui supporte la comparaison. Cela mène rapidement à utiliser celui qui s'impose, malgré ses défauts, précisément parce qu'il s'impose, et l'on arrive à GA.

Ce service est gratuit, accessible à tous ceux qui possèdent un compte Google, et une adresse Gmail, tout aussi gratuits. Ce n'est pas de la philantropie, Google a besoin d'un outil statistique puissant, le plus répandu possible pour disposer de données consolidables, comparables, dont les modes de calcul font référence, afin de pouvoir vendre les Google Ad Words. C'est aussi pour cela que l'outil pourra vous paraître disproportionné, dans la richesse de ses fonctions, de ses réglages, au regard du trafic de votre blog personnel. Nous verrons cette fois comment le mettre en place, de l'inscription au marquage des pages.

Inscrivez-vous auprès de Google Analytics.
Après avoir été convaincu par les pages de présentation, et puisque vous possédez déjà une adresse GMail, vous vous décidez à cliquer sur le bouton d'inscription au service.
On vous demande d'abord d'indiquer l'adresse du site, le nom du compte (un compte peut comprendre plusieurs sites), et le pays de rattachement.
On vous demandera ensuite votre nom et votre prénom, ainsi qu'un numéro de téléphone (facultatif). Pour un compte ouvert dans le cadre d'une activité professionnelle, si l'on souhaite une relation sérieuse, je déconseille l'utilisation de pseudo comme j'ai pu le faire.
Il vous faut ensuite accepter les conditions d'utilisation, que vous ne lirez pas plus que d'habitude, puisque vous ne pouvez de toutes façons pas négocier.
Vient ensuite le "code de suivi". Ce sont ces quelques lignes de code qu'il faudra intégrer dans vos pages pour que votre site "communique" avec Google Analytics.





Comment insérer le "code de suivi" ?
La méthode orthodoxe est de copier le code et de l'intégrer dans le modèle de la page, en toute fin, juste avant la balise </body>. Normalement, cela assure que le script GA n'est interprété qu'au terme du chargement de la page, et que les chargements interrompus ne seront donc pas comptabilisés. C'est aussi plus facile à faire, sans perturber le reste du code de la page.
N'empêche que cela signifie devoir intervenir dans nombre de modèles de page en tâtant de la "configuration avancée". Et pour tous ceux qui ont l'impression de faire de la mécanique en ouvrant leur boîte à gants, c'est une considérable source de stress. Je m'en voudrais de contribuer à l'augmentation de votre pression artérielle, d'autant que ce serait dommage de se claquer des veines alors qu'enfin le soleil permet d'envisager le pantashort (faut pas aller trop vite).
Il va, encore, falloir se taper la colonne, et de l'avoir trop fait je suis devenu sourd aux commentaires moqueurs.

Insérer le code dans un élément de colonne.
- Copiez le code de suivi de GA.
- Dans l'interface d'administration de votre blog, rendez-vous dans Présentation, puis Contenu des colonnes
- Descendez jusque  "Ajouter un élément personnalisé"
- Choisissez • Ajouter le code HTML / Javascript
- Nommez cet élément genre " Script Google Analytics"
- Dans la fenêtre collez le code de suivi.
- Il n'est pas nécessaire d'encadrer le code de suivi par {literal} et  {/literal}, c'est du passé tout ça... [Mise à jour rapide du 01/12/2010].
- Ajoutez éventuellement un commentaire Html genre <!-- Google analytics --> et <!-- /Google analytics -->
- Faites attention à sélectionner l'option (Non) pour "Afficher le nom"
- Cliquez ensuite sur [Ajouter cet élément] puis Ajouter à gauche ou Ajouter à droite et enfin [Mettre à jour ces informations]

Toutes les pages affichant la colonne dans laquelle l'élément à été installé seront donc comptabilisées.

Le plus difficile commence : attendre les prochaines statistiques, supporter la baisse de trafic constatée, analyser les rapports...

Modifier la hauteur d'une colonne pour qu'elle ”descende”

Depuis l'antiquité, nous sommes sensibles à l'harmonie des temples grecs, maisons carrées, peristyles et autres colonnades. Alors comment supporter que les colonnes de son blog ne fassent pas ce que l'on souhaite ?

C'est que, ce ne sont pas réellement des colonnes, comme on peut en avoir dans un tableau. Dans un modèle, vous avez la division "droite", la division "centre" et la division "gauche". Peu importe que vous ayez deux divisions seulement, ou dans un ordre personnalisé, dans le code vous retrouverez les trois dénominations que j'ai utilisé. Mais en anglais.

La hauteur d'une division est fonction de son contenu, c'est souvent la partie centrale la plus fournie, qui semble entrainer, les autres. Mais c'est une illusion. La division la plus "haute" détermine la hauteur du conteneur (container), qui lui comprend toutes les divisions. Chaque division a une hauteur propre. D'habitude, cela ne se voit pas. Si vous appliquez une couleur, ou un motif de fond, cela vous apparaîtra.

C'était la question de Thierry du blog Citrouille (Cette fois-ci les enfants qui se perdent ici, DOIVENT se retrouver là-bas avec leurs parents, ou tout adulte argenté pourvu qu'il soit bien intentionné). La colonne de gauche n'est pas assez haute à son goût, l'image de fond ne se poursuivant pas jusqu'en bas du conteneur.

 

Comment poursuivre l'arrière-plan de la colonne jusqu'en bas du conteneur ?

On peut tricher, en n'attribuant pas d'arrière-plan à la colonne, mais au conteneur lui-même. On préparera dans ce cas une image qui établira visuellement la différence entre les divisions. Bien sûr, les colonnes ne devront pas avoir d'arrière-plan elles mêmes, pour ne pas masquer l'arrière-plan du conteneur.

Si on veut gérer l'arrière-plan d'un colonne indépendemment, on peut intervenir dans la feuille de style pour spécifier une hauteur, avec "height"

#right {
overflow: hidden;
float: right;
width: 225px;
height: 4012px;
background: #ddb866 url(images/aspire/body-bg.jpg);
color: #000000;
}

On peut aussi "forcer" la hauteur en créant un module de calage

Dans la gestion du contenu des colonnes, on crée un nouvel élément, dont on n'affiche pas le nom.

Cet élément aura pour unique contenu, l'appel d'une image transparente dont on ajustera la hauteur au gré des besoins. Cela permettra aussi de caler en bas de page un élement dans lequel on glissera des crédits et ou un lien pour un retour en haut de page.

Vous pouvez récupérer une image transparente de 1x1 pixel en enregistrant la cible de ce lien (soit dit entre-nous, cliquer sur une image de 1x1, ce n'est déjà pas facile, mais quand elle est transparente...)

L'instruction HTML de l'élément est évidemment à personnaliser en fonction de l'emplacement choisi pour enregistrer l'image sur votre propre blog.

C'est du bricolage, mais c'est peut-être plus facile pour ceux qui hésitent à intervenir dans la feuille de styles.

La maison ne reculant devant aucun sacrifice...

Je me suis appliqué cette dernière recette pour faire descendre la colonne de droite. Cela vous permet aussi de voir certains défauts de mon propre design :-(

Dans de telles circonstances, un outil comme Measure It peut s'avérer très utile.

Mettre un sommaire ”À propos” sans composer en html

Vous avez suivi les conseils de la note de Gee Mee pour Personnaliser les éléments des colonnes sans intervenir dans le code, ou Gérer le contenu des colonnes de votre blog, et vous avez tout de même rencontré des difficultés ? Votre page en est toute tourneboulée, ou votre module apparaît avec une vilaine mise en forme ? C'est sans doute que le html que vous avez copié n'est pas au point !

Si votre besoin est simplement de proposer un sommaire de certaines notes ou liens permanents, alors voici une astuce toute simple pour contourner le problème... sans doute connaissiez-vous déjà la solution, sans avoir pensé à l'utiliser !

Prenons un exemple : la forme du module "À propos" ne vous convient pas.

Vous voulez qu'il apparaisse comme les autres modules, et non pas avec ces deux mots si discrets que l'on remarque à peine. C'est moche, n'est-ce pas ?

De plus vous voulez que cette présentation renvoie vers deux pages :

- A propos de ce blog
- A propos de l'auteur

Si comme moi vous êtes nul(le) pour rédiger du HTML, vous hésitez à vous lancer car alors il vous faut rédiger des "a href" et peut-être même (et justement je n'en sais rien !) des "li" pour faire apparaître votre sommaire correctement avec des puces. Boouh, trop de boulot, trop de rigueur d'écriture... Alors comment faire simple ?

Et bien, réfléchissez un peu... Haut et fort ne propose-t-il pas déjà une solution clé en main ?

Mais si : les listes bien sûr !

Pour ceux qui n'ont pas encore eu l'idée d'utiliser cette fonctionnalité, voici comment faire :

1. Cliquez sur l'onglet "Listes"

2. Créez une nouvelle liste, choisissez le type "lien", et donnez-lui un nom différent de "A propos", ce qui vous évitera de confondre avec le module par défaut, et vous donnera la possiblité de laisser libre cours à votre fantaisie. Contrairement à la méthode de Personnalisez les éléments des colonnes sans intervenir dans le code, vous ne pouvez pas décider de masquer le nom. Mettons donc "A propos...", avec des points de suspension. Elle va automatiquement être placée dans votre colonne de gauche, mais tant que la liste ne comprendra aucun élément, elle n'apparaîtra pas sur le blog.

3. Vous pouvez vérifier en allant voir votre section "Présentation / Contenu des colonnes" - oui je sais c'est agaçant de passer par la page "Modèles" à chaque fois, puisque vous n'avez aucunement l'intention de toucher à votre modèle... mais peut-être H&F tiendra-t-il compte de ce manque d'ergonomie dans sa prochaine version ;-).

Donc vous avez deux "A propos", mais vous savez lequel est le nouveau. Par précaution, je vous recommande de le "retirer" provisoirement de votre colonne, en le sélectionnant et en cliquant sur la croix. Il reste tout de même à votre disposition dans la liste du dessous.

4. Dans la section "Listes", créez donc vos deux titres de sommaire :

- Pour "A propos de ce blog", allez sur votre site et copiez le lien permanent (clic droit) de cette page "A propos" que vous allez masquer.

- Pour "A propos de l'auteur", vous devez avoir bien sûr rédigé au préalable une note pour vous présenter. Malheureusement, comme H&F ne propose pas (encore ?) de pages fixes non répertoriées dans les notes, les abonnés à vos flux recevront cette note. Tenez-en compte, et profitez-en pour vous montrer attractif ! Vous pourrez toujours y apporter des modifications par la suite, hors du processus de notification, puisque vos lecteurs ne reçoivent pas les mises à jour, sauf acte délibéré de votre part.

Votre module / liste est prêt !

5. Retournez dans votre section "Présentation / Contenu des colonnes" (et oui, encore un passage par la case "Modèle"). Maintenant il va falloir faire la bascule entre votre "A propos" et celui d'origine.

Hop, clic sur la croix pour retirer l'ancienne version, et hop, ajouter à droite ou ajouter à gauche sur la nouvelle, puis quelques clics sur les flèches pour bien la positionner. Votre nouveau sommaire de présentation est en ligne. C'est beaaaauuuu hein ?

Choisissez de préférence une heure de faible affluence (à vérifier dans vos stats avancées... il y a des chances qu'à 4 heures du mat' vos seuls visiteurs soient des robots... Comment ça à 4 heures vous dormez ?).

Et voilà, les allergiques au html n'ont pas eu à "mettre les mains dans le cambouis" !

 

Comment et pourquoi modifier la largeur d'affichage de votre blog

La demande est récurrente, même si les motivations me paraissent discutables, et c'est l'un des reproches qui est formulé à l'encontre des templates : "on ne peut pas modifier la largeur d'affichage". Nous aborderons le principe de la méthode, puis nous réfléchirons aux conditions nécessaires à un élargissement pacifique.

Comment élargir l'affichage ?

Cela peut ressembler à une évidence, il faut modifier la largeur (width:) des éléments de la feuille de styles. Nous avons un conteneur (#container) dans lequel nous retrouvons une ou deux colonnes (#right et ou #left), ainsi qu'une partie centrale (#center). Si l'on veut élargir la partie centrale, il faudra aussi agrandir le conteneur en conséquence.

La largeur se précise en pixels ou en pourcentage, ce qui permet en principe d'avoir un affichage proportionnel à la surface effectivement disponible. On peut aussi indiquer un pourcentage de l'ordre de 90% pour le conteneur, préciser la largeur des colonnes en pixels et ne rien indiquer pour le centre. Il est aussi possible d'indiquer un minimum, et un maximum, tout en assumant que cela ne fonctionne pas avec IE6. Il en reste.

Modifier la largeur d'affichage vous obligera à revoir le design de votre blog de fond en comble. Qu'advient-il des images d'arrière-plan qui ne sont pas répétées ? Autant savoir tout de suite que l'idée d'une image proportionnelle, pour être techniquement envisageable, ne donne qu'assez rarement un résultat satisfaisant.

Je ne peux pas vous donner de règle valable pour tout le monde, vous devrez faire vos essais vous-même, en vous inspirant des CSS des autres. Le recours à des outils comme Firebug et Measure-it est vivement recommandé pour tester sans tout casser. Et la vérification du résultat dans plusieurs navigateurs s'impose.

Faut-il élargir l'affichage ?

La question n'est pas anodine. La perception de ce qu'est une ligne "trop longue" est d'abord proportionnelle à la taille des caractères, puis elle est fonction des habitudes de lecture de vos visiteurs. Lire un chapeau d'article sur la largeur d'une page sur quelques lignes est facilement supportable, mais les articles ne s'organisent pas en colonnes tout à fait par hasard.

Là encore, il n'y a pas de solution miracle, inspirez-vous de ce que font les autres et en particulier les sites de presse.

Quelle largeur choisir ?

Il était écrit que cette note serait celle du relativisme... "Ça dépend", et le premier qui dit "ça dépasse" a un gage. La vignette ci-contre est une capture de l'analyse de Google Analytics de la plupart des résolutions d'écran utilisées sur une période récente d'environ 90 jours. Il y en a tout de même 39 différentes.

Le classement est organisé selon la part représentée par telle résolution dans le trafic analysé. Il faut retraiter ces données dans un tableur pour avoir un classement par largeur d'affichage.

Largeur	Hauteur	Part	Groupes
2112	1188	0,19%	22,02%
1920	1200	16,00%
1920	1080	0,69%
1680	1050	5,14%
1600	1200	1,51%	15,87%
1600	900	1,19%
1536	960	0,31%
1440	900	10,10%
1408	880	0,25%
1400	1050	0,38%
1366	768	1,94%
1360	768	0,19%
1280	1024	9,91%	34,88%
1280	960	0,88%
1280	854	0,44%
1280	800	22,90%
1280	768	0,50%
1280	720	0,25%
1152	864	1,00%	26,15%
1152	720	0,25%
1024	768	20,89%
900	600	1,25%
800	600	2,01%
800	480	0,19%
320	396	0,56%

Ce tableau comprend 98,92% des résolutions. Il permet de voir que 26,15% des écrans utilisés lors des des visites ont une résolution inférieure ou égale à 1152 pixels de large, dont 20,84% ont une largeur de 1024 pixels.

Cela signifie que si je choisis un affichage adapté à un écran de 1280 pixels de large, qui représente tout de même 34,88% des visites, je peux créer des conditions de navigation désagréable pour un quart des visites. Même avec une largeur dynamique susceptible de diminuer, les éléments risquent de se tasser, voir même de se masquer. La taille de votre affichage doit moins dépendre de votre équipement que de celui de vos visiteurs. Pour vous aider dans votre diagnostic, vous pouvez notamment tester Browser size de Google.

En cherchant un peu vous trouverez des services web qui vous permettront de simuler une taille d'affichage différente de la résolution de votre écran (à condition qu'elle soit inférieure, évidemment).

Je vous propose une méthode rustique, mais robuste et sans danger, pour essayer différentes résolutions.

Cliquez sur la vignette ci-contre pour ouvrir l'image à sa taille réelle dans votre navigateur. Enregistrez-la, et faites en l'image d'arrière plan de votre bureau. Calez ensuite la taille de votre navigateur sur les différents gabarits disponibles pour avoir une idée de ce que cela peut donner.

Ah, c'est rustique, c'est sûr ;-)

 

Pour aller plus loin, je vous conseille la lecture des articles suivants :

- Mise en page en colonnes sans tableau, chez CSS Mammouthland
- Faire un site pour toutes les résolutions, de Raphaël chez Alsacréations

Pourquoi utiliser la catégorie ”Archives” ?

Suite à sa mésaventure relatée dans un commentaire sur le blog GeeMee, Octobre nous fait découvrir une fonctionnalité HautetFort permettant d'afficher sur une page unique vos archives de blog classées par ordre chronologique, par thème ou par mots-clés.

En ajoutant chaque élément de colonne correspondant dans "Contenu des colonnes" de l'onglet PRÉSENTATION, vous pouvez proposer vos notes par Catégories, par Tags populaires ou par Archives. Dans ce dernier élément, on trouve en fin de liste un lien vers "Toutes les archives".

Voici comment présenter vos archives classées dans une page et 1 seule, sans encombrer une colonne de blog.

Ajouter la catégorie "Archives"

1. Cliquez sur l'onglet NOTES de l'éditeur hautETfort.
2. Cliquez sur Catégories
3. Ajoutez une catégorie. Tapez le Nom de la catégorie: Archives
4. Créer une nouvelle catégorie Cliquez sur le bouton.

Classer une note déjà publiée dans la catégorie "Archives"

1. Cliquez sur Toutes les notes
2. Cliquez sur la plus ancienne de vos notes parmi les Pages : 1 2 3 ... Page suivante
3. Cliquez sur Modifier
4. Cliquez sur la Catégorie Archives La catégorie "Archives" est attribuée à la note en cours.
5. Enregistrer Cliquez sur le bouton.

Vous n'utilisez pas encore l'élément de colonne "Catégories" dans votre blog ?

1. Cliquez sur l'onglet PRESENTATION de l'éditeur hautETfort.
2. Cliquez sur Contenu des colonnes
3. Dans la liste des éléments de colonne, repérez "Catégories"
   
4. Cliquez sur "Ajouter à doite" ou "Ajouter à gauche"
5. Changez l'ordre d'affichage des éléments avec les flèches de la Colonne de Navigation
6. Mettre à jour ces informations Cliquez sur le bouton en bas de page.

Affichez la page Archives.

1. Cliquez sur Voir le blog
2. Cliquez sur Archives dans la liste Catégories.

La page Archives s'affiche. Vous avez le choix de consulter les notes du blog par Catégorie, par Mois^[1] ou par Tag^[2]. C'EST MAGNIFIQUE!!!
Le nuage de tags de la page Archives affiche la liste complète des mots-clés attribués aux notes. Les tags les plus utilisés s'affichent dans une taille de texte supérieure...

Cliquez ci-contre pour afficher les Archives du blog Upset Diary. Quant à Bougrenette qui souhaite fouiller les archives, la voici comblée!

Dynamisez ensuite vos notes et archives avec LinkWithin.

• J'ai rédigé une première note expliquant comment insérer le widget LinkWithin dans un blog hautEtfort.
• Gee Mee l'a affinée avec une vidéo et peaufiné une note pour rendre le widget joli beau dans votre blog.
• La marche à suivre est intégralement publiée dans BlogTuto.org

---

^[1] Si l'archivage se fait souvent mensuellement, vous pouvez décider d'un autre rythme dans TABLEAU DE BORD > Généralités, Propriétés d'archivages.

^[2] Gee Mee vous propose aussi de Personnaliser l'élément de colonne "Tags populaires" pour accéder directement à tous les tags dans la page "toutes les archives"