Thursday, 5 November 2009

POST DIVIDERS - HOW TO INSTALL ONE or MAKE YOUR OWN

Are you bored with those little dotted lines separating your posts? Then you need a nice post divider!  You do need to do a little bit of work to install these, but it isn't hard.


First, go to Layout > Edit HTML and then press CTRL + F on your keyboard. This will bring up a toolbar, just above your bottom toolbar, with a box showing x Find: at the bottom left-hand side.
















Next, copy this code and paste it into the Find box:

.post {

This will immediately highlight the section you need.

Look for this code:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

You need to replace ALL of this code with this other code:

.post {
background: url(http://YourImageCode);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:5.5em;
}
















The bit inbetween the brackets is the url for the image code of the post divider. So your code should look something like the example (no spaces between the brackets).


Before you Save Template, just Preview first, then if you don't like it, just Clear Edits.

ADJUSTING READYMADE POST DIVIDERS & MAKING YOUR OWN POST DIVIDERS

If you want to make your own divider, just load the image up to Photobucket, Picasa, Flickr etc, as you will need the image code. Substitute it for mine, and away you go!

You'll need to create your divider in a graphics programme and save it with a transparent background. Merge layers if you have lots of layers (don't flatten) and save as a .png to preserve the transparency. Flattening the layers or saving as a jpg means a white background - which may not be the look you are after. If the transparency isn't a factor, go ahead and save as a jpg.

Save at a low resolution: 72dpi - 96dpi is fine for the web. Any higher, and your blog will be slower to load.

Sizes: I advise you work in pixels, even if you aren't used to it, as Blogger html works in pixels. The width depends on the width of your blog. Make your divider the same size or a tiny bit narrower. Height? Not too big... maybe 30px - 50px maximum height unless you want a real biggie!


In both 2-column and 3-column Minima templates the main section is 410 pixels wide, funnily enough, so anything from 400px - 410px is nicely in proportion, centred, with a height of 30px - 50px.





Different templates have different widths, so it's always worth checking the width that yours is, and adjust accordingly.

To adjust my post dividers, download the divider to your own computer and check the image size. Reduce or enlarge as needed, then reload to your own Photobucket, Picasa, Picnik, Flickr etc account (or you may be able to resize in the external account itself). The image HAS to be on an external source.

Copy the image code and paste it where shown in the first part of this tutorial.

If you get into difficulties, email me!

ADDENDUM:
If adding your images from Photobucket etc, make sure you remove any coding that looks like this: [IMG] and [/IMG] or your code will be there... but you won't see anything. You must have your code starting with (http and finishing with png) with no spaces in between the brackets.

post signature
your photo name

No comments:

Post a Comment

I absolutely love to receive comments!

But please note - I DO check for spam, and I moderate all comments - any spam is deleted at source.