Printfriendly


How To - Make a Post Divider

Depending on how you customise your blog homepage it can be to your advantage to create a divider to place between your posts. This will make it easier on the reader's eye to distinguish between posts and can add to the overall design of your blog.

So let's get started.

A post divider is generally a thin, horizontal graphic/image that is used to separate the end of one post and the beginning of another. Firstly you will need an image to use as your post divider or create one yourself. If you're choosing to use a pre-made image you can search Google/Google Images for 'post dividers', 'post divider for blog' or something similar. If you decide to make one yourself you can do so on any photo-editing program or website such as; Picmonkey, Gimp, Photoshop, etc. However whichever you opt for there is something to keep in mind:

  • The pixel (px) width of your post section. For example, the pixel width of my post section on Allure by Maddison is 730px. Therefore I wouldn't use/make a post divider wider than 730px, however I could still use one smaller as the divider is centered.
  • If you are unsure of the px width of your post section you can find out by doing the following: (If you know the px width skip this section.)

1. Go to your blog and click Template on the left side and click the Edit HTML button. Don't worry we're not adding any codes just looking for the post section px width. 

2. Hold the Ctrl and buttons simultaneously to open the Search box. In the Search box type main-wrapper and press Enter. This will locate the main-wrapper text found in your html code and highlight it as shown below.

3. If you look at the picture above and scroll your eyes to line 404 and 405 you will notice the text #main {width:750px; margin: 10px 0px; which describes the px width. All I have to do is subtract the margins from the width, thus: 750 - 10 - 10 = 730. I take 10 away twice as there is a margin on each side. 

If you have any trouble finding the px width of your blog I'm more than happy to help.

Okay, now we're up to speed and I gather we have all found/made an image to use as our post dividers. You will now need to upload the image to a photo-sharing website - for this tutorial I have gone with Photobucket (simple and free).

Now go to your blog and click Layout on the left side of your screen. Now click the Add a Gadget module and choose the HTML/Javascript option. This will open a Configure HTML/Javascript window. The 'Content' section is where you will be pasting your code.

Now it is time to add your HTML code. There's only one and it is so simple :) Copy the code below and paste it into the 'Content' section as mentioned before.


<style type="text/css">.post {background: url(DIRECT URL OF IMAGE) no-repeat; background-position: bottom center; margin:1.5em 0 1.5em; border-bottom: none; padding-bottom: 3.5em;}</style>


DIRECT URL OF IMAGE When you uploaded your post divider image to Photobucket click on the individual image and you will be taken to a page that looks like this. Where it says Direct - click on that code and paste it where I have written DIRECT URL OF IMAGE.














When you are finished click Save.

You can now move the HTML/JAVASCRIPT module anywhere in your blog layout as it won't affect its positioning. Click the Preview button to preview your post divider on your blog. 

As you can see I made a post divider with a bee and uploaded it to my blog as an example. I created the image quickly on Picmonkey with dimensions of 720px wide by 40px tall. I would suggest keeping the height no more than 40px - 45px, but it really is up to you.



























If you have any questions please don't hesitate to ask.

Happy blogging!
xox


0 comments:

Post a Comment

I love talking to you all and reading your comments. Don't forget you can tweet me (@MaddiSkotinis) if you have a particular question, I'll be able to reply much quicker. Thankyou so much for visiting, I hope you find the help you need to design your blog! xox

I reply to every comment directly to your email address. If by chance you have a no-reply email don't stress I'll also reply to your comment with a comment on this post, so if that's the case don't forget to check back.

 

Twitter

Connect

Follow on Bloglovin

visit allure by maddison