How To Add A Cool Image Divider Between Your Blog Posts




| 19 comments

Blogger Tutorial Video PostVideo Post - For Extra Help See The Video Tutorial Below The Post.

There are a number of reasons why you may want to place a divider between your blog posts.From the tidy professional look it adds to having a handy clickable image link as your divider or maby your blog looks very cramped or overlapping and you want to space it out a bit.If you don't want to add an image i will also show how to add a simple colored horizontal line as your divider.

Were can you place it ?


You can have your divider directly below the post and before the labels, posted by and comment information or you can place the divider anywhere below your post including below the comment area as the very bottom or before your posts.

Your divider can also be a hyperlink (a clickable link) that when clicked leads to for example you blogs rss feed.

I will show you how to make your divider a hyperlink or just have a decorative divide thats not 'clickable'.


So lets get it done :

First Here are some examples you could use :

Photobucket
Image URL:


Photobucket
Image URL:


Photobucket
Image URL:


Photobucket
Image URL:


You can use any of these images or find your own image on image hosting websites like Photobucket.

Adding the divider to your blog.


1.Click 'Layout'-->'Edit Html' for your blog
(Tick 'expand widget templates' box)

Blogger layout

edit html blogger

Expand widget templates blogger

2.Here you have two options

- To put your divider below the post content find this code :

(Basically after the last word of the posts)
Note:If this code is in your template twice place your divider after the second.
<data:post.body/>

If you cant find that just look for data:post.body without the enclose < > tags.

- To put the divider below the complete post find this code:

(Below the labels ,post time,auther..)
<div class='post-footer-line post-footer-line-3'/>

(Press ctrl f for a search bar to search for the code)

3.Add the following piece of code Directly Below the code you found from above.

<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a><br/><center><a href='PLACE YOUR TARGET URL HERE'><img border="0" src='PLACE YOUR IMAGE URL HERE'/></a></center>

You now must make two change to the code:

1.Were the code above has PLACE YOUR TARGET URL HERE add the address you want the image to lead to when clicked

Example : http://www.spiceupyourblog.com

2.Were the code above has PLACE YOUR IMAGE URL HERE add the link to the image you wish to use such as the image URLs above

Example :http://i941.photobucket.com/albums/ad259/spiceupyourblog/divider.jpg

If you dont want the image to be a clickable link just use this code:

<center><img border="0" src='PLACE YOUR IMAGE URL HERE'/></center>

As above : Were the code above has PLACE YOUR IMAGE URL HERE add the link to your image.

To use a simple horizontal line as your divider use this instead of the image code:
<br/><hr color='red'/><br/>

It will look like this:


You can change the color 'red' to suit your blogs appearance.

Image Divider - Video Tutorial


More Video Tutorials | Spice Up Your Blog On YouTube

Once code you choose is added click save and your done !!

Drop Your Comments And Questions Below.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

19 comments:

  1. I could not find the 'data post body' thing
    in my html code. do you know why? I am trying to put a decorative divider line w/o a link between the posts on my blog.

    ReplyDelete
  2. Hi Ester,

    Ok we better fix that first :

    Did you tick the 'Expand Widget Templates' box just above your blogs html code area?

    Try again to make sure.

    Paul.

    ReplyDelete
  3. This was very helpful, and I was able to put my post divider up. However, there is a border around it that I don't want there. How can I remove the box around the image?

    ReplyDelete
  4. Hi Chel glad you liked it,

    To remove the border Change the image code to include border="0"

    Like this :

    img border="0" src="PLACE-YOUR-IMAGE-URL-HERE"

    That should do the trick.

    I have also changed it in the tutorial, dont think anyone would want the border.

    Paul.

    ReplyDelete
  5. It took me a while because the html code of the divider I chose wasn't 'paste-ready'. I had to figure out what part of it I actually needed, which was a bit of a challenge for me. However, mission accomplished, and it looks great! So, thank you very much.

    Now I'm off to figure out how to add a bit more spacing between my posts.

    ReplyDelete
  6. I even figured out the spacing. Now my blog looks even better! Thanks again!

    ReplyDelete
  7. Thanks Kathy,

    I checked out your blog 'The stochastic scientist' good choice it looks great !

    Paul.

    ReplyDelete
  8. I too cannot find the data post code using apple+f and yes, my expand widget is checked.

    ReplyDelete
  9. Look for data:post.body without the < > tags michael you should be able to find it.

    If its in your template twice put the code after the second one.

    Paul.

    ReplyDelete
  10. Thank you ... it worked perfectly. The only pain in the neck part was that ctrl + f didn't work and I had to search it out on my own - but I found it and did it! Thanks!

    ReplyDelete
  11. Thanks Jenny,

    Well done how did you manage to find the code ?

    It's right in the middle as well hidden away :D

    Glad you were able to add your divider thanks for the comment.

    Paul.

    ReplyDelete
  12. Hello,

    I found the place that I need to add the divider. When I look at it in the preview mode, it looks GREAT! However, once I hit the save button and go to view the blog again, it's not there and the code as disappeared even though it said that it was saved. What am I missing? Please help!

    ReplyDelete
  13. Hi J,

    That sounds wacky ,i dont see why that would happen. Have you tried just saving without looking at the preview ? just make sure to back up your template first.

    Paul.

    ReplyDelete
  14. Still have a white box around the divider. Read post from 12/27/09 and everything in the HTML looks good. any other thoughts?
    http://pennysscrappaperscissors.blogspot.com

    ReplyDelete
  15. Oh my gosh so helpful! Thank you =D

    ReplyDelete
  16. It's working! Thanks, blog looks better with tiny line break:)

    ReplyDelete
  17. thank you so much, this tutorial really help me out~ >.<

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us