Over the years I've been asked by my friends to create custom blog backgrounds for them. In the process of designing exactly what they wanted, I've compiled quite a collection of blog backgrounds that have never got the chance to shine on an actual blog.
To customize your blog with one of my backgrounds, do the following after selecting your background:
1. Write down the file name of the background found below these instructions (example: liveoutloud1.jpg)
2. Sign into Blogger; You will now be in your Dashboard.
3. Click on "Design"
4. Set to Minima. (Yes, you can still do this even though Blogger just made some big changes.) To do this, click on "Edit Html" and scroll to the bottom of the page until you see Old Templates click "Select Layout Template" and choose any of the Minima templates.
5. Click "Save"
6. You should be back on the "Design" tab, if you are not already there, click on "Page Elements".
3. Click on "Design"
4. Set to Minima. (Yes, you can still do this even though Blogger just made some big changes.) To do this, click on "Edit Html" and scroll to the bottom of the page until you see Old Templates click "Select Layout Template" and choose any of the Minima templates.
5. Click "Save"
6. You should be back on the "Design" tab, if you are not already there, click on "Page Elements".
7. Click on "Add a gadget":
8. Select HTML/Javascript (it should pop up in it's own small window)
9. Copy and paste this code (replace the red text with your background file name from step 1) into the HTML/Javascript box (leave the title blank)
<style type="text/css">body {background-image: url("http://www.ssfdesignstudios.com/exampleblogbkg.jpg"); background-position: center; background-repeat: no-repeat; background-attachment: fixed; } </style>
<div style="position:absolute; top:30px; left:0px; border:0px;">
<a href="http://poshabc.blogspot.com/" target="_blank"><img src="http://www.ssfdesignstudios.com/poshabctag_sm.png"border="0"></a></div>
8. Select HTML/Javascript (it should pop up in it's own small window)
9. Copy and paste this code (replace the red text with your background file name from step 1) into the HTML/Javascript box (leave the title blank)
<style type="text/css">body {background-image: url("http://www.ssfdesignstudios.com/exampleblogbkg.jpg"); background-position: center; background-repeat: no-repeat; background-attachment: fixed; } </style>
<div style="position:absolute; top:30px; left:0px; border:0px;">
<a href="http://poshabc.blogspot.com/" target="_blank"><img src="http://www.ssfdesignstudios.com/poshabctag_sm.png"border="0"></a></div>
That's it!
fluttering-by1.jpg
fluttering-by2.jpg
fluttering-by3.jpg
liveoutloud1.jpg
liveoutloud2.jpg
liveoutloud3.jpg
liveoutloud4.jpg
liveoutloud5.jpg
liveoutloud6.jpg
