How to Add an Icon/Image to Blog Posts Titles

Would you like to add a small graphic or icon to your post titles? Some members of Google Groups asked for this feature and here it is......

1. CREATE A GRAPHIC

First step is to create a graphic either in an image editor or in an online image generator such as cooltext.com. Save it to your hard disk and upload it to a freehost. Then copy down its link/URL.

2. CREATING THE IMAGE CODE

The image code is :

<img src="LINK OF YOUR IMAGE" style="border-width:0px" />

Replace the CAPS with the link of your image obtained in step 1.

3. MODIFYING THE TEMPLATE

Login to the Dashboard and click on Layout for the blog you wish to modify. Then click the Edit Html subtab of Template tab. First backup the template. Put a check in Expand Widgets Template box at the top of the template text box.


Scroll down till you come to the Blog Posts widget code. Locate this code :

<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'>

Paste the code you created in Step2 immediately after the last line in the above code. Preview and Save Template. See picture below of the icon next to my post title

If you want it to appear after the title paste the image code after this subsequent line of code :

<data:post.title/>

Preview and save Template.
By Admin n E.K