Welcome Guest ( Log In | Register )



 
 Reply to this topicStart new topic
> Using Blogger To Add Content, Can I get rid of the header?
frameworker
post Jun 19 2008, 11:18 PM
Post #1


Newbie [ Level 1 ]
Group Icon

Group: Members
Posts: 7
Joined: 12-June 08
Member No.: 30,923
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.
Go to the top of the page
 
+Quote Post
faulty.lee
post Jun 20 2008, 03:45 AM
Post #2


Premium Member
Group Icon

Group: [HOSTED]
Posts: 495
Joined: 5-November 06
Member No.: 17,016
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.
Go to the top of the page
 
+Quote Post
Snake
post Jun 20 2008, 04:17 PM
Post #3


Newbie [ Level 2 ]
Group Icon

Group: Members
Posts: 17
Joined: 16-June 08
From: USA
Member No.: 31,005
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
Go to the top of the page
 
+Quote Post
faulty.lee
post Jun 20 2008, 06:15 PM
Post #4


Premium Member
Group Icon

Group: [HOSTED]
Posts: 495
Joined: 5-November 06
Member No.: 17,016
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.
Go to the top of the page
 
+Quote Post
miCRoSCoPiC^eaRt...
post Jun 20 2008, 07:12 PM
Post #5


PsYcheDeLiC dR3aMeR
Group Icon

Group: Admin
Posts: 2,242
Joined: 29-January 05
From: Nakorn Chaisri, Thailand
Member No.: 2,411
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
Go to the top of the page
 
+Quote Post
frameworker
post Jun 20 2008, 10:01 PM
Post #6


Newbie [ Level 1 ]
Group Icon

Group: Members
Posts: 7
Joined: 12-June 08
Member No.: 30,923
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.
Go to the top of the page
 
+Quote Post
faulty.lee
post Jun 21 2008, 03:47 AM
Post #7


Premium Member
Group Icon

Group: [HOSTED]
Posts: 495
Joined: 5-November 06
Member No.: 17,016
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?
Go to the top of the page
 
+Quote Post
faulty.lee
post Jul 16 2008, 12:49 PM
Post #8


Premium Member
Group Icon

Group: [HOSTED]
Posts: 495
Joined: 5-November 06
Member No.: 17,016
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



This post has been edited by faulty.lee: Jul 17 2008, 05:00 AM
Go to the top of the page
 
+Quote Post
xboxrulz
post Jul 17 2008, 02:42 AM
Post #9


Colonel Panic
Group Icon

Group: [MODERATOR]
Posts: 2,788
Joined: 25-March 05
From: Toronto, Ontario, Canada
Member No.: 3,233
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
Go to the top of the page
 
+Quote Post
faulty.lee
post Jul 17 2008, 05:03 AM
Post #10


Premium Member
Group Icon

Group: [HOSTED]
Posts: 495
Joined: 5-November 06
Member No.: 17,016

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

This post has been edited by faulty.lee: Jul 17 2008, 05:05 AM
Go to the top of the page
 
+Quote Post
« Next Oldest · SEO Tools and Software Utilities · Next Newest »
 

Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. Spider Simulator Tool(0)


 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 11th October 2008 - 06:33 AM
Powered By IP.Board 2.2.1 © 2008  IPS, Inc.
Licensed to: Xisto Corporation