Adding a Gadget Header

Adding a header to your gadgets on Blogger is really quite simple. In this post, I will guide you through the process of adding a nifty little header to you gadgets and how to remove that extra space that is typically found. This post was actually part of a longer post. After reading a few helpful posts on other sites, I split up the longer one and keep this as short and sweet as possible. Please comment with any questions you may have!  

Adding a header to your blog gadgets overview: It may seem like a fancy trick or some special code, but Blogger couldn't make it easier to add your own headers. In short, you are going to pick an image to use as your header, add a Picture Gadget and insert a tiny piece of CSS code (don't worry, it requires zero knowledge of scripting, coding or other computer languages). It's that quick and that easy.

Typically you want to follow a consistent style and color scheme. You can use the built in Header Title for your gadgets, but what if you want to add some really nice looking graphics or a neat heading font. The first step is to pick what your graphic will be and then create it.  

Adding a header to your blog gadgets step 1: Design
Design your header. If you are art savvy or have the ability to design your header with software like Photoshop or Gimp you should be set. For others there are some great sites out there that will easily help you create a header (google "logo" or "header"). CoolText.com is a nifty little site that allows you to pick a graphic font style, generate it on their website and then download the picture in various formats (jpg or png are what you should go with).  

Considerations: How big should your header be? That depends on your site. Blogger will resize the images for you, but if you want to know exactly what dimensions you are working with, go to your Blogger Dashboard >> Template, click "Customize" and find the "Adjust Widths" button. Here you can adjust the width of your main body, side bar(s), etc.

Adding a header to your blog gadgets step 2:  Add a new Picture Gadget
Adding a new picture gadget is simple as visiting your Blogger Dashboard >> Layout  >> Add a Gadget. Find the "Picture Gadget" , click browse and find the picture you saved to use as your header. Now you can drag this gadget to a spot above the gadget it is to be a header for. Quite simple :)

Adding a header to your blog gadgets step 3:  Removing the extra space. 
Once you have added your gadgets, not it's time to remove that extra white space that exists between your header image and your gadget. In the example below. the image header is far above the gadget.

Removing this white space is easy and only takes a tiny bit of CSS code to accomplish. Don't run away quite yet, this is SUPER SIMPLE to add and easy to understand. There are many tutorials that want you to use the "EDIT HTML" button. Don't do this, as it is unnecessary. The CSS is there for you to edit and can easily be undone if necessary.

To add your code: again we must go to Dashboard >> Template, click "Customize" and find the "Advanced" button. Scroll down to where it says "Add CSS".

You can copy and paste the code below into this box.



#Image1{
margin-bottom: -30px !important;
}

The only adjustment you may have to make is with the number assigned to your Picture Gadget. Blogger will typically assign the first Picture Gadget you add as number 1 (as you see in this example).  The changes to your blog can immediately be seen in the window below. If nothing changed, you can try a different number. For example, replace #Image1 with #Image2.

If you want to find the exact number for a particular Picture Gadget, just go back into your  Blogger Dashboard >> Layout  and click "edit" on your Picture Gadget. In the new window that popped-up, take a look at the very end of the address in the address bar. You will see the word "Image" followed by a number. This is the number you will use.

That's all there is to it! If you have any trouble, don't hesitate to ask or make a comment! I hope this was clear and easy to follow. Sometimes I can get wordy so I did my best to keep it short and precise. Thanks again for reading and please share any tips that you may have found useful.