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!

12 comments:

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

    ReplyDelete
  2. The website is looking bit flashy and it catches the visitors eyes. Design is pretty simple and a good user friendly interface. dnd dice

    ReplyDelete
  3. This is such a great resource that you are providing and you give it away for free. I love seeing blog that understand the value of providing a quality resource for free. dnd dice

    ReplyDelete
  4. I admire this article for the well-researched content and excellent wording. I got so involved in this material that I couldn’t stop reading. I am impressed with your work and skill. Thank you so much. orciani milano

    ReplyDelete
  5. To look for the best one, we suggest that you discuss the matter with your colleagues, neighbors, and friends. Expert Sub Zero Refrigerator Repair Service In San Gabriel

    ReplyDelete
  6. Some truly wonderful work on behalf of the owner of this internet site , perfectly great articles . 20 free instagram likes famoid

    ReplyDelete
  7. his is no guarantee that things can still not go wrong, but it does give peace of mind knowing that the company is still going to be around to repair anything that might have gone wrong. seal coat

    ReplyDelete
  8. That is really nice to hear. thank you for the update and good luck. that

    ReplyDelete
  9. At the point when you visit a model train hobby shop, you can depend on the way that you'll be cooperating with a representative who has top to bottom information about model trains, and who is additionally very ready to be of help.B. Merry Studio

    ReplyDelete
  10. what a great article about the sports water bottle these water bottle always make you look chill

    ReplyDelete
  11. I have been searching for such an informative post for many days and it seems my search just ended here. good work. keep posting. If you want to get Information about 12 seitiger würfel visit our website.

    ReplyDelete
  12. You have done good work by publishing this article here. 10 seitiger würfel I found this article too informative, and also it is beneficial to enhance our knowledge. Grateful to you for sharing an article like this.

    ReplyDelete