Removing Blogger Widgets/Gadgets

Blogger holds many little tidbits of useful knowledge deep in its core. It doesn't take a master to pull them out and put them to use, but it does take a keen eye. I couldn't even begin to count how many times I had removed a complete code from my Blogger template and realized well after the fact that I may actually need it again with no way to put it to right unless I uploaded my XML from the last save (usually several months prior).

  

Blogger holds many little tidbits of useful knowledge deep in its core. It doesn't take a master to pull them out and put them to use, but it does take a keen eye. I couldn't even begin to count how many times I had removed a complete code from my Blogger template and realized well after the fact that I may actually need it again with no way to put it to right unless I uploaded my XML from the last save (usually several months prior).

When I became a designer my aim was to not only create beautiful designs but to help prevent my clients (or anyone else) from having to constantly spend money tweaking or adding and removing. Most of you all are relatively seasoned when it comes to adding and removing the widgets in your layout but I know several of you have asked about the ones that appear to be stuck; such as the header or attribution.  

 

Well I am here to help you with that! Let's begin! 

 

After I had posted my first tutorial over in a group I belong to on FB, many comments came in thanking me. I randomly posted a comment about how if one is image mapping a header, you don't need to split the stock header and how to turn it off (so to speak.) That really got me thinking so I decided to walk you all through it today! Yay

 

First thing is first, and I cannot say this enough: Back Up Your Blog!

 

I mean, seriously. Just go into your DASHBOARD >> SETTINGS >> BASIC >> and way up top it will say EXPORT. just click it and save it. It only takes a few seconds. Trust me. You should absolutely never play in your template without a very recent backup. I speak from experience!

Moving on.

Now that your blog is backed up, go on ahead and head over to your DASHBOARD >> TEMPLATE >> EDIT HTML. Click anywhere inside the box and  CTRL + F to search. Today we will be working with your header. So you want to type " <HEADER> " (leave out the quotes).

Once you have located the header widget you need to look for the place where it says

" <b:widget id='Header1' locked='true' title='TempZone (Header)' type='Header'> "

 

From here you need to simply change "TRUE" to "FALSE" and save.

Now that you have done all of that, you can go to DASHBOARD >> LAYOUT >> EDIT HEADER and you will see that it now gives you the option of removing it completely! If you ever need or want to re-add it, you can simply go to ADD A WIDGET (gadget, whatever. Nuance.) and add the header right back in.  You can do this with absolutely any gadget/widget that blogger offers and is a wonderful tool for getting rid of unsightly spaces. If you have added an image map directly to the template and still have your header gadget, you may notice a bit of white space up top. By removing both the header and the Blogger stick Nav Bar, you will be able to remove it completely! Yay for clean lines! If you still have a bit of white space, you can head to DASHBOARD >> TEMPLATE >> CUSTOMIZE >> ADVANCED >> ADD CSS and place in this code " #navbar { height: 0px; visibility: hidden; display: none; " and you're good to go.   Easy Peasy, Lemon Squeezy!

  

Now that you have done all of that, you can go to DASHBOARD >> LAYOUT >> EDIT HEADER and you will see that it now gives you the option of removing it completely! If you ever need or want to re-add it, you can simply go to ADD A WIDGET (gadget, whatever. Nuance.) and add the header right back in.

You can do this with absolutely any gadget/widget that blogger offers and is a wonderful tool for getting rid of unsightly spaces. If you have added an image map directly to the template and still have your header gadget, you may notice a bit of white space up top. By removing both the header and the Blogger stick Nav Bar, you will be able to remove it completely! Yay for clean lines! If you still have a bit of white space, you can head to DASHBOARD >> TEMPLATE >> CUSTOMIZE >> ADVANCED >> ADD CSS and place in this code:

#navbar { height: 0px; visibility: hidden; display: none; 

and you're good to go.  

Easy Peasy, Lemon Squeezy!

If you're still looking for some help with your Blogger/Blogspot design, Head on over and check out my custom design packages and let's get started taking your business from "bland" to BRAND today!

Until next time, 

 

  

  

Comment

Elle Ay Esse

I'm Elle, a California girl transplanted to the Midwest with a goal of landing in New Orleans some time in the next five years. I'm self taught in all aspects of design, harking back to the bygone era of MySpace custom flash layouts. I have an eye for pattern and a love for color that makes me a perfect candidate for working as a web designer. Combining my love of design with coding and helping others and I am a natural teacher of all things blog related. My first ever blog was created on AOL Hometowns back n 2003 so I have had a lot of time and experience watching Blog Land grow and evolve and become a place of sharing stories, reviewing products and even making enough money to help support their families.