mercredi 1 octobre 2014


BLOGGER: TITRE d'ARTICLE AVEC UNE IMAGE... (2)

Ici, on utilise tout simplement l'éditeur WYSIWYG de Blogger...
Il suffit de récupérer ensuite le code HTML obtenu et de le mettre tout simplement, tel-quel dans la barre de titre


Le code HTML obtenu, le voici:

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIatORCFlw0J66Ug8JwguaO1XjWWLOtekuNwmmMU1C5rpwLn4-fySKNG2iObscbooNsI_kNzPoA1v5qOamgcjUMUINHm6hRbF8lXLw5BSUiedQElCL-O98hn30sq1UNMuECwv2X3PlAwa0/s1600/st_martin_2.jpg" imageanchor="1" style="vertical-align: middle; clear: left; float: left; margin-bottom: 0em; margin-right: 1em;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIatORCFlw0J66Ug8JwguaO1XjWWLOtekuNwmmMU1C5rpwLn4-fySKNG2iObscbooNsI_kNzPoA1v5qOamgcjUMUINHm6hRbF8lXLw5BSUiedQElCL-O98hn30sq1UNMuECwv2X3PlAwa0/s1600/st_martin_2.jpg" height="149" width="200" /></a></div><span style="font-size: 16px;">BLOGGER: TITRE d'ARTICLE AVEC UNE IMAGE... (2)</span><br /><span style="line-height:18px; font-size: 16px;"><br />Ici, on utilise tout simplement l'éditeur WYSIWYG de Blogger...</span><span style="line-height:18px; font-size: 16px;">Il suffit de récupérer ensuite le code HTML obtenu et de le mettre tout simplement, tel-quel dans la barre de titre</span>

N'oubliez pas de supprimer tous les espaces entre les différentes balises, sinon, cela risque de ne pas marcher. Le mieux est d'utiliser un éditeur de texte brut genre Note-Pad (Bloc-Note). Attention! n'enlevez pas les espaces à l'intérieur des balises!

Personnellement, j'ai mis margin-bottom: 0em; pour ne pas avoir de problèmes de mise en page. Là aussi, j'ai modifié les dimensions des caractères avec font-size: 16px;

Ici, il n'y a plus de tableau <TABLE> comme dans le précédent article. La mise en plage est classique comme dans un article standard de Blogger avec des <DIV>. Mais ce code HTML va prendre place dans la barre de titre, ce qui va nous donner un titre d'aspect original.

Il est très possible que cela fonctionne avec une vidéo dans un <OBJECT> (Flash), mais je n'ai pas encore testé. Par contre, dans un de mes articles précédent, j'ai utilisé un smiley animé (Gif animé) et là ça a fonctionné sans problème.

Note: j'ai essayé d'alligner verticalement mon image avec vertical-align: middle; mais sans y parvenir. Je continue à chercher.

Un inconvénient de cette méthode c'est que lien du titre n'existe plus (c'est normal..) alors qu'avec la précédente méthode, ça fonctionnait très bien (voir message précédent)

Pour optimiser le code de votre titre: html-cleaner

Aucun commentaire:

Enregistrer un commentaire