Friday, February 4, 2011

Create a different background in each post

Do you know that you can create a different background in each post? How to setting up a blog with a different background in each post? Here they are. I only choose this post using a different background, to make it as an example.
By following below steps you can do it easily.


1. Change setting on the Posting Formatting


  • On the blogger dashboard, go to page element, click on Setting
  • Go to Formatting (sub tab of Setting)
  • Go to line item Post Template and will find a text box (default is empty)
  • Paste below code 
<div style="background:url(IMAGE_LINK_URL) no-repeat;">
</div>
  • Once done ==> save
  • IMAGE_LINK_URL mean is the source of the image
  • Be remember that the image must stored in web hosting. Use free one such as Google Docs or Photobucket 
  • In this post I did used SHARE ICON which already availiable in istockphoto.
2. Do posting

  • Write your post as usual
  • Do not forget to change the IMAGE_LINK_URL above to your image URL by do editing in Edit HTML (tab beside Compose in posting page)
  • Do not remove the bracket before and after IMAGE_LINK_URL
  • Example; "background:url(http://www.xxxxxx/xxxx/xxxx) no-repeat;"
  • If you want to repeat the background image more than 1 time, change the

<div style="background:url(IMAGE_LINK_URL) no-repeat;">
         to

<div style="background:url(IMAGE_LINK_URL) repeat-y;">

  • Click preview to see yours blogs posts


Now the background image is appear but it not center in location. To make it center, add below (in blue).

<div style="background:url(IMAGE_LINK_URL) center repeat-y;">

Cheer friends .. hope this blog tips will help you how to make blog.

No comments:

Related Posts Plugin for WordPress, Blogger...