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

free web hosting
Free Web Hosting > Computers & Tech > Search Engines > SEO Tools and Software Utilities

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

frameworker
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.

 

 

 


Reply

faulty.lee
QUOTE(frameworker @ Jun 20 2008, 07:18 AM) *
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
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.

 

 

 


Reply

Snake
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

Reply

faulty.lee
QUOTE(Snake @ Jun 21 2008, 12:17 AM) *
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.

Reply

miCRoSCoPiC^eaRthLinG
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

Reply

frameworker
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:
CODE
<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.

Reply

faulty.lee
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.
CODE
<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.

CODE
<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?

Reply

faulty.lee
Hi guys, I've updated the code to hide and show the Blogger's Navbar
CODE
<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


Reply

xboxrulz
Astahost has a plethora of hosted scripts if you don't want to tinker with PHP/MySQL code underneath. Wordpress, as others have suggested is a really good choice.

You should try it as well.

xboxrulz

Reply

faulty.lee

Then add these 2 links to your page
CODE
<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://faultylee.blogspot.com/2008/07/blog...gation-bar.html

Reply


Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

(Maximum characters: 10,000)
You have characters left.

Recent Queries:-
  1. get rid of blogger header - 246.61 hr back. (1)
  2. using blogger as a website - 362.95 hr back. (1)
Similar Topics

Keywords : blogger content rid header

  1. Spider Simulator Tool - See your content the way the search engines do (0)



Looking for blogger, add, content, rid, header,

*RANDOM STUFF*





*SIMILAR VIDEOS*
Searching Video's for blogger, add, content, rid, header,
advertisement




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



 

 

 

 

ADD REPLY / Got an Opinion! a humble request :-) RAPID SEARCH! Free Hosting [X]
Express your Opinions, Thoughts or Contribute your information that might help someone here.
Ask your Doubts & Queries to get answers.. "Together, We enlight each other!"
Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.
500MB Space *No Ads*, CPanel, FTP, PHP, MySQL, EMails - 100% FREE