Thursday, March 4, 2010

You asked for it...

By popular demand (or maybe just a single demand), here it is...

Custom Blog Elements 101

In my experience, the background was the most simple part to create, so we will start there. For now, we will pretend it didn't take me the longest on this element because my biggest frustration was keeping the background from being downsized before I got to use it.  So... backgrounds..

I started off in paint, but really, if you are going to do much customizing, I recommend you download a free image editing software called GIMP.  It is a bit like Photoshop, but free and with my limited, though growing skills, I don't know what I am missing out on, so most of you won't either.

Either way, you should start by finding a digital scrap kit that suits your needs.  Free is always good, and my preference, but you can do whatever you want.  A google search of "free digi scrap kit" turns up thousands of hits and I combed many of them, but my favorite was this one. My favorite feature was the topics list on the right.  For this blog, I chose to click on home and found many options. I picked one from there called Tiramisu and downloaded it.  Here is the download screen.


I put all the downloaded files into a special folder on my computer. Once you have the files you should go through and decide what papers you want to use for your background. Then open them in paint or GIMP and move things around to make the background you want.

Now for the tricky part... using the background you just made. You need to save it at a proper size.  Both paint and GIMP have this option.  If you are doing a background like the one here, the only crucial dimension is width.  Standard screens these days are 1024 pixels wide.  Before you save your image, make sure it is 1024 pixels wide.  Ideal height is 768 pixels.  


Now you need to upload the image to a hosting site. I was told any would work, but found that Picasa downsized my image, making it too small to fill the whole screen.  I recommend Photobucket.  When you upload it, make sure you go into the "more options" and select "1 megabyte file size" or it may also downsize your image.


Now find the file and upload it. Somewhere along the way, it will give you and option to save and share. On the next screen it will have a list of codes. You want the direct link. Highlight it and then click C while holding CTRL (CTRL+C) or you could right-click and choose copy.

Now for the hardest part.  If you are in blogger (blogspot.com) it is very easy to add the background to your blog.  First make sure your template is Minima.  The template is under the layout tab when you choose to customize your blog. Once you have confirmed that, your next step is to go to "Page Elements" under the layout tab. To add your background, you need to add a gadget. The gadget you need is called HTML/JavaScript.  You can leave the title blank or call it whatever you want.  It doesn't matter.  The important part is the code. Here is the exact code in mine:

<style type="text/css">body {background-image: url("http://i904.photobucket.com/albums/ac243/jacquedee/backgrounds/tiramisubackgroundpretty.jpg"); background-position: center; background-repeat: no-repeat; background-attachment: fixed; }</style> <div style="position:absolute; top:30px; left:0px; border:0px;"></div>

Simply paste that code into the content box and replace the part in red with the link you copied from Photobucket. Then hit save and your background should be added.  Then hit save again and you should be able to view it.  I hope I explained this well enough for everyone to understand, but feel free to ask questions in the comments if something is confusing and I will go back in and fix/add things.  Good luck!


5 comments:

  1. oh my confusing! I will have to try this sometime and guarantee I will be asking questions. You are truly amazing! :)

    ReplyDelete
  2. This is awesome! I'm totally going to try it.

    ReplyDelete
  3. Apparently it didn't go smoothly for Nicole, so good luck Alison!

    ReplyDelete
  4. Man I tried this and dont get it. How do you get it so that you can move the stuff around in paint? I must've downloaded it wrong? Confusing.

    ReplyDelete
  5. If you paste a new thing into your "background" image, you can move it until you click on something else. GIMP is actually easier once you get used to it.

    ReplyDelete

Related Posts with Thumbnails