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.

5 Design Tips for a Teacher Blog

Setting up my blog was pretty easy but there were a lot of considerations to make. Here I share with you five of the most important design elements that I found on many of the most successful and well-done teacher blogs. These are all simple to implement and really add a professional and friendly look to you page. Over the coming days I will also share step-by-step guides to accomplish each! 

1. A nice background and a pretty header image:

Teri's site is colorful and cute with a vibrant header and color scheme. 

These two elements of your blog are perhaps the most visible of them all. Depending on the template that you use, your header should be 960px wide and around 250px tall. The size is something you can play with, but it should be bright, colorful and inviting. A Cupcake for the Teacher is a premium template design (around $30 from Dreamlike Magic), but with some imagination you can easily create your own header design! Changing them is simple to do and requires no coding.

2. Attractive headers for your side-bar gadgets:

Abby uses a fun font and adorable flags to head each gadget.

If you ventured to Teri's site, then you found that her gadget headers were attractive and organized her site really well. Abby's site, which from what I can tell is not a premium template, has her own headers for the same function! There is no special trick (well there is a little one that I will share in an upcoming post), each of these headers is simply a picture gadget that is placed above the gadget they describe. The "meet babbling abby" gadget image is organized above the profile gadget in Abby's Blogger layout. In my upcoming post, I will share with you how to add your own and how to remove that extra space between your gadget header and the gadget. These headers are a simple way to take more control of how your blog looks!

3. Add a "grab my button" button:

Mrs. McKown has a great button that you can easily grab and use!

Every single teacher site I put in the "keeper pile" has one of these fancy little buttons! Any blogger can add your button to their own blog to show their support and love for you. As you can see, the button for Little Literacy Learners is colorful, attractive and unobtrusive. It can easily fit into any site design yet stands on its own. The typical size is 125 x 125 but they can vary. The important piece here is that little box with code that anyone can simply cut and paste into an HTML Gadget on their blog. Adding this element to your blog is simple and quick and I'll show you how its done next week!

4. Show your blog followers:

Deanna has a strong following and it's easy to join her site.

This one is easy because Blogger gives you the widget. All you have to do is add it to your layout! In addition to RSS feeds and other email subscriptions, showing your followers is a great way to prove "social clout" in addition to just showing off the great folks that follow you. It's also the best way to build a community centered around your blog. It isn't going to help you unless your blog is interesting or informative, but it's a must-have to grow your following and develop a strong and often-read blog! There are other friend/follower features you can add (such as a facebook gadget). Just ask and I'll post a how-to :)

5. Center your post title and date; fonts!:

Allison's blog has post headings and dates centered.

This one was a surprise to me, not because it's difficult to accomplish, but because nearly every major teacher blog has centered posts headings and dates! The font size and colors vary, but take notice of this while visiting your favorite blogs. How many use this? There are many horrible explanations of  how to accomplish this little task, and there is no simple way to do it in the dynamic layout editor. It just takes a few lines of CSS and is quick and painless if done right. Look for them next week along with some other nifty hints! 

Oh, and just a note on font! I know how much we teachers love fun and nifty fonts, but throw away the fancy fonts in your post-body text. They are difficult to read and I haven't found many top blogs that uses anything other than the basic fonts. I'm even contemplating changing my Courier New font to Veranda or maybe just Times New Roman.

 

Happy blogging and happy summer! If you have a specific request for your blog, leave a comment. I'm a tech-savvy + teacher and will try to help where and when I can! I'll be sharing guides for each of the things above and pretty much anything else I come across or add to my own blog.

Cheers and good luck!

How to start a blog?

Well, here it is, my very own blog! I'm new at this but there is a wealth of great examples, tutorials and other things to get me started. The internet can be a great place and I hope to find some new colleagues in the world of education (among other things).

That's about it for this post. I'm sure that not many people are reading quite yet :). I think this is one of those things you look back on, after a  good amount of time, and think about where you were and why you decided to do what you did. As my cat, Zooba, stares at me from atop the computer table on this HOT day, I get the feeling that I should be outside enjoying the weather!

Summer is just about here, but there is still work to be done. Funny, it seems that while contrary to popular opinion, a teacher's work is never done! Cheers to those who have stumbled upon this site or are taking a look backwards.

Cheers to you and best of luck!