Blog Background Tutorial {With Old Blogger}


One day while reading some of my favorite 'mommy blogs' I couldn't help but notice the beautiful templates some of the ladies used! When I decided to look around at templates I realized most women pay for them or download them from a designers site like here (she makes beautiful free templates!)


I decided to figure out how to design my own template. I started searching online and came across this awesometutorial that helped me create my own template in adobe. I hope this inspires some of you to customize and try to make your own template. I love learning new things and I am excited to share with you my version of the tutorial I found.

How to create your own custom template in Adobe

Open adobe photoshop. Click File -> New -> Blank File
Change the settings to width 1440, height 720, resolution 72 and change to transparent background.
I wanted to use some digital scrapbooking paper and elements so here is how I did it...
Click File -> Open
(open the different elements you want into adobe)
All your content added should be shown below
To add layers click and drag over top the original template
you will have to adjust the size of your added content. I used '12x12' digital paper images.
I didnt want to stretch the image length wise to distort the paper so this is how I made it work.
Go to the layers located on the bottom right of the page. Right Click on the layer you want and click Duplicate layer...
Press OK
Now click on the content on the template and drag it over to the right side.
now you have filled your template background and it should look like the image below
Now add your background where your posts will be shown. (choose a light background so it is easy to read your posts)
Enlarge content and center it as best as you can.
add whatever content you desire to 'dress up' your template.I added digital elements such as ribbon on the sides of my center piece and flowers.

Now click File -> Save for Web...
Change format to JPEG and quality to Very High.
You now need to upload your template online.
Go to photobucket.com and create an account (its free)
Click the more options button under 'Upload Images and Video'
Now under resize my images to: click 1 megabyte file size and push save.
Now upload your photo.
Your photo will appear in an album like this.
Now Sign into your blogger account. Select Layout tab and click on pick new template. Select the Minima template and click Save Template.Now click Edit HTML under the Layout tab.

(If you make a mistake during the next step just Select Layout tab and click on pick new template. Select the Minima template and click Save Template. This will restart our process.)

Press Ctrl+F on your keyboard, the find window will appear. Type 'body' in the find window.


Press enter the body tag should look like this:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Change the code to look like this:

body {
background:$bgcolor;
background-image: url('the address for this image');
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

You will find the address for the image by going to your photobucket album and moving your mouse over your photo. press Ctrl+C to copy the address.

now paste address where the text the address for this image is written in the code. Click preview to view what your blog will look like. Then Save Template

You blog will look like so..

Your Font may be hard to read, to change the font color and type click the Layout tab. then click Fonts and Colors. Scroll through the list to change font and color and you can preview them below. Click Save Changes when finished.Please let me know how this worked, along with links to your blog! I would love to see your creations

NOTE with the new blogger you can simply create your background and add it by clicking
Design>Template Designer>Templates>Picture Window
then
Background, Click the image window below "Background Image".
At the top select "upload image"
There ya go :)

Play around with blog settings in the template designer too to create the blog you want!

1 comment:

  1. I am going to have to try making my own back ground!! looks awesome!
    -Lisa @ http://onebigluv.blogspot.com/

    ReplyDelete