[caption id="attachment_322" align="aligncenter" width="558" caption="Before"][/caption]
[caption id="attachment_325" align="aligncenter" width="556" caption="After"][/caption]
It has been a little while since I have done a Blogger tutorial so today I'm showing you how to add an image to your Blogger post title. It is actually pretty simple when you know how. So let's get started.
First of all you need to make sure your image is the correct size. I'd advise an image size of 40x40 px. When that's done you'll need to upload it to Photobucket and grab the direct link.
Next log into Blogger and navigate to Dashboard>Template>Edit HTML>Proceed>Expand Widget Template.
Now find the following (highlighted) lines and delete them.
Paste the following code where we just deleted the above code from:
<
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
=
'yoururl'
/></
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
>
Hit Save.
That's all there is to it you now have a post title that really stands out from the crowd.
As always leave a comment if you have any questions.
Thanks, Faye!! I'm definitely going to try this!! And I'm going to tweet the post!!
ReplyDelete[...] even add an icon to the start of the titles. These two tutorials will demonstrate how to do this.Add Image to Post Title in BloggerAdd Background Colour to Titles//LinkWithinCodeStart var linkwithin_site_id = 1125499; var [...]
ReplyDelete