Make or find a small image about 10x10px. Bullets work great for this purpose. Open the Dashboard | Template | Edit HTML.
Locate the CSS style sheet:
Classic Blogger: between the <head> and </head> tags
Blogger Beta: between <b:skin><![CDATA[/* and ]]></b:skin>
Find:
.comment-link {And add two lines to make it look like this:
margin-left:.6em;
}
.comment-link {Make sure to save your template. Now all your posts will have your very own little pretty image!!
margin-left:.6em;
background:url("URL TO YOUR IMAGE") no-repeat 0 .20em;
padding-left:13px;
}
EDIT: Thanks to the work of 16 Them All here is the additional code to make the image show on your Permalink page!!!
Same as before, locate the CSS style sheet:
Classic Blogger: between the <head> and </head> tags
Blogger Beta: between <b:skin><![CDATA[/* and ]]></b:skin>
Find this code (yours may look slightly different due to a different style):
#comments h4 {and add two lines to it to make it look like this:
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments h4 {Now the image is on your main page and permalink page!
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
background:url("URL TO YOUR IMAGE") no-repeat 0.05em;
padding-left: 18px;
}
No comments:
Post a Comment