Thursday, December 1, 2011

TUTORIAL: How to create/install your own background

The video I created on how to make your own blog background is a bit outdated.  So, I thought I would create this entry to update the video a bit.

Blogger changed how they do things a while back.  There is a CSS code you can enter to place your new background, but I haven’t found a way to do that that works as well as this way (unless you want a repeating background with little control over how it looks).  So, I’m sticking to this.  Please know that I’m NO EXPERT when it comes to html or css.  It’s all gibberish to me...mostly.   


STEP ONE: Create your blog background.

A:  I like to use the dimensions 1980 X 912 pixels with the resolution at 72 (when viewing things on the web, you don’t need a resolution any larger than 72).  This creates the background large enough to fill most screens, but you can adjust these numbers if you want.  Just know that if you make it smaller, it will not fill the screen on all other computers, even if it appears to do so on yours.

(you can click on any image to see it larger):

Make it 15 inches wide.  

C: CENTER IT OFF THE BACKGROUND (a tip if you use Photoshop): As seen in red in the image above, in the LAYERS PALETTE highlight your background and mid-section layers, then press the “Align Horizontal Centers” button at the top (which you’ll see available when you have your “move” tool selected). This will center your mid-section on your background. 

D: ADD A SHADOW TO YOUR MID-SECTION (if you want).  These are the settings I usually use, give or take some.

TIP:  If you want a header for your blog, do not add it to your background.  Add it as a separate element on your blog.  If you put very much on the sides of your background, it will depend on the screen shape and resolution as to how much will be visible on any given computer.


STEP 2: Save your background to use on the web.
  • Save your image a size smaller than 1M (something with a K at the end is what you want).  See image below to see where to look for the size (the circle in the center).  And, you adjust the size of the background by changing the quality size (upper right circle).
(You can click to see image larger.)

STEP 3: Upload to Photobucket (or another similar site). 

Make sure your settings are set to allow for large size files.  You can do that by following the images/instructions below:

(You can click to see these larger)

1. Click on “customize your upload options”.


2.  Select “Best possible quality (while staying 1 mb or less)

3.  Save it.

4.  Then upload your image.

5:  Once it’s uploaded, you can view your image.

6:  Locate the “direct link”, as seen in the image below.  You don’t need it yet.  Just remember where it is. 

STEP 4:  Add your background to your blog!

1.  Go to your blog.

2.  Go to the TEMPLATE option.

3.  Choose a “picture window” template.


4.  Go to LAYOUT.

5.  Click on “Add a Gadget”




7.  Paste this code into the box that pops up.  Within the code, add your direct link from your background that you uploaded to photobucket: 

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

8.  Save it. 

It should now show you your new background when you view your blog.  If you want to change the background in the future, just change the direct link to your new background link.  If you ever want to get rid of your customized background, just delete this gadget off of your blog, and it’ll return to whatever template you have chosen on blogger.

If you want to customize your blog a little more, use the Template Designer.


Choose ADVANCED:  You can scroll through all the options and change the font, size, coloring, etc…on all the different areas of your blog. 

On my blog, I don’t want a title since I created my own, but I haven’t taken the time to figure out how to remove it.  So, instead, I changed the font size to 1px and matched the color to my background (as you can see in the example below).  Now it’s not visible. 

Special thanks to Easy Custom Blogs.  I had originally had a different code that I used for my background, but when Blogger updated things, my code wouldn’t work for new backgrounds anymore.  Jeanette had a code that worked great – so yay!!  If you want more tutorials on how to customize your blog, she has great ideas over there: 

Please let me know if you have any questions!

Friday, July 8, 2011

the Boy (a free kit)

Okay, I finally finished a kit!  I told you I would one day.  I really didn’t think I’d average like only three kits a year (assuming I finish another by the end of the year).  But apparently that is my new top speed.  Ha!  Hopefully I’ll get a little faster. 
And it’s ALL FREE.
I say it’s a boy kit, but it’s really a gender neutral kit overall.  There are some elements that are more boy, though.  Plus, I think my kits are usually girlie, so I thought I’d focus one of BOYS this time!
**Download links are at the end of the entry**
A couple layouts:
I used JennCK Designs at Scrapbook Bytes for the templates.  She has a ton, and they are great!
It’s been so long, I’m not sure I have a CT anymore (hehe!), but IF I do, I’ll be checking with them soon to see if they want to create some freebies for you as well.  If so, I’ll post those later.  If not, I’ll post my quickpages as freebies in another entry in a few days (don’t have time at the moment).
Hope you enjoy!  Here are the download links:
The Boy Free Kit – Elements
The Boy Free Kit – Papers01
The Boy Free kit – Papers02
The Boy Free kit – Papers03
PS:  If you’re new to my blog, I no longer have time to sell designs (can’t keep up with the required amount!), so I’m giving them away for free for now.  Baby #5 is due at the end of Sept, so I’ll have my hands pretty full.  You can subscribe via email if you want to be kept up to date on any new kits.  If you do subscribe, be sure to check your email for an email from Feeburner.  You’ll need to click on the link from them in order to fully subscribe (so many attempted subscribers have forgotten that last step!).

Saturday, January 22, 2011

free kit “Bare Winter”

Greetings! I’ve finished up a partially created kit and am offering it as my first official freebie. It isn’t a full kit, and it’s not a mini-kit. It’s more of an in be“tweeny” kit, hence the kit description. I know…that’s like super cool. (download links at end of entry)

KIT PREVIEW: It has five papers and 33 elements, including a glitter pack.

Within a week, I’ll have more layouts (hopefully) to show you from my creative team, and potentially some additional freebies from them. No promises, though, as I’ve yet to ask them.

(Download links are below…)

For those new to my blog, I’ve decided to stop selling my designs, at least for a little while, so that I can put focus on my family more. I will still be making kits but will be offering them for free instead (and much slower than I had been). So, if you’d like some free kits, you can subscribe to my blog, follow my blog, and/or follow me on facebook. I do prefer no real life stalkers, though.

In case you missed it, I am having my final sale in my store. I’ll be closing up at the end of January. Right now you can get my whole store for only $10 ($100 worth of products). I will not ever be offering these kits for free, so if you want to get them, it’s the perfect time!
Store Link:


Some of you have mentioned having trouble getting the 4shared link to work, so I'm adding this link as a backup (if 4shared works, you don't need to use this link):