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.

I Love, Love, LOVE Photoshop Elements 7

I wanted to post this because Photoshop Elements 8 just came out, so Amazon and other retailers are selling Photoshop Elements 7 for a bargain right now! If you want, I won't be mad at all if you purchase it through my link here on the right side...

Anyway, for all you newbies out there like me, here are a few before and after pictures of pictures I edited on Photoshop Elements 7 to give you an idea of what it can do. Disclaimer: I am not by any means a pro, and I am still learning... so if my pictures look a little fishy, hey, I'm still learning!I also do all my headers, blinkies and buttons in Photoshop Elements 7. Here are a few recent ones I did for my other blog:


Anyway, it can be a lot of fun if you are into that sort of thing... and bloggers usually are.


Wednesday, October 14, 2009

Halloween Blinkies



















I designed these myself, but I got the elements and backgrounds from Scrapbookflair.

I also take requests...

Coming soon: Thanksgiving blinkies...

Tuesday, October 13, 2009

FYI: How to Network your Blog in Facebook

Have you ever noticed how some of your friend's blog posts somehow post in the updates on Facebook?

Here is how you get Facebook to pull your blog feeds and announce them to your "friends."

You can either search through the Applications of Facebook for Network Blogs, or click on this link: http://apps.facebook.com/blognetworks

Click on the button that says, "Add a Blog." Just follow the instructions. You will come to a spot where it wants to verify you are the author of this blog. The EASIEST and fastest way to do this is to choose the option of posting their widget on your site. It only takes a few minutes and you can take it off again after you are confirmed.

Make sure you don't forget to invite friends to follow. Facebook won't start pulling your feeds until you have so many.

ALSO, your feeds will be undated once a day automatically, however, you can also pull feed manually by clicking the "pull feed" link once you are all set up.

Have fun!
Blog Widget by LinkWithin