Images et photos du blog: stockage, gestion, publication

En tenant compte des illustrations publiées, on peut distinguer deux catégories de blogs: les blogs privés, essentiellement dédiés à la publications en ligne de ses photos et vidéos, avec très peu ou quasiment pas de texte; et les blogs sollicitant une audience plus large, contenant plus d'expressions et quelques illustrations dont la plupart sont des captures d'écran.

Blog à photos

Dans ce cas, quoi de mieux que d'organiser ces photos par album. Picasa est pour cela l'outil incontournable pour les utilisateurs de la plate-forme Blogger comme l'est aussi Flickr pour l'ensemble des blogs. Avec ces deux outils et grâce à des logiciels appropriés, vous pouvez créer des dossiers dans votre espace de stockage et y classer vos photos. Une Url vous est ainsi délivrée pour chaque photo stockée, et c'est elle que vous devez placer sur votre blog.

En publiant ainsi vos images, vous êtes sûr de pouvoir les retrouver plus facilement, connaissant bien le contenu de vos albums, comme le montre l'image ci-dessus, une capture d'écran de Picasa.

Blog à captures d'écran (screenshot)

Si comme nous la plupart de vos illustrations sont des captures d'écran, alors nul besoin de les classer par album. Si encore les publications sont fréquentes, il est plus judicieux de classer les images par article. Ainsi, un logiciel comme Windows Live Writer (WLW), dont aucun blogueur ne devrait se passer, et un espace de stockage accessible en ftp comme celui proposé gratuitement par Free, constituent le duo gagnant.

Après avoir paramétré Windows Live Writer avec vos identifiants de connexion Free, celui-ci crée à chaque publication un dossier contenant toutes les illustrations du billet. Ainsi, si vous souhaitez modifier une image publiée précédemment dans un article, il suffit de vous rendre dans le dossier créé pour cet article, portant souvent le même nom que le titre de ce dernier; ce qui facilite les opérations surtout si vous publiez plus 5 billets par jour.

Dans les deux cas, il vaut mieux adopter une stratégie claire et définitive en tenant compte des évolutions futures de son blog. Car si vous changez un peu tardivement la façon d'organiser les illustrations de votre blog, vous risquez de rééditer tous vos billets, ce qui peut être fastidieux.

Et les blogueurs influent ?

La plupart des blogueurs influent se trouvant dans le dernier cas cité ci-dessus et rémunérant leurs blogs par l'intermédiaire de la publicité ciblée (Adsense par exemple), le bénéfice de gérer les illustrations de la façon dont nous venons de le décrire est de pouvoir les agrandir à l'intérieur du billet lorsque vous cliquez dessus, augmentant au passage le nombre d'impressions de pages et dont les revenus.

Cela veut dire que lorsqu'un de vos visiteurs clique sur une image pour l'agrandir, il ne se retrouve plus sur une page blanche avec pour seul contenu une image. Nous publierons plutart un article à ce sujet, mais si cela vous intéresse, vous pouvez consulter en avant première un exemple sur ce billet de notre nouveau blog Multimedia Connexion (en cours de création, soyez indulgent).

Read more »

Ciblage Adsense: intégrer les balises sur son blog

Par défaut dans un modèle de blog Blogger on retrouve 2 balises de ciblage Adsense: une balise de début de ciblage et une balise de fin, générées respectivement par le code <data:adStart/> et <data:adEnd/>. Elles encadrent la partie du blog où s'affichent les articles.

Malgré cela, le ciblage des annonces Adsense est loin d'être parfait sur un blog Blogger, surtout si vous utilisez la nouvelle version comme nous, celle qui prend en charge les Widgets. En effet vous constaterez toujours, par exemple, des annonces au sujet des blogs sur vos pages, même quand vous ne parlez pas de blog.

Le principe pour réussir le ciblage Adsense sur son blog est simple: exclure tout le site du ciblage sauf quelques endroits à préciser.  Pour cela, il faudra utiliser la balise  <!-- google_ad_section_start(weight=ignore) --> pour exclure du ciblage et <!-- google_ad_section_start --> pour commencer le ciblage.

Commencez par repérer et isoler les parties à cibler: <h1> <data:post.title/> </h1> par exemple pour le titre de l'article et <data:post.body/> pour le corps de l'article. Supprimez <data:adStart/> et <data:adEnd/>. A leur place, si vous mettez <!-- google_ad_section_start --> par exemple, après avoir enregistré votre modèle, cette balise n'apparaitra pas dans le code html de vos pages car le processus de génération de ces pages l'aura validée et supprimée.

Pour éviter cette validation, la version Blogger 2 étant basée sur du XML, il faut écrire &lt;!-- google_ad_section_start --> pour avoir après enregistrement <!-- google_ad_section_start -->. Ceci dit, commençons le ciblage.

1. Placez, juste avant la balise <head>, celle-ci <!-- google_ad_section_start(weight=ignore) --> puis après la balise </body> (à la fin) placez celle là <!-- google_ad_section_end -->. Enregistré dans cet état, votre blog ne sera pas ciblé. On évite surtout le ciblage du gros script (WidgetManager) qui se trouve à la fin de chacune des pages de votre blog, c'est lui qui fausse en grande partie le ciblage.

2. Retrouvez les éléments à cibler cités plus haut et placez autour de chacun d'eux une série de balises comme suit (exemple pour <data:post.body/>):

&lt;!-- google_ad_section_end --> &lt;!-- google_ad_section_start -->
    <data:post.body/>
&lt;!-- google_ad_section_end --> &lt;!-- google_ad_section_start(weight=ignore) -->

Ainsi le ciblage adsense est interdit partout sauf aux endroits où vous avez placé la série de codes ci-dessus. Nous vous conseillons de cibler aussi les libellés associés à chaque article (<data:label.name/> dans la partie <b:loop values="data:post.labels" var="label">). Enregistrez votre modèle et allez regarder dans le code source de vos pages la présence des balises ajoutées.

 

Read more »

Classement Criteo des blogs: source de visites et de motivation

Le top 500 des blogs dressé par Criteo est une évaluation qui permet de mesurer le volume et l'évolution du trafic mensuel sur un blog. Certes beaucoup de blogueurs n'y participent pas, à tort  d'ailleurs car c'est un excellent moyen de se mesurer aux autres et de découvrir ce qui fait vibrer d'autres blogs plus que le sien.

Résultat: le buzz domine la blogosphère française

On le sait, ce qui marche sur Internet c'est: la vie des people (le mariage Sarkozy-Bruni, Laure Manaudou à poil... pour ne citer que ceux là), le sexe et les Technologies. En observant les différents classements anglais et français de Criteo, on s'aperçoit curieusement que les blogs français excellent dans le buzz et les anglais dans les Technologies. On est loin des tabloïdes de sa majesté.

Des centaines de visites générées

J'avais hésité à installer l'autoroll Criteo sur ce blog car je redoutais un ralentissement du chargement des pages. Finalement j'y tire plus d'avantages que d'inconvénients car ce système génère 5% de visiteurs et des "backlink" offerts par d'autres blogueurs qui publient la liste. Ainsi, avec seulement 5 billets publiés en janvier, "On en blogue" fait un bond de plus de 150 places au classement.

Une source de motivation supplémentaire

Mettre à jour un blog en parallèle avec son activité professionnelle n'est pas l'une des choses les plus faciles, surtout lorsqu'on a le souci de bien faire. Alors qu'est-ce qui peut bien motiver un blogueur ? Hormis les dollars, de nos jours très faibles, que Google veut bien nous offrir. La passion ! Mais quand on n'a pas assez de temps, avoir l'objectif de faire figurer son blog dans le top 100 voire 10 peut sérieusement booster.

Read more »

Favoriser la navigation sur son blog et augmenter le nombre de pages Vues

Favoriser la navigation sur son blog c'est mieux orienter ses lecteurs vers plus de sources pouvant rendre leur visite utile, espérant ainsi les fidéliser. Au moins votre blog devient alors une référence pour le visiteur, au pire vous serez jugé en connaissance de cause après une lecture approfondie de vos publications, mais dans tous les cas vous êtes gagnant.

Pour augmenter le nombre de pages vues sur votre blog, il faut d'abord rediriger le flux de visiteurs de la page d'accueil vers les billets, puis de mettre en évidence les articles relatifs associés à chaque billet. Tout cela suppose au préalable un bon référencement et ne vous empêche pas de glisser des liens vers de précédents articles dans vos billets, ou encore de mettre en valeur vos libellés.

Réorganiser la page d'accueil de son blog

Imaginez votre page d'accueil, dessinez-là puis demandez, si vous ne savez pas, le code auprès d'autres utilisateurs de la même plate-forme que vous. Il est vrai que certaines choses chez WorPress sont plus faciles, comme n'afficher que les résumés des billets à l'accueil. Sur Blogger, je vous déconseille de le faire si c'est en masquant une partie de l'article à l'aide du style css (display:none) car les moteurs de recherche ne l'apprécient pas.

Mais on peut faire bien des choses avec Blogger comme le montre notre image, une capture de la page d'accueil de ce blog. Si vous cherchez un slide à mettre en page d'accueil, vous trouverez plein de scripts, avec leur exemple d'utilisation et les commentaires de ceux qui les ont testés sur le site ajaxrain.com.

Les articles relatifs, vous en proposez ?

Lire un article puis s'apercevoir qu'il y'a à côté un lien vers quelque chose de similaire: c'est ce que recherchent les visiteurs, surtout ceux arrivés par les moteurs de recherche. Sur la plupart des blogs (chez WordPress par exemple) les articles relatifs sont positionnés au bas des billets et sont difficilement de qualité car ils ne sont pas choisis par l'auteur mais générés par un script.

L'idéal c'est de positionner vos articles relatifs pour être visibles sans avoir à lire le billet jusqu'au bout et de les fixer vous même pour chaque billet. Je reviendrai ultérieurement sur comment créer des articles relatifs sur Blogger.

Ainsi à partir de 200 visiteurs uniques par jour, vous dépasserez le millier de pages vues.

Read more »

[Adsense] Choisir le format et le type d'annonces à chaque publication

Cette pratique a pour mérite non seulement de vous permettre d'afficher au même emplacement plusieurs formats d'annonces en fonction des billets, de favoriser les annonces illustrées sur certains articles pour le bien de vos lecteurs (voir notre image), mais aussi d'établir une relation entre vos annonces afin d'éviter d'avoir la même publicité à deux emplacements différents.

Le constat

Le format d'annonces Adsense 336X280 est réputé être le plus performant. Pourtant, en fonction des jours et sûrement de l'humeur des publicitaires, c'est plutôt le rectangle moyen 300X250 qui vous rapportera plus au même emplacement. Pourquoi ne pas alors profiter des deux formats à la fois ?

Loin de l'utilisation d'un script permettant d'afficher de façon aléatoire un format d'annonces, et pour rester en bon terme avec les conditions d'utilisation de Google Adsense et surtout de garder une maîtrise totale de ses annonces, nous avons choisi d'utiliser des libellés (labels) pour les gérer.

Le résultat

Notre image ci-dessus affiche l'exemple d'un article de ce blog, avec 3 emplacements d'annonces Adsense (A, B et C) et l'interaction entre ces annonces.
- Si l'annonce A est textuelle alors l'annonce B est illustrée, et inversement.
Ainsi, sachant que la résolution d'écran la plus utilisée reste 1024X768 selon les statistiques de Google Analytics, ce sont les annonces A et B que le visiteur apercevra en premier et on évite ainsi qu'elles soient de même nature.
- Si l'annonce A est au format 336X280 alors l'annonce C est de 300X250, et inversement. Dans un article sur deux de ce blog, les annonces A et C sont dans l'un des formats cités ci-dessus.
- L'annonce C est uniquement textuelle.

La mise ne place

Création des annonces: D'après le cheminement décrit ci-dessus, les annonces à créer dans votre compte Adsense seront alors:
1. Pour l'emplacement A: 336X280 texte, 336X280 image, 300X250 texte, 300X250 image.
2. Pour l'emplacement B: 300X250 texte, 300X250 image.
3. Pour l'emplacement C: 336X280 texte, 300X250 texte.
Cela fait beaucoup d'annonces à créer et certaines se ressemblent me diriez-vous. Mais il vaut mieux les créer ainsi et surtout leur affecter des critères afin de suivre leurs performances individuelles.

Mise en place avec Blogger: Il faudra créer 4 libellés pour mettre en oeuvre ce procédé.
- 2 libellés pour changer de type d'annonces (textuelle ou illustrée) entre A et B.
- 2 libellés pour changer de format entre A et C.
Ainsi lors de la publication d'un billet, il suffira de sélectionner 2 libellés (1 dans chaque cas AB et AC).

La mise en place du code dans votre template Blogger se fait en utilisant un jeu de conditions et la propriété data:label.name. Il faudra le faire dans un Widget de type Blog et le résultat correspondant devra ressembler à celui sur l'image ci-contre pour l'emplacement A par exemple.

Pour les emplacements B et C, le code correspondant, tenant compte de celui du A sur l'image est ICI.
NB: Pour maîtriser du code Blogger, rendez-vous dans notre section astuces Blogger.

Les gains

A travers ce procédé et avec un bon ciblage, vous augmentez le CTR de chacune de vos annonces. En effet, toutes ne s'imprimeront pas systématiquement sur toutes les pages, et le nombre de clics générés sera alors plus proportionnel au nombre d'impressions de chaque annonce.

Comme en plus d'un bon CTR, il faudrait que vos lecteurs convertissent leurs clics en action sur le site de l'annonceur, le fait d'affecter volontairement un type d'annonces illustrées à un certain billet vous le garantira. C'est le cas par exemple de l'annonce illustrée à l'emplacement A, vérification faite après visite du site annonceur.

Read more »

Astuces Blogger / blogspot

Vouloir personnaliser un blog Blogger c'est vivre au rythme d'astuces les unes aussi complexes que les autres. C'est le principal, sinon l'unique inconvénient de la plate-forme de blog de Google. Car chez son concurrent Wordpress, l'utilisation d'un langage serveur (php) facilite les choses par l'intermédiaire de nombreux plug-ins et thèmes sans cesse mis à jour...

Les astuces Blogger peuvent être regroupées en 3 catégories: le style, les fonctionnalités propres à blogspot et l'intégration de composants additionnels issus de la blogosphère. Sur ce blog nous avons déjà publié beaucoup d'astuces de personnalisation (voir dans les articles relatifs) mais elles ne concernent que les deux dernières catégories citées plus haut.

1 - Le style: astuces pour personnaliser l'apparence du blog

Non spécifique à la plate-forme de blog Blogger, la gestion des feuilles de style et du html constitue la première étape de personnalisation d'un blog. Si vous ne maîtriser pas le css et le html, le plus simple c'est de visiter d'autres blogs (de préférence ceux qui ont le même hébergeur que le vôtre) et surtout de laisser un commentaire à leurs auteurs lorsqu'un élément graphique vous plait et que vous souhaitez le réaliser pour votre blog.

2 - Les fonctionnalités avancées de Blogger: astuces pour exploiter au mieux blogspot

Le modèle de blog ou template par défaut choisi lors de la création de votre blog ne sera jamais assez développé pour que celui-ci ressemble aux autres blogs que vous admirez. La solution consiste à le remplacer par un modèle plus évolué sorti tout droit de la blogosphère, à défaut d'en créer un vous même.

Comment installer un modèle blogspot ? Le principe est simple: en recherchant sur Google template blogspot, vous tomberez sur des blogs qui proposent des modèles à télécharger (fichiers xml). Une fois le fichier enregistré sur votre disque dur, rendez-vous dans votre Tableau de bord Blogger > Mise en page > Modèle puis cliquez sur Modifier le code html pour voir apparaitre l'image ci-dessus. Il ne vous reste plus qu'à parcourir votre disque pour sélectionner le modèle téléchargé puis de cliquer sur le bouton Transférer. Notez que cette procédure ne fonctionnera pas toujours et vous risquez de perdre vos widgets déjà enregistrés. Pensez donc à cliquer sur Télécharger le modèle dans son intégralité, afin de le sauvegarder.

L'astuce reine: rendre dynamiques les balises meta. Si vous retrouvez cet article en tête des résultats de recherche sur les astuces blogger/blogspot, c'est grace à cette astuce. Bien utilisée, elle permet à un blog Blogger comme celui-ci de concurrencer les grands sites Internet (pagerank supérieur à 6) comme les forums dans leur positionnement sur Google et Yahoo, sur les mêmes sujets traités.

Les astuces pour faire apparaitre les options cachée des widgets Blogger: C'est le cas du widget Flux, qui par défaut ne fait pas apparaitre le résumé des différents articles du flux concerné. L'astuce donnée dans l'article Utilisation avancée du widget flux a permis de réaliser entre autre le menu récente publication de ce blog qui attire fortement l'attention de nos lecteurs augmentant ainsi le nombre d'impressions de pages (très utile pour l'adsense).

Le widget label également modifié permet de faire apparaitre le titre ASTUCES BLOGGER sur notre page spécialement dédiée aux astuces blogspot, en lieu et place de "affichage des messages dont le libellé est astuces blogger"...

3 - Intégration de composants additionnels dans votre blog

Cela va de l'intégration d'un moteur de recherche Google personnalisé à l'ajout d'un bouton agrégateur comme Digg ou Technorati en passant par une gestion des commentaires confiée à un système plus efficace comme Haloscan. Tout cela nécessite, à moins qu'on vous fournisse un widget à installer (et qui aura pour conséquence d'alourdir vos pages: consulter l'article réduire la taille de vos pages web), de comprendre certaines fonctionnalités de Blogger soit d'utiliser des astuces.

Pour ceux qui souhaitent monétiser leur blog, sachez que les clics générés sur vos pages de recherche Google ont un coup nettement plus élevé. Consultez donc l'article Un moteur de recherche Google personnalisé sur votre blog afin d'en installer un et invitez vos lecteurs à la recherche sur votre site...

En conclusion

- Il existe plusieurs astuces Blogger/blogspot sur ce blog comme beaucoup d'autres, à vous de savoir les trouver si elles ne sont pas mises en évidence. Mais n'oubliez pas que les vraies astuces sont celles que vous comprenez ou celles dont on vous donne également la preuve par l'image. Cette preuve veut dire que le fournisseur de l'astuce sait de quoi il parle, l'a expérimenté et peut vous venir en aide en cas de problème.

- N'hésitez pas à laisser un commentaire lorsque vous visitez un blog surtout si vous y appréciez un contenu ou même pour apporter votre contribution. Mieux encore, abonnez-vous aux flux rss pour recevoir les dernières publications de vos blogs favoris. Bienvenu dans le monde des astuces blogspot!

Read more »

Le nombre de lecteurs ou visiteurs en ligne sur votre blog

Si vous souhaitez avoir plus d'audience sur votre blog et surtout garder vos visiteurs en ligne le plus longtemps possible, il n'est pas seulement nécessaire d'écrire des billets de qualité mais également d'offrir à vos lecteurs la possibilité de voir le nombre de visiteurs actuellement en ligne.

A partir du moment où vos visiteurs, surtout ceux qui viennent à travers les moteurs de recherche, se rendent compte qu'ils sont sur un blog, ils pourraient avoir tendance à le déserter le plus vite possible. En effet, un blog est censé être une initiative personnelle relatant ses propres passions et convictions, le plus souvent en direction d'amis.

Montrer à vos visiteurs qu'ils ne sont pas seuls à vous lire actuellement attisera leur curiosité. Ils se demanderont en effet ce que vous relatez de sérieux au point d'avoir plusieurs personnes connectées. Ainsi trouveront-ils alors leur réponse dans vos différents menus.

Les outils à utiliser

Il faut installer un compteur sur votre blog afin de déterminer le nombre de visiteurs en ligne. D'ailleurs certains compteurs de visites comme histats.com réalisent également ces mêmes tâches.

Un des compteurs les plus utilisés sur les blogs, spécialement dédié au nombre de visiteurs en ligne, est fourni par le site whos.amung.us. Il est très interactif mais son principal défaut c'est de ne pas préserver la confidentialité des données collectées. En clair, vu qu'il n'y a pas de log, tout visiteur peut consulter l'origine et les pages consultées par d'autres.

Script ou php ?

Il existe plusieurs variétés de compteurs pour blog. Ils utilisent soit un language serveur (php dans la plupart des cas, soit un script). L'avantage que disposent nos amis utilisateurs de Wordpress est de pouvoir en effet utiliser du php sur leurs blogs, cela permet ainsi d'installer un compteur sans forcément faire appel, à chaque chargement d'une page, à un site externe. Si vous êtes utilisateur des services de blogspot comme nous, contentez-vous d'importer des scripts. Cela ralentira bien évidemment plus ou moins le chargement des pages de votre blog.

La solution à la lenteur occasionnée par certains scripts

Elle consiste principalement à tester plusieurs compteurs afin de déterminer le mieux pour votre blog. Nous testons actuellement par exemple celui proposé par wieonline pour le nombre de visiteurs en ligne. N'hésitez pas à nous faire part d'autres outils pour visualiser les utilisateurs connectés à un blog, si vous les avez testés.

L'emplacement de votre compteur de visites est également important. En effet, il vaut mieux que celui-ci se charge en dernier dans vos pages html car s'il venait à ralentir la fluidité du blog, au moins le contenu nécessaire aux visiteurs sera chargé en premier et la gêne occasionnée sera plus supportable.

Read more »

Modèle de blog à 3 colonnes: avantages et inconvénients

Beaucoup de plate-formes de blog comme blogspot fournissent par défaut un modèle à 2 colonnes lors de la création d'un blog. Ce modèle est le plus souvent abandonné sous peu au profit d'un "template" à 3 colonnes le plus souvent téléchargé sur le Web. La différence entre les deux modèles: c'est d'abord le style css adopté et qui permet l'ajout de la troisième colonne.

Différence de style, mais aussi de contenu. En effet un blog à trois colonnes affichera plus de menus. Mais la vraie différence pourrait, lorsqu'on ne fait pas attention comme c'est souvent le cas, affecter le référencement du blog dans les moteurs de recherche. Ainsi, comme le montre l'image ci-contre, la description de vos articles dans Google pourrait bien être la même, en général le contenu trouvé dans le menu de gauche et qui n'a rien à voir avec les différents sujets abordés dans ces articles.

Faire attention au référencement

Si vous optez pour un blog à 3 colonnes et si le contenu de vos articles s'affiche dans la colonne centrale, prennez soin de regarder si dans le code html de la page, cette colonne se trouve avant les autres. Puisqu'il est question de regarder ce que voit le moteur de recherche, c'est bien le code html de la page, non le rendu visuel, qui vous le montre. En général, en utilisant un positionnement flottant des colonnes, on retrouve dans l'ordre du code la colonne de gauche, puis celle du centre et enfin celle de droite. Les trois avec l'attribut css "float:left".

Si vous êtez dans cette configuration, il faudrait masquez alors aux moteurs de recherche le contenu de la colonne de gauche en incluant tous les menus dans des scripts. Ainsi, une div s'écrira <script type='text/javascript'>document.write("<div>");</script>. Cela devient donc complexe si on doit écrire beaucoup d'éléments de cette façon. Ainsi, un autre positionnement plus judicieux placerait la colonne centrale d'abord, avec l'attribut position:absolute, puis les autres colonnes avec l'attribut float:left. Il faut s'y connaitre alors en feuille de style, et dans ce cas précis, c'est l'affichage des pages qui prendrait un coup, pas le référencement.

Le compromis entre référencement et rendu visuel

Le modèle à 2 colonnes flottantes, celle contenant les articles étant en premier et s'affichant à gauche est le meilleur compromis entre référencement et fluidité dans le chargement des pages. En somme, il vaut mieux utiliser un positionnement unique dans une page Web: soit flottant, soit fixe, soit absolut pour une meilleure fluidité.

En utilisant un positionnement flottant, un modèle de blog à 3 colonnes peut être créé simplement à partir d'un modèle à 2 colonnes. A condition de diviser la colonne de gauche en 2 et d'y faire flotter le menu central à doite comme ci-dessous:

    <body>
      <div id='page'>
        <div style='float:left'>
          <div style='float:right'> colonne centrale </div>
          <div style='float:left'> colonne de gauche </div>
        </div>
        <div style='float:left'> colonne de droite </div>
      </div>
    </body>

Read more »

Moteurs de recherche: meilleure source de trafic pour blog ?

Le trafic, le type de visiteurs dépendent de l'orientation donnée au blog. Ce sera soit un blog privé, dont l'adresse sera communiquée discrètement à ses amis car on y dévoile des choses personnelles, soit un blog à la quête d'un large public rentrant ainsi dans la communauté des blogueurs. Si dans le premier cas il est clair que le trafic est assuré exclusivement par des amis, dans le second les choses ne sont pas si évidentes.

Juste une envie de se faire connaitre dans la Blogosphère

Si c'est le cas, alors vous utilisez des services comme Blogroll, vous êtes inscrits sur Geekomatik ... en somme, votre blog est inscrit sur les sites de syndication des contenus de blogs et vous y rencontrez donc d'autres blogueurs ou lisez leurs articles. Les visiteurs en provenance de ces sites se comportent comme des amis, car en effet, ce sont d'autres blogueurs. L'avantage, c'est que votre blog gagne l'estime de la blogosphère, mais il ne faut pas oublier que sur Internet, on cherche d'abord des informations, avant les blogs. Dans cette logique, vous risquez de passer à côté d'une large audience, pire, si vous souhaitez monétiser votre blog, les visites d'autres blogueurs ne sont pas de qualité.

Vers la conquête du Web

Si vous êtes plutôt dans cette logique, avec un blog, faites de beaux yeux aux moteurs de recherche car ils sont les seuls à vous y conduire. En effet vous capterez ainsi l'attention des millions de personnes si vos pages sont bien positionnées. Malheureusement, beaucoup de blogs sont envahis de widgets de la blogosphère et de menus inutiles dans leurs pages et qui ralentissent même le chargement des ces dernières. C'est tout à fait ridicule quand 95% des visiteurs uniques par jour d'un blog, comme le montre notre image, viennent des moteurs de recherche, ils sont donc à la recherche d'informations sur des sujets précis et pour eux, ils ne se retrouvent pas sur un blog mais sur un site Internet.

En conclusion, les moteurs de recherche, notamment Google, restent bien la principale source de trafic des blogs. Sauf si ces derniers non pas vocation à s'ouvrir à l'ensemble des utilisateurs du Web, ou n'accordent pas d'importance à leur référencement ni à la rédaction de leurs articles (on ne rédige pas sur le Web comme dans un livre, l'occurence des mots dans une page Web étant un critère très important pour figurer en bonne position dans les recherches). Si vous souhaitez en plus rémunérer votre blog, oubliez les sites communautaires et les widgets en tout genre qu'on vous fera installer sur votre blog sous prétexte d'engendrer des visites, qui sont en plus celles d'utilisateurs avertis, des blogueurs.

Read more »

Statistiques et compteurs de visites pour blog: quel outil pour commencer ?

Traquer les visiteurs de votre blog pour générer ses statistiques de fréquentation: c'est le rôle des compteurs de visites qui pullulent sur le Web. Ce sont de simples scripts qu'il suffit de placer au bas de chaque page html du blog. Mais quand l'hébergeur de ce dernier est publique comme Blogger, ces scripts peuvent ralentir considérablement le chargement des pages.

Quand on souhaite accueillir des milliers de visiteurs sur un blog, c'est qu'on le compare à un site Internet et la navigation doit y être fluide, sinon beaucoup de vos lecteurs risquent d'être exaspérés par la lenteur à laquelle s'affichent les pages. En matière d'outils pour les statisques de site Web, Google Analytics est un des leaders. La quasi-totalité des sites Internet l'ont adopté. Mais le constat c'est qu'il est trop complet pour un blog à faible fréquentation et génère des lenteurs sur blogspot par exemple. Surtout, ses statistiques sont différées.

Les statistiques en temps réel

C'est l'idéal: voir qui visite actuellement votre blog; l'article visité; le moteur de recherche, la requète qui y a été tapée et la position à laquelle se trouvait votre article en temps réel. Ce type de services peut vous être fourni par des compteurs de visites moins connus comme blogcounter. Spécialement adapté aux blogs, ce dernier vous permet de savoir en temps réel ce qui intéresse les gens sur votre blog, si les visiteurs sont tentés à y naviguer... Ce dernier point vous permettra de mieux positionner vos menus afin qu'ils incitent à la navigation et vous débarrassez ainsi des widgets inutiles.

Quel moteur de recherche est venu indexer quelle page ?

Soucieux de l'indexation, vous aimeriez peut être voir les traces en temps réel du passage des différents moteurs de recherche sur votre blog. La fréquence de leur passage témoigne du bon fonctionnement du blog et de sa qualité. Ce type de services ne vous est pas fourni par Google Analytics. De la même manière, à travers leurs adresses IP vous pouvez reconnaitre les lecteurs les plus assidus de votre blog et comment ils y naviguent. Vous pouvez alors apporter plus de consitence à un article s'il est le plus sollicité.

En somme, le meilleur compteur de visites pour un blog peu fréquenté n'est certes pas Google Analytics. De plus, si c'est un blog Blogger et que vous n'utilisez pas un service de gestion des commentaires comme Haloscan, avec Google Analytics vous ne pouvez pas savoir les habitudes détaillées de vos visiteurs, notamment les spammeurs car leurs adresse IP, FAI et localité vous seront simplement cachés.

Read more »

Ajouter un bouton del.icio.us, digg, technorati dans son blog

Il s'agit d'affecter l'url et le titre de l'article du blog au bouton, qui n'est qu'un lien hypertexte auquel on aura éventuellement associé une image. Nous allons donc développer ici le principe de l'écriture de ce type de liens dans Blogger, sachant que les expressions à valider sont data:post.url et data:post.title.

OU PLACER LE BOUTON ?

Qu'il soit situé au bas de chaque article ou ailleurs, le bouton digg ou technorati doit être placé dans un widget de type blog (voir notre article maîtriser le widget blog), seul capable de lui fournir l'url et le titre d'un article. Ainsi le plus judicieux, c'est de créer un élément <b:includable/> parmi tous ceux existant déja dans votre widget blog (blog1 ou blog2) et d'y inclure les descriptions de tous les boutons que vous souhaitez placé dans votre blog. L'avantage de cet élément, c'est qu'il pourra être inséré à n'importe que endroit (avant ou après le titre de l'article, les commentaires; en page d'accueil ou seulement en page article...).

Dans l'article utilisation du b:loop, variation d'éléments dans Blogger, nous avons créé un <b:includable id='partage' var='post'>, dépendant de chaque article (var='post'), dans lequel nous avons placé un bouton del.icio.us. Nous avons ensuite inséré cet élément en page d'accueil par l'intermédiaire de la balise <b:include data='post' name='partage'/>. Il suffit donc de vous inspirer de cet exemple et de rajouter d'autres boutons.

ECRITURE DES URLs

Certains agrégateurs proposent une installation automatique de leur bouton, en fonction de votre plate-forme de blog. Dans le cas ou ce processus ne fonctionne pas ou ne vous est pas proposé, il faudra écrire manuellement l'url du bouton qui se décompose en général comme suit: <a href='url_de_l'agrégateur?url=url_article&title=titre_article'>...</a>. Pour générer cette url, il faudra valider les expressions data:post.url et data:post.title en utilisant le paramètre expr: . L'utilisation de ce paramètre dans une expression implique que les éléments ne nécessitant pas une validation soient entourés de " ", et que le signe + séparent les différents élements. Ce qui donne dans le cadre du bouton del.icio.us par exemple <a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title'>.

A retenir: la validation d'éléments peut se faire de 2 manières. Considérons data:post.title avec lequel nous souhaitons écrire les deux balises équivalentes ci-dessous: <title>ici le titre de l'article sur onenblogue</title> et <meta name='title' content='ici le titre de l'article sur onenblogue'/>. L'écriture Blogger correspondante donnera respectivement: <title><data:post.title/> sur onenblogue</title> et <meta name='title' expr:content='data:post.title + "sur onenblogue"'/>.

A vous maintenant de trouver les boutons nécessaires sur les sites de vos agrégateurs, mais aussi leurs images. Toutefois, si vous avez beaucoup personnalisé votre blog, évitez les installations automatiques de widgets car elles s'appuient sur des balises par défaut (<div id='post-footer'/> par exemple) que vous avez peut être supprimées ou déplacées.

Read more »

Personnaliser le message de la page libellé (status-message) Blogger

C'est le status-message, il signale le résultat d'une recherche (search/label/blogspot par exemple) et s'affiche particulièrement sur la page libellé (voir les différents types de pages Blogger). Imaginez alors qu'un telle page soit une section de votre blog, comme c'est souvent le cas avec Blogger, ce texte devient alors banal car à la place vous aimeriez mettre directement le nom de la section ou un joli texte associé à ce nom.

L'idée est de travailler avec la donnée data:labels, qu'on ne peut avoir que dans un widget de type label. Ainsi, on pourra poser la condition: si data:blog.url == data:label.url, soit si la page affichée est une page libellé et l'action à exécuter sera: alors data:label.name, soit le nom du libellé en question.

Le widget de type label est censé à l'origine afficher un nuage de libellés de votre blog. Pour éviter cet affichage qui n'est pas à l'ordre du jour, nous allons personnaliser ce widget puis l'insérer manuellement. Mais avant toute chose, commencez par supprimer dans le widget blog l'élément <b:include data='top' name='status-message'/> qui affiche le message par défaut et réduisez sa description (elle ne peut être supprimée) à <b:includable id='status-message'/>.

Un widget ne pouvant être inséré que dans une section, nous allons donc en créer une et placer le tout juste avant la section main (<b:section id='main' ...) qui contient le widget blog (<b:widget id='blog1' ...). Notre message ne devant s'afficher que dans une page libellé, un jeu de conditions sera ainsi utilisé, ce qui donne comme code (à copier-coller bien sûr):

<b:if cond='data:blog.pageType != "item"'><!--on exclut la page article-->
 <b:if cond='data:blog.url != data:blog.homepageUrl'>
 <!--on exclut l'accueil-->
  <b:if cond='data:blog.pageType != "archive"'><!--on exclut la page archive-->
   <b:section id='status-message-label'>
   <!--on cr?e la section-->
    <b:widget id='Label1' locked='false' title='' type='Label'>
    <!--on y met le widget label1-->
     <b:includable id='main'>
      <div class='widget-content'>
       <b:loop values='data:labels' var='label'>
        <b:if cond='data:blog.url == data:label.url'>
         <div class='status-msg-wrap'><!--(1)-->
          <div class='status-msg-body'>
           <data:label.name/>
          </div>
          <div class='status-msg-border'><!--(2)-->
           <div class='status-msg-bg'>
            <div class='status-msg-hidden'>
             <data:label.name/>
            </div>
           </div>
          </div>
         </div>
        </b:if>
       </b:loop>
       <b:include name='quickedit'/>
      </div>
     </b:includable>
    </b:widget>
   </b:section>
  </b:if>
 </b:if>
</b:if>

Nous avons volontairement mis les élément (1) et (2) afin de conserver le style de l'ancien message. A la place vous pouvez simplement mettre un seul bloc <div><data:label.name/></div> et lui donner du style après. Le résultat obtenu apparait sur la figure ci-dessus, ou bien consultez notre page libellé destinée aux astuces Blogger.

Read more »

Gagner de l'argent avec Google Adsense: comment ?

Google Adsense est la meilleure régie publicitaire actuelle du Web. C'est avant tout un nombre impressionnant d'annonceurs, le roi de la publicité ciblée, la possibilité de paramétrer les annonces aux couleurs de son blog et de suivre leurs performances par l'intermédiaire de critères prédéfinis...

Pour gagner de l'argent avec Google Adsense il faut un contenu intéressant, savoir écrire pour le Web, bien intégrer et positionner ses annonces et (peut être) aider le robot Google à mieux cibler votre site (cas d'un site multithématique).

Un contenu intéressant pour visiteurs et annonceurs

Après avoir assuré un bon référencement et positionnement de ses pages Web sur les moteurs de recherche, pour avoir des milliers de visiteurs chaque jour sur son site il faut que son contenu soit intéressant pour les visiteurs comme pour les annonceurs.

Les premiers devant cliquer sur vos annonces puis sur le site de l'annonceur grâce aux conseils et recommandations que vous leur aurez donnés ou la sérénité dégagée par vos écrits. Les derniers proposeront des annonces pertinentes et si possible feront monter les enchères sur vos espaces publicitaires.

Savoir écrire pour le Web

Pour cibler facilement les annonces sur vos pages, il est nécessaire de savoir écrire pour le Web. C'est à dire privilégier les mots clés dans les titres de vos articles et inonder votre texte de ces mots. Par exemple, un titre comme "comment gagner de l'argent avec Adsense" risquerait de générer des annonces comme "comment gagner au loto" ou "comment jouer en ligne", le mot "comment" ayant une grande importance car placé au début.

Intégration et positionnement des annonces adsense

Pour obtenir de meilleurs résultats avec Google Adsense, il est nécessaire que vos annonces soient parfaitement intégrées à votre site (même couleur pour les liens hypertextes...) et soient le plus visible possible. Cette visibilité dépend de la couleur choisie pour les liens, du format des annonces mais aussi de leur positionnement.

Tout format d'annonces rapporte, cela dépend des jours et de l'humeur des annonceurs. Privilégiez tout de même les formats carrés, il y a plus de texte et font moins "liste de liens". Le positionnement idéal consiste à intégrer les annonces adsense au coeur même de son texte, comme celle située au début de cet article.

Comment aider le robot Google à mieux cibler mes pages ?

Pour gagner de l'argent avec Google Adsense, beaucoup vous conseilleront d'éviter de créer un site ou blog multithématique car le ciblage y est souvent mal fait engendrant un faible taux de clics. En clair, si vous n'introduisez pas de balise de ciblage sur vos pages, certains mots clés (fortement valorisés par les annonceurs) prennent le dessus sur les autres et génèrent ainsi les mêmes annonces sur toutes les pages de votre site, quel que soit le sujet abordé. Consultez notre article Ciblage Adsense: intégrer les balises sur son blog.

Adsense, ce n'est pas que des annonces à intégrer à son blog, mais aussi un moteur de recherche Google à installer si possible à l'entête de votre site et au bas de chaque article, puis des parrainages à proposer à ses visiteurs. A moins d'avoir un site de vente en ligne, je vous déconseillerez ces parrainages moins fructueux car pas assez d'annonceurs et pas de ciblage.

N'hésitez surtout pas à installer votre moteur de recherche, pour cela consultez notre article un moteur de recherche Google personnalisé pour votre blog.

Read more »

Maitriser le widget blog Blogger

Le widget blog se compose d'éléments <b:includable/> dont le plus important est <b:includable id="main" var="top"/>. En effet, c'est lui qui "intègre" tous les autres éléments souhaitant s'afficher dans votre blog. Cette intégration se traduit par la présence d'éléments <b:include/>. Des exemples de structure de ce b:includable sont analysés dans notre article "Variation d'éléments dans Blogger".

C'est uniquement dans ce widget et notamment ce b:includable que vous pouvez récupérer les données liées à un article. Pour en insérer plusieurs dans votre blog, il suffit de copier celui qui s'y trouve déja, de le coller à l'emplacement désiré et changer son id (uniquement en blog2, blog3 ...). Retenez tout de même qu'il ne peut être intégré, comme tout widget d'ailleurs, que dans une section, comme suit:

<b:section id='MaSection'>
  <b:widget id='Blog2' locked='true' title='Messages blog' type='Blog'>
    <b:includable id='main' var='top'/>
    <b:includable id='post' var='post'/>
  </b:widget>
</b:section>

LES USAGES PRATIQUES DU WIDGET BLOG

1. Rendre dynamiques les balises meta pour un meilleur référencement: C'est le premier problème à résoudre lorsqu'on souhaite atteindre des taux de visites dignes d'un site web. Pour dynamiser les balises meta de votre blog, rien de tel que d'insérer dans la section <head>...</head> un widget blog. On y récupérera les données data:post.title à affecter dans la balise <title>, ou encore data:post.labels dont les élément data:label.name seront affectés dans la balise <meta name="keywords">. Pour voir ce que donne le code, consultez notre article Rendre dynamiques les balises meta de son blog.

2. Afficher des éléments habituellement placés au bas des articles, à d'autres endroits: Pourquoi avoir toujours plein de liens (agrégateurs, commentaires...) au bas des articles ? Si vous lisez un article sur le site Internet Le Monde, le lien vers les commentaires est un menu s'affichant à droite, pas au bas des articles qui sont souvent longs. Nous nous sommes d'ailleurs inspirés de cet exemple. Pour ce faire, après avoir différencié les types de pages dans Blogger, insérez un autre widget blog dans le menu concerné et modifiez son <b:includable id="main" var="top"/> en y sypprimant les éléments indésirables (ici par exemple les articles <b:include data="post" var="post"/> ...) et en y ajoutant vos propres éléments <b:include/> et <b:includable/> créés à partir du modèle proposé dans notre article Variation d'éléments dans Blogger.

3. Afficher les titres derniers articles publiés en page d'accueil: Hélas, beaucoup de blogs intègrent encore dans leurs pages d'accueil un widget affichant les derniers articles. Dans la version 1 de Blogger il y'a un outil pour cela, pas dans la version 2. Alors on fait appel à différents scripts comme json, ou à des widgets flux importés de différents sites, tout cela ayant pour conséquence de ralentir le chargement des pages. Un moyen très simple consiste à utiliser un widget blog, y supprimer tout ce qui est dans le <b:includable id="main" var="top"> et y laisser afficher seulement les titres des articles en y écrivant le code ci-dessous:

<b:includable id='main' var='top'>
  <b:loop values='data:posts' var='post'>
    <div style='clear:both'> <!--clear:both empêche les articles de se chevaucher-->
      <a expr:href='data:post.url'>
        <data:post.title/> <!--(1) titre de l'article-->
      </a>
      <data:post.dateHeader/> <!--(2) date de publication de l'article-->
    </div>
  </b:loop>
</b:includable>

Comme vous pouvez le constater, en (2) nous avons ajouté les dates de publication des articles, tout comme on pourrait aussi mettre l'auteur <data:post.author/>. Ainsi, si dans votre panneau de configuration vous avez choisi d'afficher 10 articles en page d'accueil, avec ce widget blog, il y aura aussi 10 liens dans les récents articles ...

Read more »

Utilisation du b:loop, variation d'éléments dans Blogger

<b:loop values="data:posts" var="post"/>, voici un exemple de balise que vous retrouverez souvent dans votre code html Blogger. Il faudrait vous en habituer si vous souhaitez personnaliser votre blog. Ici, il permet de s'intéresser à chaque article (var="post") parmi tous les articles disponibles (values="data:posts"). Reste à savoir quels sont les articles disponibles dans les différents types de pages Blogger ?

La page d'accueil de votre blog ne peut afficher au maximum que 10 articles. Dans votre panneau de configuration, vous choisissez donc le nombre d'articles à afficher, appelons n ce nombre. Ainsi un b:loop dans la page d'accueil n'analysera dans notre cas que n articles. Voici une illustration du code dans le cadre d'une page d'accueil Blogger:

<b:includable id='main' var='top'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'> <!--si accueil-->
    <b:loop values='data:posts' var='post'> <!--pour chaque article, on affiche-->
      <b:include data='post' name='post'/> <!--(1) l'article-->
       <b:include data='post' name='partage'/> <!--(2) les agrégateurs: digg, scoopeo ...-->
       <b:include data='post' name='comments'/> <!--(3) les commentaires-->
     </b:loop>
  </b:if>
</b:includable>
<b:includable id='partage' var='post'> <!--(4) description de l'élément (2)-->
  <div>
    <a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow'>
      <img alt='Ajouter cet article à Del.icio.us' src='http://del.icio.us/delicious.png'/>
    </a>
  </div>
</b:includable>

Le code ci-dessus est un exemple, toutefois vous constaterez que les éléments (1) et (3) existent bien dans votre blog. Nous avons introduit ici l'élément (2), qui permettra l'affichage des boutons de partage de contenu. Comme cet élément n'existait pas, nous l'avons ensuite fabriqué en (4).

Nous avons pu lire sur certains blogs qu'il était difficile sur Blogger d'afficher les agrégateurs avant les commentaires et surtout de leur permettre de récupérer les Urls des articles. D'après le code ci-dessus, vous voyez qu'on peut afficher les éléments dans l'ordre désiré, à codition de créer ceux qui n'existaient pas comment nous l'avons fait en (4). L'élément (4) varie en fonction des articles, ainsi le bouton "ajouter cet article à del.icio.us" que nous y avons placé, récupère l'Url et le titre de chaque article concerné.

En page article, il n'y a qu'un seul élément: l'article concerné. Un b:loop comme nous l'avons fait ci-dessus n'analysera qu'un seule donnée. Par contre, pour un article, on peut avoir plusieurs commentaires, c'est l'occasion de faire un autre b:loop comme suit:

<b:includable id='main' var='top'>
  <b:if cond='data:blog.pageType == "item"'> <!--si page article-->
    <b:loop values='data:posts' var='post'> <!--pour cet article, on affiche-->
      <b:include data='post' name='post'/> <!--(1)l'article-->
      <div class='auteurs commentaires'> <!--(2) les noms de ceux qui l'ont commentés-->
        <span>Ils ont commenté cet article:</span>
        <span>
          <b:loop values='data:post.comments' var='comment'> <!--(3)-->
            <data:comment.author/>
          </b:loop>
        </span>
      </div>
    </b:loop>
  </b:if>
</b:includable>

On a volontairement choisi dans cet exemple d'afficher les noms de ceux qui ont commenté l'article. C'est le b:loop défini en (3) qui récupère ces noms, ainsi vous voyez comment utiliser un b:loop dans un autre...

En conclusion, savoir différencier les types de pages dans Blogger et maitriser le fonctionnement de la propriété b:loop vous assurera une personnalisation sans risque de votre blog. Cela vous évitera aussi de recopier et d'installer des codes fournis dans différents blogs sans vérifier leur cohérence, surtout si on ne vous montre pas une page dans laquelle ces codes ont été mis en pratique.

Read more »

Les différents types de pages blog sur Blogger

Sur un blog classique, les messages s'affichent les uns après les autres depuis l'accueil. En maitrisant les feuilles de style (css), on peut ajouter un menu de chaque côté des articles et créer ainsi un blog à 3 colonnes. Nous n'allons pas évoquer ici la façon d'ajouter des menus à votre blog, mais celle de créer différents types de pages autre que la page d'accueil, ou simplement d'afficher certains menus uniquement dans certains types de pages.

Il existe 4 types de pages sur un blog Blogger : l'accueil, la page article, les archives et la page affichant les articles d'un libellé. Pour séparer ces différentes pages il faut faire appel à un jeu de conditions qui se décrit comme suit:

<b:if cond='data:blog.pageType == "item"'>
<!-- le contenu de la page article, comme celle sur laquelle vous lisez cet article-ci (si vous la lisez sur notre blog). s'affiche ici. -->
  <b:else/>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!-- Votre page d'accueil se place donc ici. N'hésitez pas à consulter la nôtre sur ce modèle.-->
    <b:else/>
    <b:if cond='data:blog.pageType == "archive"'>
    <!-- Vos archives blog s'afficheront ici, sur une page qui leur sera entièrement dédiée. La nôtre est toujours en cours d'évolution.-->
    <b:else/>
    <!-- Voici la dernière catégorie de page, elle affiche les articles associés à un libellé (label). Par exemple notre page pour le libellé blogspot. -->
    </b:if>
  </b:if>
</b:if>

APPLICATIONS PRATIQUES DE CES CODES

L'utilisation la plus simple du code ci-dessus consiste à filtrer les éléments en fonction des 4 pages que nous venons de décrire. Si vous placez ce code dans le menu à droite de votre blog par exemple, vous afficherez ainsi dans ce menu, certains éléments comme votre profil, la description du blog... qui apparaitront uniquement à l'accueil, alors que sur le même menu et cette fois dans une page article on aura les récents articles (pour inviter vos lecteurs à naviguer sur votre blog) ...

Un usage avancé de ce code, si vous êtes un professionnel ou habitué de la plateforme Blogger, est de réorganiser dans chaque Widget de type Blog (Blog1, Blog2 ...) l'élément <b:includable id='main' var='top'> qui affiche les articles et menus de la page principale du blog. Vous constaterez d'ailleurs que pour préciser l'affichage des commentaires uniquement sur une page article, on a dans ce <b:includable> le code suivant:

<b:if cond='data:blog.pageType == "item"'>
  <b:include data='post' name='comments'/>
</b:if>

Si vous rencontrez des difficultés à mettre en place ce code, n'hésitez pas à nous contacter, c'est aussi cela l'avantage des blogs.

Read more »

Réduire la taille de ses pages web Blogger

A l'heure ou les blogs rivalisent de plus en plus avec les grands sites Internet, il vaudrait mieux s'aligner sur ces derniers en ne trainant pas derrière soit des pages web trop lourdes. Le problème affecte particulièrement les utilisateurs de la dernière version de Blogger.

En effet, cette version génère un script assez long à la fin de chaque page HTML qu'elle crée. Ce script (WidgetManager) permettant la prise en charge et la gestion des widgets (ou gadgets), s'alourdit au fur et à mesure que vous ajoutez des éléments à votre blog.

On comprend ainsi pourquoi les blogueurs les plus populaires de la plateforme ont choisi de ne pas passer à la nouvelle version de Blogger qui pourtant permet plus de personnalisation, comme nous avions pu le faire sur On en blogue. Prennez soins de sauvegarder votre modèle de blog (Tableau de bord > Modèle > Modifier le code HTML > Télécharger le modèle dans son intégralité) et surtout de noter la taille de la page d'accueil de votre blog avant d'effectuer les manipulations qui vont suivre.

UTILISEZ LE MOINS POSSIBLE LES WIDGETS

Le contenu de chaque widget ainsi que le code permettant de le gérer sont repris dans le WidgetManager: ainsi ce contenu se retrouve en double (visible dans votre blog, disponible dans le WidgetManager) dans le code HTML de votre page web. Il ne doit y avoir pratiquement aucun Widget HTML sur votre blog, préférez à la place un DIV directement dans le modèle de blog.

ALIGNEZ LES ECRITURES EN SUPPRIMANT LES BLANCS ENTRE LES LIGNES

Toujours dans votre modèle de blog, cochez Développer le modèle de gadgets, et alignez les écritures les unes après les autres. Vous supprimerez ainsi tous les blancs entre les éléments. On pourrait croire qu'un espace vide ne compte pas, mais c'est faux. C'est ainsi que le code source des pages web des grands sites Internet comme MSN est une succession ininterrompue de caractères, sans espace.

Cette manipulation est également à faire pour vos feuilles de style (css). Vous constaterez que si vous y écrivez les éléments les uns après les autres sans espace (par exemple: body{...}a{...}.header{...}), vous réduiserez considérablement la taille du fichier.

COMPACTEZ LES ELEMENTS <b:includable></b:includable> INUTILES

Ces éléments présents dans votre modèle de blog contiennent les descriptions des fonctionnalités de ce dernier. On ne peut supprimer que leur contenu. En effet, celui-ci est également présent dans le WidgetManager.

Considéront la fonctionnalité qui ajoute les boutons suivant et précédent vous permettant de naviguer d'une page à l'autre de votre blog: si vous ne l'utilisez pas comme nous, alors sa description vous est inutile. Pour la supprimer, dans votre modèle de blog, cherchez la ligne <b:includable id='nextprev'> ... </b:includable> et supprimez son contenu, le réduisant ainsi à <b:includable id='nextprev'/>.

Attention: 1. un élément <b:includable> contient une description, celle-ci ne devient une fonctionnalité que si elle est incluse dans le blog par l'élément <b:include>. Ainsi, avant de supprimer le contenu du <b:includable id='nextprev'> ... </b:includable> , pensez d'abord à supprimer entièrement le ligne <b:include name='nextprev'/>.

2. Si vous désirez à nouveau inclure un élément <b:includable> dont le contenu aura été supprimé, il suffit alors, toujours dans votre modèle de blog, de cliquer sur Rétablir les paramètres par défaut des modèles de gadgets.

Read more »

Geekomatik causerait des problèmes d'indexation aux blogs

Contrairement à d'autres sites qui syndiquent les flux rss des blogs, comme technorati, blogcatalog ou digg, Geekomatik fait de votre article son propre contenu (en lui associant une url), fournit un lien vers l'original mais surtout permet aux moteurs de recherche d'indexer ce contenu sur son site. La bonne nouvelle c'est qu'il permet également aux moteurs de recherche de suivre les liens, ce qu'aucun autre site de ce genre ne fait.

Le résultat, comme le montre notre image, c'est que notre article Accélérer le chargement de la video dans Windows media Player, qui n'est curieusement pas indexé à ce jour par Google sur notre blog, se retrouve magnifiquement indexé avec la totalité de son contenu sur Geekomatik. Ainsi, peut-on penser que pour Google, notre article est une copie à l'identique de celle qu'il a trouvée sur Geekomatik...

Ce site étant le seul dans sa catégorie à fontionner ainsi, il est également le premier à vous proposer le partage des revenus publicitaires, puisque dans les options de votre compte, vous pouvez renseigner votre code Adsense. Cela prouve que Geekomatik reconnait exploiter votre propriété intellectuelle. Et si vous n'avez pas de compte Adsense, comment se fait le partage des revenus, sur quelle base? Ce sujet n'est d'ailleurs pas mis en avant car sur leur forum et blog, on n'en parle pas.

La solution consisterait à fournir à Geekomatik un flux RSS dont les articles seraient tronqués. Cela permettra aux moteurs de recherche de mieux considérer et indexer l'article complet disponible sur votre blog.

Read more »

Personnaliser la page commentaire de Haloscan

Dans un article précédent, nous vous montrons comment installer le système Haloscan sur votre blog, de préférence manuellement car l'installation automatique proposée satisfait rarement.

Si vous disposez d'un compte basique, gratuit chez Haloscan, vous ne pouvez personnaliser le code Html de la page pour la rédaction des commentaires. Toutefois, vous gardez la main en partie sur sa feuille de style car vous pouvez y modifier l'arrière plan, la couleurs des liens hypertextes, la taille de la fenêtre ...

Commencez donc par choisir un model de boite à commentaires dans le menu Gallery de l'onglet Template. Rendez-vous ensuite dans le menu Stylesheet. Une des parties les plus importantes à modifier dans ce menu est: .MainTable{}. En effet c'est le style qui est appliqué à la fenêtre dans laquelle s'afficheront les commentaires.

Vous pouvez lui spécifier une largeur équivalente à celle de votre blog (width:800px; par exemple), une image d'arrière plan correspondant à votre logo (background:url(http://abc.com/background.gif) #fff no-repeat 0 0;) et aussi un décalage pour empêcher ce logo d'être masqué (padding-top:60px; par exemple).

Un autre élément non moins négligeable est body{} dans lequel vous pouvez également ajouter l'arrière plan (cette fois de votre blog), la taille des polices de caratères ainsi que leur couleur. Plusieurs autres caractéristiques peuvent être ajoutées, mais il est interdit de créer ou recopier sur une autre ligne un élément de style, il faut simplement ajouter des caractéristiques à ceux qui existent déjà comme nous venons de le faire. Enfin, votre page commentaire ressemble bien à votre blog comme en témoigne l'image ci-dessus.

Read more »

Détection de style dans Windows Live Writer: comment faire quand ça ne marche pas ?

En effet, comme nous le décrivions dans notre article Publier avec Windows Live Writer bêta français, WLW a la possibilité de détecter le style CSS de votre blog afin de l'appliquer à différents éléments (a, p, h1, h2, div ...) lors de la rédaction de vos posts.

Mais parfois, à cause d'éléments de style trop personnalisés, en fonction de la plateforme qui héberge votre blog cette détection échoue. Comment contourner cette situation manuellement? D'ailleurs, il est préférable de le faire ainsi, comme nous allons le voir, afin de mieux maitriser son style. L'image ci-contre montre la rédaction de cet article après cette configuration manuellement du style.

L'astuce consiste à éditer soit même le modèle de style par défaut qu'utilise Windows Live Writer. Ce modèle se trouve dans le dossier: C:\Program Files\Windows Live\Writer\template. Vous y trouverez 2 fichiers, la feuille de style defaultstyle.css et le fichier html default.htm. Si vous utilisez Windows Vista, ladite manipulation ne peut être effectuée qu'en mode sans échec car même avec les droits administrateur nécessaires vous aurez du mal à écrire dans le dossier program files.

Ouvrez le fichier defaultstyle.css avec l'éditeur de texte et rajoutez les éléments de style que vous voulez en sachant qu'il y'a trois classes indispensables: .title {},  .body {} et .post {}).  Elles contiennent respectivement le titre et le corps du message pour les deux premiers comme suit:

<DIV class="post">
  <DIV class="title">Le titre de l'article</DIV>
  <DIV class="body">Le corps de l'article</DIV>
</DIV>

Si vous utilisez les services de Blogger, ici la classe .title correspond à l'élément h1, et la classe .body correspond à .post-body, la classe .post restant inchangée. N'hésitez pas à fixer la largeur de la fenêtre article à sa valeur réelle dans le blog et de centrer cette fenêtre dans WLW [ .post{width: ... px; margin:0 auto;} ]. Enregistrez votre feuille de style et redémarrez WLW à chaque fois pour prendre en compte ces modifications.

Read more »