.
Powered by Blogger.
Wednesday, September 7, 2011

How To Add Post Divider Graphics to your Blog

Once you've got your image, you'll need to find a place to host it online like Photo-Bucket or Picasa. Or, you can always just upload it directly to your blog - (start a new post, upload your picture, click on preview, right click on the image, and click "Copy Image Location") Make sure to save that url to a notepad doc while you are working so you don't have to get it again.


Now to actually adding the graphic to your blog.
  • Go to Layout on your Dashboard and click on Edit HTML (Make sure to click expand widget templates).
  • Find the following code: .art-Post or .post (it has to be done in .art-Post for my blog although some people can do it in the .post section)
  • You should see something like this if you have found the right place
    .post{
    position:relative;
    z-index:0;
    margin:0 auto;
    min-width:1px;
    min-height:1px;
    }
  • Now, copy and paste the following code directly into that section. (It should follow the same format, with each style element stacked one above the other with a semicolon after each, and make sure that it is all within the brackets } without any extra spaces.)background:url(THE URL OF YOUR IMAGE);
    background-repeat:no-repeat;
    background-position:bottom center;
    margin:.5em 0 1.5em;
    padding-bottom:1.5em;
  • Change "The URL of Your Image" to the actual url you just copied.
  • You can change the sizing elements depending upon how big your image is and how much space you would like before and after it. those elements are in purple above.
That's it! You are all done, and now you have a great post divider. To change it, all you need to do is change the url to a new image url, and adjust the size again as needed.

0 comments:

About Me