Type in key words and search my blog here:

Loading

Tuesday, January 20, 2009

Scrap a post separator

We have a winner in my recent poll! 81% voted to learn how to create an image as a post separator. To the best of my ability, here are the directions! As always, if you have any questions, please feel free to ask!

Creating a POST SEPARATOR
Step 1 - Create and upload your image
Create an image (GIF, JPG or PNG). My POST SEPARATOR is in PNG format, because I prefer the transparent background. Make sure your images are no larger than the following:

400 x 50 pixels (96 dpi)

Upload your finished image to your favorite photo hosting site and get the direct link code. Save it for later.

Step 2 – Backup your blog template.
You can find directions to do that here.

Step 3 – Delete the dotted lines between posts.
Go to CUSTOMIZE/LAYOUT/EDIT HTML and use your CTRL F (hold the control key and the F key together) to FIND the word dotted, and delete it. You should find the word twice in your code. Preview to see if the dotted line between posts is gone. Click Save Template.

Step 4 – Change your HTML code.
Go to CUSTOMIZE/LAYOUT/EDIT HTML and look in the * / Footer section for a piece of code that has ]] > </b:skin> in it. You will place the following code with your image link in it right BEFORE this code, and after the } symbol. See the following screen shots.

.separator {
background-image: url(LINK OF YOUR IMAGE);
background-repeat: no-repeat;
background-position: center center;
height: 50px;
padding: 4px;
}

Click Save Template.

Step 5 – Change your HTML code again.
This has to be two separate steps. I’ve tried to make it one step and it doesn’t work. Make sure you click the EXPAND WIDGETS box, or you will not be able to find the code.

Find this part of your code in your HTML:

<p class='post-footer-line post-footer-line-3'/>

The fastest way to find it is to hit the CTRL and the F (FIND OPTION) to open a search box to find what you need in your code. You can search the number 3 to find it. There are a lot of 3’s so make sure you find the code in its entirety.

Paste the code below immediately AFTER the this line :

<div class="separator"></div>

Save Template. View Blog.

Here are the WORD DOCUMENT INSTRUCTIONS.

Here’s to more happy scrapping, and
Hugs from the heart,
Jeanette

35 comments:

  1. Awesome tutorial! I love how it looks. Is there a way to get rid of the line seperating the posts that is still there?

    :) Cara

    ReplyDelete
  2. Thanks sp much Jeanette, as soon as I can get the time to work on my blog I will be following your tips for sure!
    Hugs - Linda

    ReplyDelete
  3. I've been trying to this out forever! Thanks so much. Keep up the great work!

    ReplyDelete
  4. Hi Jeanette,
    Are you using the old blogger template (classic)? Reason I'm asking is when I follow step 1, I don't see the "skin" part immediately after the footer part. Instead it says Page Structure Tweaks.

    Any idea why so different?

    ReplyDelete
  5. Amy, I'm not sure why it's different, just follow the same directions finding the skin part. I do not have Classic Blogger I don't think because it says I can revert to Classic if I want to. I hope this helps!

    Here's to more happy scrapping, and
    Hugs from the heart,
    Jeanette

    ReplyDelete
  6. Hey There
    I have an Award For You At My Blog
    amberpony.blogspot.com

    ReplyDelete
  7. Hi, I love your blog! Question though: what is a "post separator"? What am I looking for? Thanks in advance.
    hugs
    steph

    ReplyDelete
  8. Thanks so much, worked a charm after blogger played up all last night. lol
    Hugs
    pspscrapper

    ReplyDelete
  9. aw! thanks Jeanette - it took 2 goes to get it right, but I did it!! You're brilliant - did anyone ever tell you that?? Thanks again!

    ReplyDelete
  10. Thank you so much for sharing. I finally got my own background up on my blog. I had tried and tried and your little tutorial on it was really easy to follow. Thanks again..

    ReplyDelete
  11. Well, thanks to You I have done it! I was getting nuts to follow the tips given by Vin but I could not make it(gave me errors or showed nothing at all) so I've checked the comments on Vin's posts to see how others made it and Bang! I found you, no need to say how grateful I am and I am adding yours to my favourite blogs. Have a lovely week,
    Ciao,
    Patrizia

    ReplyDelete
  12. I am having some problems with getting my post seperator's background to be transperant. I create it in Photoshop Elements 7 and save it as a PNG. When I get it loaded up it has either a white or a black background. What am I doing wrong? Email me at julianna_mortensen@yahoo.com and thanks for your blog, it really helps me!

    ReplyDelete
  13. I would love your help. I made a slide show, but it does not stay where I put it it slides with the other posts to older post. understand? yours stays at the bottom of the page. Love your place.

    ReplyDelete
  14. Hi! Thank you for your stop on my blog!
    With your help I was scrapping my blog, so now it has another look.
    But I have problem how to make a post separator. I tried more times but at the end it's only code instead of image.
    can you help me?
    Thank you for your great job!
    www.hotspotbyaneta.blogspot.com

    ReplyDelete
  15. Oh My Darling Jeanette, I got it at last, my Page Separater, thanks to you, a star you are, with out you I would still be running around like a headless Chicken. Bye for now and God Bless, lovies xxxx

    ReplyDelete
  16. Thank you for posting this information! It's been tremendously helpful!

    ReplyDelete
  17. thank you very much, I've just succesfully followed your instructions to put a blog divider in.

    ReplyDelete
  18. Thanks so much for all the wonderful instructions! Soooo helpful!

    ReplyDelete
  19. Omgosh! I did it all by myself! Yeah! I added follwed your post separator instructions and found one I like and applied it. You're so awesome Jeanette.

    Now I just need to learn how to creat my own layouts or use those 'kits' people offer...LOL....all in time, all in time....

    ReplyDelete
  20. Thank you soooo much for your tuts, it's working, kisses.

    ReplyDelete
  21. Woo-Hoo! I got this one to work. Thanks for the great info, Jeanette.

    ReplyDelete
  22. Oh Jeanette, I am so happy I've found this one..after spending all afternoon scrapping scrappin my titles and then found once I upload them they looked stupid coz of the silly little dotted lines...and now their gone wahooo...can put my scrapped titles back...not now...kinda brain dead...thanks again hugs Lesley

    ReplyDelete
  23. Hi, I have learned alot about blog decorating since I found your site. So i want to thank you for that.

    Regarding post separators, I just wanted to tell you that there is a glitch with the new blogger editor and post separators. I haven't figured out why, but each time you add an image, it seems to repeat the post separator and superimpose the image. If you ever figure out how to fix that, it would be nice to update it on your site. Thanks!

    ReplyDelete
  24. I am having the same issue as Janick mentions (above)....in that if I make a post with no images uploaded the separator graphic appears where it should and looks fine. However, if the post contains uploaded images, I get multiple instances of the separator showing up everywhere the images were loaded, and the images all seem to jump out of their spaces and crash into each other.......it is a real train-smash...so I reverted to my old template (with no separator).

    If you, or anyone else here knows how to fix this, that would be awesome!

    Sam.

    ReplyDelete
  25. Hi Janick and Sam, I'm working on what makes your experience different. If you get a chance, maybe you could save your template and send it to me. My email is memorykeepersmail at yahoo.com

    Hopefully, we'll figure it out soon!

    ReplyDelete
  26. Hey Jeanette, Love this tutorial, but your page won't let us right click and copy.. Can you help with this?? Please..Thank you..

    Hugs,
    PaisleyCat

    ReplyDelete
  27. Hello Cat,

    I've missed you! Thanks for taking time to write! I've added a Word Document link to this set of instructions for ease of use....some people are reporting problems with the HTML code, and I haven't had time to figure it out yet....

    Here's to more happy scrapping, and
    Hugs from the heart,
    Jeanette

    ReplyDelete
  28. This worked brilliantly, thanks!
    Right now as I have it with your code, it repeats the same single picture again and again after each post. How can I put a different picture after each post, or alternate between two or three different pictures? Thanks!

    ReplyDelete
  29. I am so glad that you're here with all of this wonderful knowledge! I keep forgetting these steps for everything and with you here I can come and remind myself of where everything goes. You're fantastic! Thank you!

    ReplyDelete
  30. Thank you so much! I closed my blog a while back, and lost many of the codes that I had searched long and hard for. I happened upon your blog and found several of the ones I was looking for! Wonderful!

    ReplyDelete
  31. Thanks for sharing this. I am having the same problem as Janick and Sam. Whenever a post contains images, the post separator displays behind the images and messes up the alignment. Just wondered if you'd found a fix yet.

    Scraps of Life

    ReplyDelete
  32. Never mind - just found your UPDATE post! Thanks again!

    ReplyDelete
  33. Thanks for writing! You can find updated directions here:

    http://easycustomblogs.blogspot.com/2009/10/update-post-separator.html

    ReplyDelete
  34. I've been wanting to spruce up my blog for the longest time but was just dreading it. Your tips have made it so easy! Thank you!!

    ReplyDelete
  35. I had a problem when I was watching the program it was so difficult to me because the code never appear I don't know if it is my computer.Generic Viagra Buy Viagra

    ReplyDelete

Thanks for taking time to leave a comment. I would love for you to include your blog address

Just copy and paste the following in your comments and add your blog address and blog name, and you will easily post it in your comments. Don't leave any spaces!

<a href="YOUR BLOG ADDRESS HERE/">YOUR BLOG NAME HERE</a>

-:¦:-.•:*¨¨*:•.-:¦:-.•:*¨¨*:•.-:¦:-.•:*¨¨*:•.-:¦:-

Here's to more happy scrapping, and
Hugs from the heart,
Jeanette

ONE SIZE TEMPLATE

ONE SIZE TEMPLATE
Blog Background Template