Blogger Blogs: Whole Backgrounds, Transparent Headers, and Links in Headers

The lovely and amazing Hannah from in Neverland, who I love and whose blog I love to pieces (I'm serious, she's awesome, if you don't follow her, go right ahead!!), and I are doing like a "code swap", sort of. She's going to be doing a post about doing a sticky sidebar (and, I believe, some other things) which I'll leave a link to when she gets around to it, and then I'm going to be covering several topics for her... and for you! :)

First off, we're going to cover... WHOLE BACKGROUNDS.

Like backgrounds covering the whole background instead of having a repeating picture?

Yeah.

First off, if you're just wanting a pattern, just make a seamless pattern and enter it as a background in your template editor. Yeah, easy peasy.

But otherwise? We're going to need to go code level. Oh yeah.

*WARNING WARNING*
This background only works with Ethereal Templates. Be warned.

We're going to have two sets of directions: 1. how to make the background and 2. how to apply it.

How to make your background:

I use Gimp, which is the easiest way. If you don't have GIMP installed, no sweat. Just find a picture that's around 1600x1100. I'll do a little mini tutorial for if you DO have GIMP. ;)

1. Click on the GIMP icon. (the silly little dog...)
2. Click on "file".
3. Click "new".
4. A window will pop up. Make the width "1600" and the height "1100".
5. Click the "advanced options" arrow.
6. Instead of "background color", switch it to "transparency".
7. Click "OK".
8. You'll have your transparent window pop up. This is where you're going to paste your background. Find a background, or make it, via anything you can, and bring it up on GIMP. Then copy it (on the "edit" tab) and paste it onto the transparent window.
9. Save your masterpiece.
10. Viola! Your background is done.

Now we get into the codes. Let's start the fun.

1. Log into your account and click on the blog you want to edit.
2. Click "new post".
3. Get the background that you made on GIMP or wherever into the post.
4. Right click, then click on "Open image in new window".
5. Grab the background's URL.
6. Get out of the post until you're on your blog's mini dashboard.
7. Go to "template".
8. Click "edit HTML". (or whatever... yeah)
9. See this? --> <b:skin>...<b:skin/>  Click the little arrow by it. If it's already opened, that's good. (if it is, it will instead say "<b:skin><![CDATA[/*")
10. Scroll down to this (it should be by the top):

background: $(body.background);

11. We're going to be using this code:

url(BACKGROUND URL HERE) no-repeat center fixed #FFFFFF

12. Replace "BACKGROUND URL HERE" with the URL of your background. An example of a completed code would be: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikR31pE66q4SDKmXAFF_GaxgABCbQKdi-l553B1fzq2jhsJEl0L28cg2QrvdMSnF7bfxmSrBykPd_kMJgVge9ljzZz38zTz20rpwHOquN_RBVceKTby3Tsjjm2dWUdWH4kLo5tqfqc29TU/s1600/roses.jpg) no-repeat center fixed #FFFFFF
13. Place the completed code (as said above) in the code as follows:

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikR31pE66q4SDKmXAFF_GaxgABCbQKdi-l553B1fzq2jhsJEl0L28cg2QrvdMSnF7bfxmSrBykPd_kMJgVge9ljzZz38zTz20rpwHOquN_RBVceKTby3Tsjjm2dWUdWH4kLo5tqfqc29TU/s1600/roses.jpg) no-repeat center fixed #FFFFFF;

So you delete the "$(body.background)" and instead put the code that we made. See? Really simple. :)
13. Click the "preview template" tab to make sure that it worked. If it didn't contact me! :)
14. Viola! You're finished. :)

Now, we're going to move on to... TRANSPARENT HEADERS.

This one's kinda fun. :)

The way I get transparent is from GIMP. They let you make a transparent background for a header or whatever. So you just make it on GIMP. Yeah. Really simple. I might warn that there's some weird thing going on between GIMP and blogger that sometimes makes the transparents act up or make white backgrounds appear to be a light gray instead of white. I don't know what this is. Sometimes things work and sometimes they don't, so you just have to work with it. I've found that sometimes it'll work if I add something onto the transparent header via PicMonkey. I have no idea why. Or if I make a transparent background with nothing on it, add a few things like maybe pictures on PicMonkey, and then add text again via GIMP. It's just a confusing mess that, as designers, we have to sort through.

Moving on...

LINKS IN HEADERS.

Oh my word, love this one, I actually couldn't believe I'd figured it out! :) I actually used a code that mostly everybody else uses for something else and applied it to this.

First off, most of you know the code for getting rid of margins, say, between the post title and date header:

h3.post-title { 

margin-top: -25px !important; 

}

I simply applied this simple CSS code to an HTML gadget with your words written in it. So like this:

#HTML3 {
margin-top: -100px !important;
margin-bottom: 100px !important;
}

The reason I added margin on the bottom is that then the rest of the blog won't come up as high as the words will. If I'm wanting to put the words into the header, I'm going to want to place the HTML gadget right underneath the header, so that I only have to do up and down and some minor left and right margin tweaking.

Most of the work comes from knowing what number your HTML gadget is. All HTML/Javascript gadgets on blogger have numbers. Above I used the example of "HTML3". Some people have a lot, so this gadget of yours might be like HTML18 for all we know. How do we find out what number it is to apply it? That's really easy. We name it. Name your HTML gadget, go into the HTML, then use the blogger search that our lovely new HTML has installed, and randomly click on one of the HTML gadgets that they have there. All of them have a "name ' '" thing, but not all of them have names. If yours did, it would be like "name 'wow'". So that's how you would know what number that was.

This all sounds a little confusing, but once you get the hang of it, it won't be. If you have any questions about anything I'm saying, I'll try and help to make it more simple for you. It doesn't mean you're bad, it just means that you don't understand yet.

So, we've got our HTML gadget underneath the header, we know what number it is (let's say it's HTML1 for comfort), so how do we get it up into the header? I'll do it really easy for you.

1. Go to template.
2. Click customize.
3. Go to CSS.
4. Paste this code:

HTML1 {
margin-top: -100px !important;
margin-bottom: 100px !important;
}

5. Adjust the code as necessary. If it's not high enough, then change the numbers (100) around until the words are exactly where you want them to be.
6. Save template.
7. Viola! :)

Again, if you have any questions, just ask! :)

Until another day, until another post,
Anna