jeudi 2 octobre 2014

TITRE AVEC UNE IMAGE D'ARRIÈRE-PLAN...
... et des angles arrondis

Il y a quelques jours, j'ai découvert que l'on pouvait taper un titre d'article sur deux ou plusieurs lignes tout simplement en séparant les 2 textes par <br />. Ça m'a donné des idées et je me suis dit, "pourquoi pas ?" J'ai donc testé plusieurs code HTML avec un certain succès (cependant les iframe et les scripts sont refusés par Blogger).

Cette fois, un tableau à angles arrondis doté d'une image d'arrière-plan sert de support au titre de mon article...

Je rappelle que le code html obtenu est à placer dans la barre de titre, tel-quel. Voir ci-dessous une capture de la barre de titre en mode "édition" (cliquer sur l'image pour l'agrandir).




Il faut préparer votre image avec votre logiciel de retouche d'image (ici, c'est PhotoFiltre), la retailler, etc... Mon image fait 670x129 px. Ensuite, il faut l'envoyer sur Blogger en l'insérant dans un nouveau message quelconque (intérêt d'avoir un blog de test), sur Dropbox, Picasa ou autre.. Puis récupérer son URL.

  • Mon tableau a une seule cellule. Il mesure aussi 670x129 px, comme l'image.
  • La "border" classique est à zéro.
  • Il faut préciser border-radius: 8px; dans le style du tableau (pour les angles arrondis)
  • Les "&nbsp; &nbsp; &nbsp;" sont des espaces en HTML pour mieux placer le titre (Texte)
  • text-shadow: #ffffff 1px 1px 1px,  permet de créer un pseudo-contour blanc autour des caractères pour qu'ils soient plus visibles sur un fond de couleur variable. En fait, c'est une ombre répétée sur tous les côtés.
  • background-position:50% 50%; background-repeat:no-repeat; ne sont pas nécessaires puisque l'image fait la même taille que le tableau


Après coup, j'ai modifié et amélioré certaines choses...

  1. J'ai supprimé les "&nbsp; &nbsp; &nbsp;"
  2. j'ai changé mes balises <SPAN> pour <P>
  3. Dans le style de la balise <P>, j'ai rajouté margin-left: 120px; ce qui facilite le positionnement du texte dans le titre.
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7n4saVpnWomed0Wep3fkd6HEqaonrLGWzeBOvf0qWtrGsfN4s5MSj1g53P6N2AXlBBZimNVGs-kvibHlekqiQCcV8er-zks3PYHz5qrU-fhl8-DvqNhrJr7STkeaSaZaZAxY3jgnkB-49/s1600/titre-dans-image.jpg" border="0" cellpadding="0" cellspacing="0" style="border-radius: 8px; background-position:50% 50%; background-repeat:no-repeat; height:129px; width:670px"><tbody><tr><td style="text-align:center"><strong><p style="font-size:20px; text-shadow: #ffffff 1px 1px 1px, #ffffff -1px 1px 1px, #ffffff -1px -1px 1px, #ffffff 1px -1px 1px; margin-left: 120px;"> TITRE AVEC UNE IMAGE D'ARRIÈRE-PLAN...<br /> ... et des angles arrondis</p></strong></td></tr></tbody></table>

Il est probable qu'il est possible de paramétrer tout ça une bonne fois pour toutes en CSS, mais c'est un peu trop fort pour moi, du moins pour l'instant.

Comment s'en servir alors ?

Perso, ce genre de code est dans un fichier texte enregistré et à portée de main. Je n'ai plus qu'à faire un copier-coller et remplacer le texte du titre... Autre solution, intégrer ce code dans votre modèle de message entre des balises de commentaire. Vous l'aurez toujours sous la main et si vous oubliez de l'effacer avant de publier votre article, les balises de commentaire le rendront invisible...

Voici une balise de commentaire: <!-- commentaire -->

Exemple :

<!-- 
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7n4saVpnWomed0Wep3fkd6HEqaonrLGWzeBOvf0qWtrGsfN4s5MSj1g53P6N2AXlBBZimNVGs-kvibHlekqiQCcV8er-zks3PYHz5qrU-fhl8-DvqNhrJr7STkeaSaZaZAxY3jgnkB-49/s1600/titre-dans-image.jpg" border="0" cellpadding="0" cellspacing="0" style="border-radius: 8px; background-position:50% 50%; background-repeat:no-repeat; height:129px; width:670px"><tbody><tr><td style="text-align:center"><strong><p style="font-size:20px; text-shadow: #ffffff 1px 1px 1px, #ffffff -1px 1px 1px, #ffffff -1px -1px 1px, #ffffff 1px -1px 1px; margin-left: 120px;"> TITRE AVEC UNE IMAGE D'ARRIÈRE-PLAN...<br /> ... et des angles arrondis</p></strong></td></tr></tbody></table>
-->

Bien entendu, de nombreuses autres possibilités et paramètres sont disponibles, il suffit de consulter les messages précédents.

Aucun commentaire:

Enregistrer un commentaire