Making Footer Columns

Would you like to have more room on your blog? The best way is to create more spaces to put your gadgets and such!

Resource: Pocket at Blogger Templates

The standard blog has one gadget area for the bottom of your blog.

Step 1 – Back up your template. The instructions are here.

Step 2 - Clear your footer space.

You will want to move all gadgets out of the footer area by clicking on the gadget and holding your mouse key and moving the gadget to the side for now.

Step 3 – Edit your HTML

Go to your HTML code by going to CUSTOMIZE-LAYOUT-EDIT HTML

By using your CTRL + F keys together, you can FIND this part of the code by copying and pasting it exactly into the search bar

]]></b:skin>
</head>

In the line directly above this section of code ADD THIS CODE:

#footer-columns {
border-top:1px dotted #999999;
clear:both;
margin:0 auto;
}
.column1 {
padding: 0px 5px 3px 5px;
width: 30%;
float: left;
margin:3px;
text-align: left;
}
.column2 {
padding: 0px 5px 3px 5px;
width: 31%;
float: left;
margin:3px 3px 3px 5px;
text-align: left;
}
.column3 {
padding: 0px 5px 3px 5px;
width: 30%;
float: right;
margin:3px;
text-align: left;
}
.addwidget {
padding: 0 0 0 0;
}
#footer-columns ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
#footer-columns li {
margin:0;
padding-top:0;
padding-left:0;
padding-bottom:.25em;
padding-right:15px;
text-indent:-15px;
line-height:1.5em;
}
body#layout #footer-columns {
width: 100%;
margin-left: auto;
margin-right: auto;
}
body#layout .column1 {
width: 32%;
float: left;
}
body#layout .column2 {
width: 32%;
float: left;
}
body#layout .column3 {
width: 32%;
float: right;
}

Click SAVE. You will not see any difference yet, we have to add the columns to the layout portion.

Step 4 – EDIT HTML AGAIN!

By using your CTRL + F keys together, you can FIND this part of the code by copying and pasting it exactly into the search bar

<b:section class='footer' id='footer'/>

You will DELETE this part of the code and ADD new code which is as follows:

<div id='footer-columns'>
<div class='column1'>
<b:section class='addwidget' id='col1' preferred='yes' style='float:left;'>
</b:section>
</div>
<div class='column2'>
<b:section class='addwidget' id='col2' preferred='yes' style='float:left;'>
</b:section>
</div>
<div class='column3'>
<b:section class='addwidget' id='col3' preferred='yes' style='float:right;'>
</b:section>
</div>
<div style='clear:both;'/>
</div>
<b:section class='footer' id='footer'/>

Click save.

Here is the Word Document of these instructions, and here are the video instructions. The video runs better after the first viewing.

Here’s to more happy scrapping, and

Hugs from the heart,

Jeanette

Create Your Own Background

I have a big surprise for you! Even if you don’t have Photoshop, Paint Shop Pro or my personal favorite, Microsoft Digital Image Pro, you can make your own blog accessories (blog background and blog header) using Microsoft PowerPoint. You heard correctly, you can create with Microsoft PowerPoint.

I received an email from Jey (thanks so much by the way), asking HOW DO I MAKE MY OWN BACKGROUND? I was trying to think of something simple. I know there are great free sites out there, such as Scrapbook Flair, and Scrapblog, but they don’t allow you to size the images as you wish.

There are also other free photo editing sites such as GIMP, and Paint but I don’t know how to use them, and for simplicity I selected to use a familiar simple program, that most people already have on their computer.

Step 1 – Download your blog accessories kit (digital papers and embellishments)

You can find many freebie sites on the web. For my lesson today I am using my friend Linda’s new Showers of Flowers kit. You can get the freebie at Bon Scrapatit (but only for a short time). There are many other sites too. You can go to Creative Busy Hands, Digifree, and Ikea Goddess for more lists of freebies.

You will download your files as a zip folder. I always create a new folder in My Documents that has the designer and kit name. After downloading, you will unzip the files, by right clicking on the file, and selecting “EXTRACT HERE.”

Step 2 – Save the PP Blog Template

When you double click on the picture below you will be taken to the actual template image. It will open in a new window, right click on the image and choose SAVE IMAGE as or SAVE LINK and put it in the same folder as your kit from step 1.

Step 3 – Open a new PowerPoint

Format the size of your PowerPoint. Go to FILE/PAGE SETUP and choose CUSTOM slide size, and select the following:

Width: 11 inches ~ Height: 7.2 inches ~ and then hit OK.

Step 4 – Add the template

Select the Insert key and choose PICTURE, and then choose FROM FILE. Find the folder you created, and select the Blog Background template from that folder.

Step 5 – Add accessories

Using the template as a guide line, add papers and embellishments. The area in white should remain light for dark text. Please note that when you add the images they will be extremely large, so the first thing you will do is reduce the size. After you add an image right click on the image and select FORMAT PICTURE. Select size, and change the first number to 5 inches. Sometimes if you make the image small, it seems to disappear. Use your scroll bar and go to the far left, and top and you will usually find your image.

To move images about on your page, just click on the image and holding the mouse key move the image. To resize the image click on the corner to resize, otherwise you will lose the ratio.

You can move images to the front or back of the page (slide) by right clicking, and selecting ORDER.

Once you have a set of embellishments that you like you can group them together to move or resize. You group by right clicking and selecting GROUPING.

Step 6 – Save the slide

You will save the slide when you are finished as a PowerPoint image, which allows you to make any changes. When you have the final image that you want, you will save the image as a jpg. Go to FILE, SAVE AS and when the window opens, use your mouse to scroll to JPEG File Interchange Format (*.jpg). Save in the same folder so you will know where to find it.

Video Instructions – Click on image to view.

Step 7 - Upload your image

Upload your image to your favorite hosting site like Photobucket, and save the DIRECT IMAGE LINK.

Step 8 – Install your new background

Go to CUSTOMIZE/LAYOUT/PAGE ELEMENTS/ADD A GADGET and select HTML/Java Script.

Using the direct link you saved from Step 7, add this code, making sure to leave no spaces between the parentheses:

<style type="text/css">body {background-image: url(DIRECT IMAGE LINK); background-position: center; background-repeat: no-repeat; background-attachment: fixed; }</style>

Click save and view blog!

Word Document Instructions can be downloaded HERE.

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

Custom Email Header

Click on the image for VIDEO INSTRUCTIONS. You will want to mute the music on the blog if you choose to watch the video...LOL, or use it for background music!

If you use Feedburner for your subscriptions, this is going to be an exciting tutorial on adding a custom header to the email generated by your posts.

To get Feedburner, a wonderful FREE subscription service, click here.

Step 1 – Scrap your custom header

I scrap my header in the following dimensions and then resize for clarity:

4500 x 1860 pixels (300 resolution)

Resize to 450 x 186 (72 resolution)

UPDATE 7/2/09: I increased the final size of my header to 650 x 268 and it turned out great on the email.

Save as a jpg (smaller files).

Step 2 – Upload your finished image

Upload your finished image to your favorite photo hosting site and get the direct link code. I like Photobucket and Scrapbookflair. Save the DIRECT LINK.

Step 3 – Go to My Feeds in your Feedburner account.

Click on the feed you want to customize, if you have more than one.

Step 4 – Select PUBLICIZE

From the choice of 5 tabs, select publicize, the middle tab.

From the SERVICES menu to the left, choose Email Subscriptions, then choose Email Branding.

Just below the “Email Subject/Title:” you will see a box titled: Logo URL: this box is where you will put your DIRECT IMAGE LINK you saved from Step 2.

Step 5 - Click SAVE or ACTIVATE.

You can find the Word Document Instructions HERE.

UPDATE: LATE BREAKING NEWS! IT WORKED!

I just checked my mailbox, and there is definitely a header in my Easy Custom Blogs email. I wonder if I make it longer will it bump the Easy Custom Blogs part to the top or bottom of the image? Of course I will try. If you get a totally spacey email from me next time, just know that so much of this is trial and error…and error…and error! LOL!

Here's to more happy scrapping, and

Hugs from the heart,

Jeanette

Scrapping Older Posts, etc.

Resource: Pocket at Blogger Help

Discovered on Kathy’s Blog Just Being Crafty

I am trying something new. I found a very cool site called Jing Project that allows you to video and narrate onscreen instructions. I created this video tutorial in Jing, but I must warn you there is only 5 minutes, so it’s very fast (well if it plays straight through...LOL). Also make sure you use your scroll bar on the side to move the video up/down and right/left as the capture video I did was quite large. I did not make any retakes, so for what it’s worth, you are welcome to view the video by clicking on the image below, and when the link opens click on the start arrow:

Step 1 - Create your image

Create an image (GIF, JPG or PNG). My OLDER/NEWER/HOME buttons are in PNG format, because I prefer the transparent background. Make sure your images are no larger than the following:
110 pixels in width (96 dpi) I always make mine much larger such as 1100 x 1100 pixels 300 dpi and resize for clarity.

Step 2 – Upload your finished image Upload your finished image to your favorite photo hosting site and get the direct link code. I like Photobucket and Scrapbookflair. Add these codes to your planning document, by inserting them as the DIRECT IMAGE LINK in this code:

<img src='DIRECT IMAGE LINK'/>

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

Step 4 – Change your HTML code.
Go to CUSTOMIZE/LAYOUT/EDIT HTML and check the EXPAND widgets box.

You will be looking for and replacing 3 pieces of code (one for each link in your blog NEWER POSTS, OLDER POSTS and HOME. One of my favorite key strokes are the CTRL+C (copy) and the CTRL+V (paste). You can highlight and copy and paste for each section.

{SAMPLE INSTRUCTIONS}

A. Highlight <data:newerPageTitle/> with your cursor, and then click the CTRL+C (COPY) keys together.

B. Go to the HTML, and press the CTRL+F (FIND) keys and then put your cursor in the box, and hit your CTRL+V (PASTE) keys and you will paste the code you are looking for into the box.

C. Go to your planning document and CTRL+C copy the <img src='DIRECT IMAGE LINK FOR NEWER'/> with your actual link in the code.

D. Go back to the HTML and replace the <data:newerPageTitle/> and replace it by highlighting it an using your CTRL+V paste keys.

E. Do the same step for each portion of the code.

You will find and replace <data:newerPageTitle/> with the digital image you scrapped for newer (next) posts {See SAMPLE instructions above}

You will find and replace <data:olderPageTitle/> with the digital image you scrapped for older (previous) posts

You will find and replace <data:homeMsg/> (only the first one) with the digital image you scrapped for home

Step 5 – PREVIEW your blog.
Because you are only seeing the first page of your blog, you will have to trust that the NEWER and HOME buttons are working if the OLDER POSTS button is visible.

Step 6 – Save Template and View your blog.

Find the Word Document Instructions HERE.

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