After creating or downloading a free image first upload it to a freehost like Photobucket.com or Googlepages and copy down the link of the image.
The next step is to define a class in the CSS part of your template to house your image. For this login at Blogger.com and click on Layout link on Dashboard. Then click on Edit Html subtab of Template tab. Scroll down and paste the code below just above the ]]></b:skin> tag in the Template code box.
.separator {
background-image: url(LINK OF YOUR IMAGE);
background-repeat: no-repeat;
background-position: center center;
height: 20px;
padding: 4px;
}
Replace the CAPS with the link of your image at Photobucket.
Now we have to place the code in the <body> of the template. To do this login at Blogger.com and click on Layout link on Dashboard. Then click on Edit Html subtab of Template tab. Put a check in Expand widgets template check box at the top of the Template code box and scroll down to this code in the blog posts widget :
<p class='post-footer-line post-footer-line-3'/>
Paste the code below immediately after the above line :
<div class="separator"></div>
Save Template. Clear Cache and view Blog. See the ~~~~~~~~ after my signature graphic at the end of this post.
0 comments:
Post a Comment