New Blogger Tricks


Voici les quelques petits trucs pour Google's Blogger/Blogspot, utilisés pour améliorer quelque peu un template de base. J'espère que cela vous sera de quelque utilité.

Si vraiment vous ne comprenez rien à l'anglais, que vraiment vous avez cherché en vain une version française, et qu'il y a plusieurs demandes, je veux bien me dévouer et traduire ce qui aurait dû l'être par d'autres — c'est qu'on n'a pas tout le temps dont on aimerait disposer !

Sur ce, bon trafiquage de blog...

*

1) How to make a hovering peek-a-boo Navbar

Il s'agit d'obtenir une barre de navigation Blogger (tout en haut du blog, aka Navbar) invisible, qui réapparaît et fonctionne lorsqu'on passe le curseur de la souris dessus.

Le truc fut trouvé chez Bloggeratto.

Un simple copier-coller dans le code HTML du blog, et c'est fait.

*

2) Prevent mail spam

Il s'agit, si vous souhaitez mettre un lien du type "Contactez l'auteur par e-mail", de faire en sorte que votre adresse courriel n'apparaisse pas.

Cela se trouve, par exemple, chez Contactify qui, gratuitement et en quelques secondes, vous fournira l'adresse d'un lien vers un formulaire : une fois dûment rempli et confirmé par l'internaute qui veut vous contacter, le message arrivera dans votre boite courriel.
Comme ils disent : c'est un email, sans l'adresse.

Pour ajouter ce lien sur votre blog, par exemple en gadget/widget dans une colonne (Mise en page : Éléments de la page : Ajouter un gadget : HTML/Javascript), utilisez ce code, qui sert à créer un lien qui s'ouvrira, au clic, dans une nouvelle fenêtre ou un nouvel onglet.

Edit : mon lien Contactify est mort sans me prévenir, empêchant les messages de m'arriver. On eut tôt fait de revenir à l'ancienne et simple méthode du lien vers l'adresse e-mail. Optez pour gmail : le filtre spam en amont est une merveille.

*

3) How to add a favicon (favorite icon) to your URL

Il s'agit de remplacer le favicon (l'icône favorite : ce petit logo qui apparaît devant les URL et dans les onglets &c.) de Blogger par une image de votre choix.

La manip' se trouve chez Tips for New Blogger.

Cela demande quelques étapes supplémentaires : choisir une image, la mettre au format, la convertir en fichier .ico (on opta pour la solution en ligne et usa de Dynamic Drive), la charger quelque part sur le net (on créa pour l'occasion un site sur Google Sites, puisque Page Creator n'est plus disponible, et y uploada le dit fichier), noter l'URL du fichier, et modifier le code HTML de votre blog. Ça fonctionna du premier coup pour nous.
Et c'est assez sympa, m'est avis.

Edit : un autre petit manuel pour favicon.

Edit 2 : Blogger a grandement amélioré son interface et propose d'insérer un favicon sans autre démarche que l'upload d'une quelconque image carrée dans Layout, ce qui simplifie tout, n'est-ce pas :




*

4) How to display expandable posts (Read more ! trick)

Il s'agit d'obtenir, sur la page principale de votre blog, des billets tronqués (où cela vous semble bon) portant le message et lien "Read more !" (ou tout autre message de votre crû), qui se déroulent ou s'ouvrent en entier dans une nouvelle fenêtre, lorsqu'on clique sur le dit lien. Cela permet de ne surcharger pas la page principale : bien pratique si l'on poste des pavés.

On usa du truc trouvé chez The Blog Doctor.

Là aussi, il y a un peu plus d'une étape : deux modifications du code HTML de votre blog, et une modification dans Paramètres : Mise en Forme. Ça se fait très bien.

Le souci principal a lieu lors de la rédaction / publication des billets : le code a des comportements, pour lui probablement logiques, pour moi plutôt imprévisibles et gênants (multiplication du code déclencheur, en particulier, qui empêche le résultat souhaité).
On commence juste à comprendre quoi.

Il faut en fait, lors de la création / rédaction d'un nouveau billet, effectuer l'alignement du texte (vous savez : aligner à droite, à gauche, justifier, centrer — et toute autre manipulation de mise en page) dès le départ, passer alors du mode HTML au mode Rédiger et vice-versa, vérifier qu'aucun code n'a été ajouté d'office.
N'oubliez non plus, après publication, de vérifier que tout apparaît comme vous le souhaitez sur la page principale — si vous n'avez pas eu de chance, modifiez le message pour ne laisser que le "fullpost" et ses balises en un seul exemplaire.
Pour pallier tout comportement indésirable du code, le meilleur moyen est encore de ne travailleur qu'en HTML (en particulier quand il faut faire des copier-coller, quels qu'ils soient).

*

5) How to change your domain name

Il s'agit de changer l'adresse de votre blog en quelque nom et URL plus personnalisés (sans le "blogspot"). C'est probablement la première chose à faire, avant toute autre. Au cas où.

Autant dire qu'on fit cela un peu dans le noir et à l'aveuglette, n'ayant trouvé d'explication pas-à-pas satisfaisante — on a peut-être mal cherché.

Bref, il s'agit tout d'abord d'acheter un nom de domaine. Je suis passé par le service partenaire proposé par Google (GoDaddy).

Il faut aller dans Paramètres : Edition, et cliquer sur "domaine personnalisé", choisir un nom de domaine et en vérifier la disponibilité, cliquer, cliquer, payer les 10 $ (pour un an), créer une adresse administrateur principale pour la gestion de votre compte Google Apps (dont je n'ai pas encor saisi la subtilité — merci pour vos éventuelles lanternes) — et la migration de votre blog commencera.
Se passent alors des trucs bizarres qui, semble-t-il, sont normaux. (Merci à Suppaiku pour ses infos alors qu'on se faisait bien du souci !)

La migration sera complète, et la redirection de votre ancienne adresse à la nouvelle active, au bout de trois-quatre jours. Notez que les icônes de modification rapide (les crayons ou clefs qui apparaissent sur la page principale du blog, lorsque vous êtes connectés) ne seront disponibles qu'alors.

*

6) Add a search box

Il s'agit d'ajouter un champ de recherche (search box) à votre blog.
La Navbar en contient déjà une ; mais si vous souhaitez l'intégrer dans le corps du blog, voici.

Le code fut trouvé chez Blogging for Gold.

Il suffit d'un copier-coller dans une fenêtre widget/gadget HTML/Javascript.
Plus simple tu meurs.

Edit : Blogger compte à présent parmi ses widgets une barre de recherche google qui fonctionne très bien.

*

7) Make a dropdown menu

Raz le bol des catégories à n'en plus finir, des liens impératifs qu'on ne sait plus où mettre ?
Ajoutez un menu à onglets déroulants.

Le truc fut trouvé chez BloggerStop.

Plus qu'un simple gadget mettant, par exemple, tous les libellés dans une petite case à menu déroulant, il s'agit de construire une véritable barre de menu, personnalisée, contenant tous les liens, catégories, &c, que vous souhaitez voir figurer.

Ça prend un peu de temps — fonction du nombre de liens et de la complexité de l'architecture du menu.

Il faut tout d'abord télécharger le paquet de deux fichiers que l'on trouve chez BloggerStop (lien ci-dessus).
Puis les uploader quelque part sur le web (BloggerStop conseille HotLinksFiles ; GoogleSites fonctionne tout aussi bien — edit : les fichiers uploadés sur GoogleSites n'étaient parfois pas récupérés : on utilisa en fin de compte Sigmirror. Edit 2 : qui lui aussi avait quelques soucis de temps à autre : bougé vers FileAve.com, qui pour l'instant fonctionne au poil).
Modifier le code html du template comme indiqué, remplacer les vides par les liens directs vers les-dits fichiers que vous venez de mettre en ligne, puis créér le widget html comme indiqué.

Ensuite, vient la part fastidieuse de la chose.
Je vous conseille de faire un plan-organigramme de votre menu sur papier.
Ensuite, il faut compter le nombre de liens, les sous-liens, &c., y mettre les noms, puis les URLs. Vérifier de temps en temps si l'on n'a pas cassé un bout du code par inadvertance.
Étant une bite en css (quand on n'a jamais étudié quelque chose, on ne peut l'inventer), je serai bien incapable de vous aiguiller dans la modification du code. Pour ma part, j'ai juste observé la structure, l'ai adaptée à mes besoins à l'aide de copiers et de collers, et ç'a fonctionné comme sur des roulettes.
Il vous faudra peut-être ensuite modifier la taille de votre blog, si le nombre de catégories est important, à fin de les faire toutes tenir sur une seule ligne.

*

8) Recent Post with Thumbnails Widget

On trouve un sacré nombre de widgets listant les billets récents, mais rien comme celui-ci — le top.
Pour ne rien gâcher, il s'installe en un clic. Suivez le lien chez Blogger Plugins.


*

Ouf !
*

Any question ?


Aucun commentaire: