Comment ajouter une image ou un smiley avant le titre de votre message

http://tricks-for-new-bloggers.blogspot.fr/2007/08/image-beside-blog-post-title.html

Par défaut, le titre d'un message dans Blogger est  en texte brut. Dans ce Tutoriel, l'auteur va nous montrer comment ajouter une image avant notre titre.

Avant / Après

So let's begin...


1: La première chose à faire est de préparer votre image. Elle doit être d'une taille adaptée à votre titre. Après ça, vous aurez besoin de l'URL de cette image. Vous pouvez créer un nouveau message (sans l'envoyer), y inclure une image par la méthode habituelle. Puis clic droit sur l'image et "copier l'adresse de l'image". Vous pouvez maintenant fermer l'éditeur de messages.



2: Ensuite. allez dans Tableau de bord > Modèle > Modifier le HTML
Avec le nouvel éditeur: faites Ctrl+a (sélectionner), Ctrl+c (copier) et Ctrl+v pour recopier tout dans la fenêtre HTML. Ainsi, votre code sera entièrement développé. Vous pouvez aussi en profiter pour faire une sauvegarde en collant aussi ce code dans le Bloc-Note. On ne sait jamais, ça peut servir en cas de "pépin".

3: Recherchez ce code et supprimez-le

<b:includable id='post' var='post'>
<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>



4: Coller le code suivant à la place du code supprimé précédemment (soyez prudent!)

<b:includable id='post' var='post'>
<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<table><tr>
<td class='ssybyposttitle'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPPt7TSRgPkrBGafqhZ62u5g-ddPAEBl-zUqzqWRr6gYK9gaHpsX2dtW49yQQBxdDDzuukQWK3zr5nj3f9eKoCQROvMTOKeWDzt_AXYt9hD0PfZCh2AvOIzbWEftwCfD8AlADV7Sm12J9j/s1600/icon.png'/></td>
<td><h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</td>
</tr></table>
<style>
h3.post-title {
margin: 0px !important;
}
</style>
</b:if>

5: Maintenant, remplacez le code de l'image en rouge par celui de votre image
6. Enregistrez

Trouvé, traduit et adapté de http://tricks-for-new-bloggers.blogspot.fr/

Toutefois, le fait d'être obligé d'entrer dans l'éditeur de HTML à chaque fois que l'on veut changer d'image rend cette opération plutôt fastidieuse et d'un intérêt limité. Je conseille plutôt d'utiliser un div flottant de type "layer" (couche) inséré dans le modèle de message comme ci-dessous ma signature (et en haut de message). Cela permettra ainsi d'y accéder plus facilement et rapidement, surtout si vous balisez le code avec un commentaire de ce genre <!--IMAGEdeTITRE--> (ou autre). Les commentaires permettent de s'y retrouver dans un code long. Ce type de commentaire peut être tout aussi bien entré dans votre "Template" (modèle du blog).
Pour info, le code de ma signature:

<!--debut SIGNATURE-->
<div style="height: 0px; left: -240px; margin: auto; position: relative; top: -20px; visibility: visible; width: 0px; z-index: 1;">
<a href="http://blogtricker.blogspot.com/" target="_self"><img alt="signature" src="https://dl.dropboxusercontent.com/u/19586410/Blogs/signature.png" style="float: right; height: 29px; width: 106px;" title="webmaster" /></a></div>
<!--fin SIGNATURE-->

Toujours pour info, voici mon code pour la signature en haut:

<!--SIGNATURE-->
<div style="height: 0px; left: -100px; margin: auto; position: relative; top: -160px; visibility: visible; width: 0px; z-index: 1;">
<a href="http://blogtricker.blogspot.com/" target="_self"><img alt="" src="https://dl.dropboxusercontent.com/u/19586410/Blogs/signature.png" style="float: right; height: 29px; width: 106px;" title="webmaster" /></a></div>
<!--SIGNATURE-->

Voir aussi : http://websilog.blogspot.com/2011/06/add-image-beside-blogger-post-title.html