Saturday, 9 November 2013

DIY Blog Design: How to install a post divider image.



When scrolling through your blog, do you ever find that you have trouble telling where one post ends and another post begins?  Do you find that your blog looks a bit too cramped and could do with being spaced out more?  Perhaps you've seen another blog that has a cool separator graphic in between their blog posts and now you want one too?  Well, you've come to the right place!

Today I am going to show you step-by-step how to install a post divider graphic underneath your blog posts. :)


Create a horizontal image that is roughly the same width as your blog posts.  This can be as simple as a straight line or a line of coloured dots.  Save this image as a .jpeg or .png if possible.


Upload this image to photobucket (or some other image hosting site) and grab the direct image URL. Paste this image URL into a word document as you will need it again in a minute.


In Blogger, go to your 'Template' page and click on the button that says 'Edit HTML'.  Place your cursor anywhere in the code and then use the 'CTRL + F' command on your keyboard to bring up the search option. Search for: <div class='post-footer-line post-footer-line-3'>


Directly after/underneath the code you just found, add the following code: <center><img src='PLACE YOUR IMAGE URL HERE'/></center> then replace the text I have highlighted in pink with your direct photobucket image URL.


Click the 'Preview template' button and if you like what you see then click 'Save template'.  All done!

♥ ♥ ♥ ♥ ♥ ♥

I personally chose not to install a post divider graphic on my blog as I wanted to have a graphic behind my post title instead and felt that having both would look a little over the top.  Having both can sometimes be a good thing though, particularly if you choose to have advertisements shown in between your blog posts (see example below).

Grey watercolour post divider graphic + Pink post title background graphic that I installed on Kayleigh's blog.








If you're interested in learning how to add a background graphic to your post titles, let me know in the comments below and I will get started on another tutorial.  If you have any other suggestions for my DIY Blog Design series, please let me know in the comments section as well and I will do my best to help you guys out. :)

Happy Blogging!

4 comments:

  1. Thanks so much for sharing! This is awesome and just what I need to revamp my old little blog :-)

    ReplyDelete
  2. You're very welcome! If you have any more requests be sure to let me know. :)

    xx

    ReplyDelete
  3. I just came across this and I would LOVE to know how to add a graphic behind a title post!

    ReplyDelete
    Replies
    1. I will be sure to let you know when I get around to posting that! Thanks for stopping by and leaving a comment. :)

      xx

      Delete

Thanks for taking the time to stop by and comment! I really appreciate it. :)