Type in key words and search my blog here:

Loading

Thursday, June 18, 2009

Scrap Post Title

Scrap a Post Title Background

See the cute curled tab I have under each of my post titles? That's a BACKGROUND image for post titles I inserted into my code.

Instructional Link: Pocket at Blogger Templates and Help

Resource: Kathy at Word Art Fun

Horse Scrap for my post title background by Eumelinchen Designs and Designs by Lisa Minor

This lesson is awesome! You can eliminate adding a post title icon (lesson found HERE) by scrapping your image as one unit.

Step 1 – Scrap your background

Size suggestion:

390 x 55 pixels, resolution of 72

If you want to add shadows and increase your creativity, save as a png (transparent, with no white background). I always scrap at a higher pixels and resolution and then resize.

Here is the image I created for my Horse Heaven Stables blog.

clip_image002

Step 2 – Upload your image

Upload your image to your favorite hosting sites. I like Photobucket and Scrapbook Flair. Save the DIRECT LINK you will need it later.

Step 3 – Backup your blog

You can learn how to do that HERE.

Step 4 – Add your code.

Go to CUSTOMIZE/LAYOUT/EDIT HTML

Use the CTRL+F (Find) to find this piece of code:

.post h3 {

clip_image002

After it you will add this code:

background: url(DIRECT LINK OF IMAGE); background-repeat:no-repeat;
height: 55px; text-indent: 70px;

Then adjust this part of the code:

padding: 15px;

The height must match your image height.

Step 5 – Trial and Error

You will tweak and preview your changes to get the title exactly where you want it. PLEASE preview each time to make sure the title is correct. You will adjust the HEIGHT, the TEXT-ALIGNMENT and the PADDING.

The changes I made in my sample are as a follows:

1. Add background image and height.

2. Add text-indent line.

3. Change padding to 15px and removed other numbers to move it down.

**Optional: You may want to make your post title font smaller, and you do that by changing the “font-size:140%” portion of the code. 140 is the default. To decrease the post title font size, reduce this number.**

clip_image006

Step 6 – Save

When you are fully satisfied with your post title background, and placement of the text, save.

My Easy Custom Blog already had the post title icon, with instructions HERE. I just left the icon (my picture) in the code and that’s why the post title background is unique, but I liked the look of it.

Now you can scrap your post title backgrounds! Here is a Word Document of these Instructions.

Here’s to more happy scrapping, and

Hugs from the heart,

Jeanette

Easy Custom Blogs

2 comments:

  1. This Tutorial is AWESOME! Thanks a Bunch! It worked like a charm! Here's my blog below :o)

    Gimme That Glow

    ReplyDelete
  2. Hi honey.
    I know it's been a while, Came to have another go of this today & I'm very happy to say I finally did it......how come it seems so much easier after going away & coming back to it.
    Thanks sweetheart for your great directions & so easy to follow (once I got my head around it) lmbo.
    ((hugs)) Funky xx

    Funky-Fever

    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