Welcome to "The Spin Cycle of Life".

This blog is my little creation as a way for ME to share with YOU all the fun and amazing things I am learning now that I have become a full time stay at home mom! Besides my children, my new little hobbies are Photography, Photo Editing, Digital Scrapbooking, and BLOGGING! I have been lucky enought to have a wonderful group of "lady" friends who have taught me sooo much in each of these areas...and I hope I can pass it all on to you! Enjoy!

And the name you ask......????Well, don't we all have days where we feel like we are on the spin cycle! ;)

Monday, April 12, 2010

Adding "Post Dividers and Siggy's" to your Blog

Ever wonder how peole get those cute little signatures under each post, as well as the fancy little post dividers? Well here's how...its pretty easy, and will make a HUGE difference on your blog!

FIRST is the creating part:

-Open a new page in your editing program sized ABOUT 700px x 200px(your length can be longer...but I wouldn't go any higher).

-Create your design and add a signature on it. You can get GREAT handwritting fonts from HERE.

-Save your image as a .png(PS) or .gif(gimp)

-Upload your image to Tinypic.com or Imagehost.org and copy the Directlink(tinypic) or Hotlink(imagehost)

TIP: You can choose to do an all in one siggy and divider...I have found this easier. OR, if you dont want the divider, you can simply just do a signature.


- Go to Layout, EDIT HTML

- scroll down till you find(it will be the second section in the POST section) :

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

-Hightlight ALL that you see above, and delete it. Replace it with ALL that you see below:

.post {
background: url(http://yoururlhere.jpg/);
background-repeat: no-repeat;
background-position: bottom left;
margin:.5em 0 1.5em;border-bottom:0px dotted $bordercolor;
-Insert your link you got from tinypic/image host where it says YOUR URL HERE.

Scroll a bit more and find the Section that looks like this:

.post-footer {
margin: .75em 0;
font: $postfooterfont;
line-height: 1.4em;
Replace the RED number with 3em. If your post divider is BIG, you may need to make this number be a little higher. This will allow a little romm under each of your posts so your post divider doesnt sitt ontop of your post.

-Save and preview.

TIP: You can change the position of your divider by changing the above code where it says "bottom left" to "bottom center" or "bottom right".
You may need to or want to change the date/time and signature stamp that is automatically put under each post. I would recommend removing your name(if you added a siggy on, and the time, but leaving the date. Here is how to do that:
How to edit the DATE/TIME/SIGNATURE stamp after each:

-Go to Layout, Page Elements

-Click EDIT on your BLOG POST section.

-Check mark or uncheck mark the items you want shown/or not.


HERE is a great site for Pre-made post dividers. You can open them up in your editing program and edit the size of them to your liking, and also add your signature to it. Then follow the same steps as above for saving and installing.

No comments:

Post a Comment