BLogger Tricks Tips and nice turorials to use Blogger Effectively,Download Templates,widgets,Plugins.Change your blogger footer,header,navi.

Friday, February 6, 2009

Put image to separate posts

Do You Know How to Put an Image as Posts Separator.


On many blogs you can see an image separating the posts. To implement this in your blog


Step-1:
First you will have to create an image in an image editor or do a Google search for "free border backgrounds".


Step-2:
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.

Step-3:
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 and open in a new window!
Thats it friend,You havve now added image to the blog post succesfully!





Enjoy!

0 comments:

Post a Comment

Post your comment,to hav more traffic to the site.

ShareThis

© 2011 Blogger Tricks and Tips, AllRightsReserved.

Designed by ScreenWritersArena