Thursday, October 15, 2009

Tutorial: How to Add Post Dividers

Okay, it took me a while to figure this out. But I was bound and determined to write this post. And after much trial and error, I FINALLY got it to work! Woo Hoo! So here it is.

1. You will need to either design your own post divider, or upload one from another blog such as Shabby Blogs or The Cutest Blog on the Block. I made my own -- I have serious issues about doing my own stuff... I don't want to be like everyone else, know what I mean? (I used elements from Pam Donnis Designs and Scrapbook Flair, put together in Photoshop Elements 7 -- but you can use Gimp or Paint.net to design your own. See links on my sidebar.)

2. If you are designing your own, make sure when you create your new file, you will want to make sure to set it at the right length. To check the length of your post area, go to your HTML editor and find this area (settings will vary):

#main-wrapper {
background: #ffffff;
border: 5px solid #ffffff;
width: 510px;
float: $startSide;
margin-left: 15px;

In red, is the length in pixels your post area is. I made my example 400 px, because I didn't want it all the way across.

Also, if you want the background of your divider to be transparent and not have a white box behind it, make sure you save the finished product as a .PNG file... NOT a .JPG.

Here is my finished divider in Photoshop Elements:3. Next you are going to upload your divider onto an online picture host such as Photobucket or ImageShack to receive the Direct Link Code.

4. Once you have that, you are going to go into your HTML editor. Remember, you may want to back up your blog first before you make any changes. Now you are going to scroll down until you find this little tidbit:

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

And you are going to change it to this:

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

Now notice where it says "padding" -- 5.5 is standard, but when I tried it my divider overlapped my comment and post info. So if you make the number greater, the divider will move down. I ended up using 12em for my padding to look right.

Here it is folks!

Now, I am not too sure I like it with my Link Within Widget... just too much. So I decided to re-design it to go with my signature... tricky. So you can 1 of two things, you can do this same thing and add your signature, OR you can follow my signature tutorial and add a new signature design with a divider. I am choosing the second, just because I don't like mine under the link within.AND LASTLY: You can also use your divider as a footer to your blog. Just go into your settings, page elements, and add a gadget on the bottom. Copy and paste the dividers HTML code into a HTML/ Java Script gadget, and Ta Da!

How cool is that?!



Now if you just want to divide your posts with lines, you can do that too in the HTML Editor. Just find that area:

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

And change the 0 to how thick you want the line, and you can keep dotted if that is how you want it or change that to "solid" -- up to you. Click here for more line code styles.

4 comments:

.Tea Jukić said...

thank you so much, it worked out perfectly on my blog!!!! HVALA!!!!

hvala = thank you in croatian! :)

Renee' said...

Thank You so so much :)

Fahrenheit 350° said...

Great tutorial! I gave you a blog award - come see!

Mindy said...

This worked purrfectly! I don't have to add it manually anymore! yay!

Blog Widget by LinkWithin