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.

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 {

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.**

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