Jump to content
xisto Community
frameworker

Using Blogger To Add Content Can I get rid of the header?

Recommended Posts

OK, so I'm building my site and want to add a blog element. Not having PHP and MySQL under my belt yet, I figure I'll use Blogger. Here's what I do:
I set up the account on Blogger and create the blog with my site as the location

I erase the blog's template code and copy and paste my site in its place

I copy and paste the essential Blogger tags and everything in between that makes the blog element work
Functionality is great. I can post on blogger, and it updates my site without having to go into the html for every addition.

Layout and look is a nightmare. My question is this: Does anyone know how to do away with Blogger's header that appears at the top of the screen? I can't seem to find the code that makes it appear so I can delete it. In the meantime, it's pushing elements of my site around in an unpleasant way.

I'm also open to "Blogger is a bad idea" posts, if that's the overwhelming sentiment. If there's a better way to do this without knowing server-side code and databases, I'm open to it.

Share this post


Link to post
Share on other sites

Layout and look is a nightmare. My question is this: Does anyone know how to do away with Blogger's header that appears at the top of the screen? I can't seem to find the code that makes it appear so I can delete it. In the meantime, it's pushing elements of my site around in an unpleasant way.

I added this code to my template code
function remove_nbar(){document.getElementById('navbar-iframe').style.display = "none";}<body onLoad='remove_nbar();'>
The bar will appear while the page is still loading, then disappear. I'ven't try to write in a better way to make it not even display at all.

You can find out about the element using firebug, an extension for firefox. It's really a useful tools. A must have tools for web developers.

Share this post


Link to post
Share on other sites

I don't think you can copy Blogger's custom code and remove the top banner.

I think it's custom made software, and you probably have to host it on The Blogger Website

to use that custom made blog software.

You may be able to, but I think you would have to contact the Blogger staff.

If you want no top banner or anything, Try Wordpress.

~ Snake

Share this post


Link to post
Share on other sites

I don't think you can copy Blogger's custom code and remove the top banner.

You can. I'm not changing the Blogger's Code. I'm just adding a bit of javascript to the original template, to detect and hide the element of the top blogger's bar.

Share this post


Link to post
Share on other sites

The above JS method will work 100%. I wonder though, if you pull-in your own CSS using a custom blogger template (those XML files) - and define the same CSS block there, will it override the blogger's navbar... or resorting to JS is the only way to go. My point is, your CSS will load AFTER the default Blogger's CSS. So in effect, it should be able to overcome the one of blogger. Any thoughts on this ?Cheers,m^e

Share this post


Link to post
Share on other sites

Success! Thank you, faulty.lee. I had to brush up a little on my JavaScript to figure out how to impliment it, but it worked. Here's what the code (abbreviated) looked like in the end:

<head> <script type="text/javascript">     function remove_nbar(){     document.getElementById('navbar-iframe').style.display = "none";} </script></head><body onLoad='remove_nbar();'>Content</body>

I would be interested to know if something similar is possible using CSS. Of course, it would be even better if the banner didn't pop up while loading at all. I didn't completely understand the explanation from miCRoSCoPiC, though.

Share this post


Link to post
Share on other sites

frameworker, you're welcome. What miCRoSCoPiC^eaRthLinG said is to apply attribute to the navbar in the template. Normally the user's template is loaded lastly after all the blogger's own content like the navbar. And since CSS is cascaded, which means that anything you set later will override whose set before hand, so by setting "display : none" for navbar in your own template, it would be able to hide it even while loading.

I just tested some code. This will works but might not pass XHTML validation.

<style type='text/css'>#navbar-iframe { display: none; }</style>

You have to put it after the div for outter-wrapper, which is right after start of body tag. Blogger will put the navbar content in between. For the new style sheet to apply, it has to be after the navbar in order to override it.

<body onLoad='remove_nbar();'>  <div id='outer-wrapper'><div id='wrap2'> <-- PUT HERE -->

It works on my site, at least now it won't show the navbar while loading.

Can anyone help with the proper style sheet coding for XHTML?

Share this post


Link to post
Share on other sites

Hi guys, I've updated the code to hide and show the Blogger's Navbar

<script type='text/javascript'> function show_navbar() {	document.getElementById('navbar-iframe').style.display = "block";	document.getElementById('hide_navbar_link').style.display = "block";	document.getElementById('show_navbar_link').style.display = "none"; } function hide_navbar() {	document.getElementById('navbar-iframe').style.display = "none";	document.getElementById('show_navbar_link').style.display = "block";	document.getElementById('hide_navbar_link').style.display = "none"; } </script>

EDIT: Funny, can't seems to have 2 CODE section. Please refer to the next reply
Edited by faulty.lee (see edit history)

Share this post


Link to post
Share on other sites

Then add these 2 links to your page

<a href='java script:show_navb script:hide_navbar();' id='hide_navbar_link' style='position: absolute; top: 30px; left: 10px;color: #000000; font-weight: bold; display:none;'>Hide ^</a>

That's it. You can see the sample here and also the full tutorial on my blog
http://forums.xisto.com/no_longer_exists/
Edited by faulty.lee (see edit history)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.