Dans mon nouveau mini-blog météo
nbbc-met.blogspot.fr, je me suis amusé à créer un titre
en-dehors, en haut et à gauche du corps principal du blog. Au début, c'était juste pour le "fun", pour voir ce qui allait se passer. Une expérience en quelque sorte. Et puis, j'ai trouvé cela intéressant voire même original puisque rare comme disposition... J'ai donc créé une nouvelle image-texte plus adaptée (avec PhotoFiltre), rajouté un lien "home" sur cette image (c'est à dire pointant vers mon blog avec comme cible:
_self ) comme tout titre qui se respecte. Si vous voulez tenter l'expérience, c'est par ici:
D'abord, il va falloir supprimer votre titre standard de Blogger. S'il s'agit pour vous d'une simple expérience non définitive, vous pouvez le garder, au moins provisoirement.
- Ouvrez la page "modèle" dans les paramètres. Profitez-en pour faire une sauvegarde!
- Cliquez sur "Modifier le code HTML". Le nouvel éditeur s'ouvre.
- Facultatif pour cette fois: dans l’éditeur*: faites Ctrl-A, Ctrl+C et Ctrl+V (pour sélectionner tout, copier et (re)coller). Ainsi votre code sera entièrement développé. Notez que chez moi -mais je ne dois pas être le seul...- la recherche (Ctrl+F) ne fonctionne plus très bien avec ce nouvel éditeur. Je fais donc ceci: Ctrl+A pour sélectionner, Ctrl+C pour copier et je colle le tout dans un bloc-note (Mousepad ou Geany pour moi sous Linux Debian) comportant un outil de recherche (Ctrl+F et F3). Je ne pense pas que le bloc-note ancestral de Windows en ait un. Je fais mes recherches dans le bloc-note (ou éditeur de texte) ce qui me permet de repérer les numéros des lignes qui m'intéressent. Je retourne alors dans l’éditeur HTML de Blogger. Perso, je recommande de ne pas faire de modifs' directement dans le bloc-note. En effet, en cas de "catastrophe", il constituera une excellente sauvegarde (s'il est intact).
- Recherchez header1 en utilisant "accéder au widget". <b:widget id='Header1' locked='false' title etc... Changez "false" (faux) par "true" (vrai). Enregistrez. Maintenant, vous allez pouvoir supprimer votre widget titre (ou header, c'est à dire en-tête)
- Allez dans "Mise en page".
- Dans "Titre" ou "en-tête" (en haut), cliquez sur "Modifier"
- En bas de la fenêtre pop-up qui vient de s'ouvrir, cliquez sur "supprimer"
- Cliquez sur "enregistrer la disposition"
- Affichez votre blog pour constater que votre titre a bien disparu
*Un autre bug que j'ai constaté dans le nouvel éditeur: parfois, à l'ouverture, le code de votre blog ne s'affiche pas! Aaargh!
Pas de panique! Il suffit en général de taper sur la touche F5 de votre clavier pour rafraîchir la page et le code s'affiche enfin. Ouf!
Un titre placé hors du corps de messages (comme dans mon mini-blog
nbbc-met.blogspot.fr).
- Rechercher </head> puis juste en dessous, du code commençant par <body comme par exemple ceci: <body expr:class='"loading" + data:blog.mobileClass'>
- Juste en-dessous, insérez directement ce code:
<table align='center' border='0' cellpadding='0' cellspacing='0' style='width: 640px; height: 26px;'>
<tbody><tr><td style='text-align: left; vertical-align: middle;'> <a href='http://nbbc-met.blogspot.fr/' target='_self'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTjHEJby4tnS43FS0Oi_o2_0HGn-4PYEymPrrLWr3KCg34rgyZ9njl7k8sw7cwb_hCVTA5ea9ZuMGHLTjMkh0tnwoDXPWSlUQ7Mxn9cgUN3dDMlPmmj2M-enC6HAb6gl1pp7zZJf66SdVy/s1600/title.png' style='width: 180px; height: 24px;' title='HOME - ACCUEIL - Rafraîchir - Refresh'/></a>
</td></tr>/tbody></table>
Si vous savez lire à peu près le code HTML, vous remarquerez que l'image, son lien et le "titre" du lien (ce qui s'affiche dans une bulle quand on survole le lien) sont placés dans une cellule de tableau. Ce tableau est de la même largeur que le blog (640px) et il est centré. Ainsi le titre-image n'ira pas se balader aux confins de votre écran s'il est aligné à gauche. Si par contre vous voulez la centrer, le tableau ne sera peut-être pas nécessaire. Le tableau a évidemment une border=0 (pas de bordure). On peut régler sa hauteur pour avoir plus ou moins d'interligne. Important:
vertical-align: middle; permet d'aligner l'image verticalement dans la cellule.
Cette image a été conçue avec Photofiltre. Elle comporte une légère ombre qui lui donne un certain relief. L'arrière-plan de l'image est transparent (format PNG) mais ce n'est pas obligatoire. A vous de voir.
Notez qu'il serait aussi tout-à-fait possible de créer ce titre plus classiquement dans un widget placé en haut de votre blog, mais dans ce cas, il ne sera plus en-dehors du cadre habituel donc moins original (à mon humble avis...). Cette manière de procéder permet de créer des titres-bannières originaux comme sur mon blog
NBBC.fr ou là, il s'agit d'un diaporama avec transitions et titre superposé.
Si vous descendez tout en bas de mon mini blog
nbbc-met.blogspot.fr vous pourrez voir que j'ai encore sévi avec
Nettle Bay Beach Club - 97150 St Martin Island, French Antilles placé tout en bas et là aussi hors du corps du blog, c'est-à-dire juste avant </body>. Là aussi, ce texte et son lien sont placés dans un tableau de 640px. Le texte est aligné à droite. Pas d'image cette fois.
On remarquera l'heure de parution du post qui a été renvoyée en haut sous la date. J'aurais aimé les mettre sur la même ligne avec une même police. Mais pour l'instant, je n'ai pas trouvé de solution. Je vais mettre aussi un peu d'espace entre cette date et le haut du corps.
Note: j'ai changé la disposition de mon titre depuis que j'ai écrit ce message. À voir ici:
Titre vertical flottant. Cela peut vous intéresser...
"
Pour mon blog 
Génial!