Hiding the Blogger Menu Bar
So, we love Blogger, but maybe we think the blogger menu bar (see the black bar at the top of this site) looks cluttered and distracting. Here is a hack that my friend Jason Hill taught me. You can see that he also uses it on his blog. I just put it on our family site and it works great. He did caution, however, that is is a "big" hack and should be used with caution. I don't take any responsibility for this not working or breaking something else, but it is easy enough to try.
Removing the Blogger Menu Bar
1. You will need add two lines of code to your Template and remove one. Go to the Template tab and see the "Edit Current" scrolling text window there.
2. Search this field (using the Edit-Find On This Page from your Internet Explorer browser menu bar) for the text "</style>". If there is more than one, just the last one in the template.
3. Once you have found the last one, enter the following code immediately before the closing style tag:
#b-navbar { height:0px; visibility:hidden; display:none }
Note: this needs to be spelled correctly to work. The character after "height:" and before "px" is a zero, although this font makes it hard to read
4. Now, search for the string the reads <div id="header"> using the Find On This Page feature of your browser.
5. When you find it, replace it with the following:
<div id="header" style="margin-top:5px">
6. Now, for the final edit, you can remove the "Powered by Blogger" logo in the bottom of your site by removing the code that begins as follows:
<p id+"powered-by"
Delete the whole line which ends with a </p> tag.
6. Save changes and republish the blog to see the changes.
Removing the Blogger Menu Bar
1. You will need add two lines of code to your Template and remove one. Go to the Template tab and see the "Edit Current" scrolling text window there.
2. Search this field (using the Edit-Find On This Page from your Internet Explorer browser menu bar) for the text "</style>". If there is more than one, just the last one in the template.
3. Once you have found the last one, enter the following code immediately before the closing style tag:
#b-navbar { height:0px; visibility:hidden; display:none }
Note: this needs to be spelled correctly to work. The character after "height:" and before "px" is a zero, although this font makes it hard to read
4. Now, search for the string the reads <div id="header"> using the Find On This Page feature of your browser.
5. When you find it, replace it with the following:
<div id="header" style="margin-top:5px">
6. Now, for the final edit, you can remove the "Powered by Blogger" logo in the bottom of your site by removing the code that begins as follows:
<p id+"powered-by"
Delete the whole line which ends with a </p> tag.
6. Save changes and republish the blog to see the changes.
posted by Jennifer B. Davis at 5:40 PM
4 Comments:
Nice re-write Jen. I see you tackled the less-than and greater-than character codes, well done!
I think I may have misguided you a little bit on the header div, so I'll try to straighten things out.
What we are trying to do is get rid of the empty space once occupied by the blogger thingy. Look at my site compared to yours and you'll notice that you have successfully hidden that pesky thing, but it is still holding space.
This is where the header div comes in. You want to find the one that looks like this:
<div id="header">
and change it to this (don't add a second one):
<div id="header" style="margin-top:5px">
That will close up the space at the top of the page.
Don't forget to also remove the
closing </div> it looks like you also added one right after the description.
let me know if it goes wonky on ya, I'll be glad to help.
Excelent, I´ve made all the changes without troubles ... for the other hand I´ll tried to post a clock in my blogg, but I pot it on the top and I can not move it any more, by the way, the changes are ok ...
Thanks, I reccomend your blogg to friends of mine.
Regards,
Thanks, Jason for the clarification. I corrected the instructions in the original post.
I have found that each template design has a different format. For instance some do not have a "header," and so you don't even have to do step #4 at all.
thanks for the reply to this post.
goldenslot casino
บาคาร่าออนไลน์
gclub casino
Post a Comment
<< Home