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.

Créer un style pour afficher du code

Vous l'avez remarqué, je propose régulièrement de copier du code, le plus souvent des éléments de CSS mais parfois du HTML. Ceux qui sont déjà perdus vont devoir s'accrocher, désolé. Je me propose de le mettre en forme avec un "style", à vous de savoir le faire avec du style.

La problématique est la suivante. Quand vous utilisez un traitement de texte traditionnel, vous appliquez un "style" à une portion du texte et ce texte devient titre de niveau 1, 2, etc. Au "style" sont attachées des propriétés de famille de police, de taille, de mise en forme de caractère et de paragraphe. Ici, pas de style pour les notes, c'est à vous de faire les mêmes manipulations à chaque fois que vous voulez l'équivalent d'un titre 1, 2, etc. C'est vite fastidieux, et surtout, si vous changez d'avis sur ce que doit être un titre 1, vous devez tous les refaire.

L'idéal serait donc de créer des styles, et de pouvoir les mettre en œuvre facilement, une fois dépassée la pénible étape des réglages.

Gérer le contenu des colonnes de votre blog

Dès la configuration standard, vous pouvez ajouter, supprimer, déplacer des modules au sein des colonnes de votre blog. Prenez garde à ce que le passage en configuration avancée ne vous fasse pas reculer.

C'était annoncée dans la note de la semaine dernière (Comment utiliser les modèles de ce blog ?), on ne badine pas avec les colonnes. Sans vous avertir, le mode avancé vous fait prendre le risque d'une réinitialisation involontaire, sinon catastrophique. Le mode avancé vous permet d'intervenir dans le code de chacune des colonnes, ce que je faisais régulièrement, et notamment pour faire en sorte que chaque module soit entouré d'images qui simulent une feuille parcheminée passablement cornée dans les angles. Oui, je sais, pour l'instant, il manque une image pour finir le tour. Au moins les utilisateurs d'IE ont-ils un rendu similaire à celui des utilisateurs de FF (mais c'est mieux avec FF).

Bref, j'intervenais dans le code via Présentation / configuration avancée / modèle de la colonne... (capture de gauche) Au lieu d'utiliser la gestion proposée via Présentation / Contenu des colonnes (capture de droite) de l'administration du blog. Ce n'était pas une bonne idée. Le code Html du modèle de la colonne... est le résultat direct de vos interventions dans Présentation / Contenu des colonnes. Changez une virgule, et le code Html du modèle de la colonne est réinitialisé, effaçant toutes vos interventions directes dans le code.

C'est ainsi que l'activation de la Newsletter de ce blog vendredi soir a complètement cassé la mise en forme, rétablie lundi (j'étais dans mon jardin). Heureusement, j'avais une sauvegarde et un site de test, qui m'ont permis de récupérer la situation. Quand je vous dis de sauvegarder...

Dans toute la mesure du possible donc, la personnalisation des colonnes doit être effectuée via Présentation / Contenu des colonnes. Les interventions directes dans le code doivent être exceptionnelles, et soigneusement sauvegardées pour pouvoir être rétablies. Au moment d'adopter le modèle d'un autre blog, cela vous paraîtra donc plus long, car il faudra faire module par module, au lieu de copier en une fois le contenu du code Html de la colonne. Mais ce sera plus sûr et plus souple.

Me reste à savoir comment je vais réussir à mettre l'inscription à ma lettre électronique dans mon "parchemin"...

Code à copier

Note récapitulative des portions de codes à copier et intégrer dans une note
Mise à jour de la note du 1er décembre 2008

Html | Tableaux | Lecteurs de musique et de vidéo

Et n'hésitez pas à me montrer ce que vous en avez fait, ou à me dire ce qui vous manque pour vous lancer.

Html

	Ne manquez pas de caractère, et affichez des caractères spéciaux
	Appliquer des couleurs et en comprendre les codes
	Jetons l'ancre à point nommé avant d'insérer un lien
	Insérer un commentaire dans le code Html pour s'y retrouver plus tard
Jouons des bâtons de police	<!-- -+-+- Modification de police pour "Avec sérif" -0- -+-+- --> <span style="font-family:'Times New Roman',Times,serif;">*Police avec sérif*</span> <!-- -+-+- Modification de police pour "Avec sérif" -1- -+-+- --> Ce qui donnera : *Police avec sérif* <!-- -+-+- Modification de police pour "Sans sérif" -0- -+-+- --> <span style="font-family:'Arial',Verdana,sans;">*Police bâton*</span> <!-- -+-+- Modification de police pour "Sans sérif" -1- -+-+- --> Ce qui donnera : *Police bâton* <!-- -+-+- Modification de police pour "Monospace" -0- -+-+- --> <span style="font-family:'Courier New',courier,mono;">*Police largeur fixe*</span> <!-- -+-+- Modification de police pour "Monospace" -1- -+-+- --> Ce qui donnera : *Police largeur fixe*

Tableaux

	Une lettrine pour prendre le tableau à la lettre
	<p>... et <i>much more user friendly</i>.</p> <table style="height: 60px;" align="right" border="0" cellpadding="5"> <tbody> <tr> <td style="text-align: center;" valign="middle" bgcolor="#fdfcf6"> <b>Pour aller plus loin</b><br /> <a target="_blank" title="Sur Wikipedia" href="http://fr.wikipedia.org/wiki/Wysiwyg"> Wysiwyg</a><br /> sur Wikipedia</td> </tr> </tbody> </table> <p>La plupart des logiciels actuels proposent les deux ... </p>
Comment aligner le texte autour d'un tableau	<!-- -+-+-+-+- Tableau pour insertion d'objet -0- -+-+-+-+- --> <table style="width: 224px; height: 59px;" <!-- width indique la largeur, height la hauteur du tableau. Ici l'unité est le pixel, il faut se référer aux dimensions de l'objet et ajouter 4px aux deux dimensions. Ici, ce sont les dimensions d'un lecteur Deezer de taille réduite. --> align="left" <!-- choisir entre "left" et "right" pour l'alignement du tableau --> border="0" cellpadding="2"> <!-- la bordure est à zéro, il n'y en a donc pas. Cellpadding règle l'espace entre bord de cellule et bord de tableau avec un cellpadding à 2, il faut augmenter la taille du tableau de 2 pixels sur chaque bord, soit 4 sur la hauter, 4 sur la largeur --> <tbody><tr><td style="text-align: center;" valign="middle"> <!-- ces critères de styles alignent sur le centre de la cellule horizontalement d'abord, puis verticalement --> <!-- -+-+-+-+-+- Code de l'objet à insérer -0- -+-+-+-+-+- --> XX <!-- ces XX servent de repères, il faudra les effacer après avoir inséré le code du lecteur Deezer --> <!-- -+-+-+-+-+- Code de l'objet à insérer -1- -+-+-+-+-+- --> </td></tr></tbody></table> <!-- -+-+-+-+- Tableau pour insertion d'objet -1- -+-+-+-+- -->

Lecteurs de musique et de vidéo

	Personnaliser un lecteur Youtube
	De la musique avec un lecteur Deezer personnalisé