frameworker 0 Report post Posted June 19, 2008 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 locationI erase the blog's template code and copy and paste my site in its placeI copy and paste the essential Blogger tags and everything in between that makes the blog element workFunctionality 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
faulty.lee 0 Report post Posted June 20, 2008 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 codefunction 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
Snake1405241559 0 Report post Posted June 20, 2008 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 Websiteto 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
faulty.lee 0 Report post Posted June 20, 2008 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
miCRoSCoPiC^eaRthLinG 0 Report post Posted June 20, 2008 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
frameworker 0 Report post Posted June 20, 2008 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
faulty.lee 0 Report post Posted June 21, 2008 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
faulty.lee 0 Report post Posted July 16, 2008 (edited) 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 July 17, 2008 by faulty.lee (see edit history) Share this post Link to post Share on other sites
xboxrulz1405241485 0 Report post Posted July 17, 2008 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 Share this post Link to post Share on other sites
faulty.lee 0 Report post Posted July 17, 2008 (edited) 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 bloghttp://forums.xisto.com/no_longer_exists/ Edited July 17, 2008 by faulty.lee (see edit history) Share this post Link to post Share on other sites
