<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>This Life of Brian &#187; CSS</title>
	<atom:link href="http://life-of-brian.com/tag/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://life-of-brian.com</link>
	<description>My name is Brian.  Welcome to my life.</description>
	<lastBuildDate>Tue, 03 Jan 2012 03:09:34 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>How to Hide the Navbar on a Blogger Hosted Blog</title>
		<link>http://life-of-brian.com/2009/01/how-to-hide-the-navbar-on-a-blogger-hosted-blog/</link>
		<comments>http://life-of-brian.com/2009/01/how-to-hide-the-navbar-on-a-blogger-hosted-blog/#comments</comments>
		<pubDate>Sun, 04 Jan 2009 21:11:17 +0000</pubDate>
		<dc:creator>Brian</dc:creator>
				<category><![CDATA[CMS Tricks]]></category>
		<category><![CDATA[Nerds at Work]]></category>
		<category><![CDATA[Blogger]]></category>
		<category><![CDATA[CSS]]></category>

		<guid isPermaLink="false">http://life-of-brian.com/?p=1152</guid>
		<description><![CDATA[So you haven&#8217;t made the jump yet from a Blogger blog to a self-hosted one. Do you really need to have that annoying Blogger navbar display at the top of your page?  Well, according to Blogger&#8217;s ToS, you do. But, if you&#8217;re feeling brave, it&#8217;s incredibly simple to hide it. It&#8217;s not very easy to [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://life-of-brian.com/wp-content/uploads/2009/01/blogger-navbar.png"><img class="alignright" title="Blogger Navbar" src="http://life-of-brian.com/wp-content/uploads/2009/01/blogger-navbar-150x150.png" alt="Screenshot pointing out the Blogger Navbar." /></a>So you haven&#8217;t made the jump yet from a Blogger blog to a self-hosted one. Do you really need to have that annoying Blogger navbar display at the top of your page? </p>
<p>Well, according to Blogger&#8217;s ToS, you do. But, if you&#8217;re feeling brave, it&#8217;s incredibly simple to hide it.</p>
<p>It&#8217;s not very easy to physically remove it, but hiding it accomplishes the same goal. Your users will never see it, and it won&#8217;t interfere with any custom layouts you&#8217;ve designed.</p>
<h3>Editing Your Blogger HTML Template<span style="font-weight: normal;"> </span></h3>
<p><a href="http://life-of-brian.com/wp-content/uploads/2009/01/blogger-html-editor.png"><img class="alignright" title="Blogger HTML Editor" src="http://life-of-brian.com/wp-content/uploads/2009/01/blogger-html-editor-300x273.png" alt="Screenshot of the Blogger HTML editor open in a browser window." /></a>In order to hide the navbar, you&#8217;ll need to edit your Blogger site&#8217;s HTML template.</p>
<p>To do so, go to your Blogger dashboard as if you were going to write a post. Then click on the &#8220;Layout&#8221; tab and choose &#8220;Edit HTML.&#8221;</p>
<p>This should bring up a giant box of text that you can edit (see the screenshot to the right).</p>
<p>If you are using the the classic template, you will either have to &#8220;Upgrade Your Template&#8221; (using the instructions that follow) or use slightly different code at the end.</p>
<p>Click on the &#8220;Layout Tab.&#8221; Then, choose &#8220;Customize Design.&#8221; Click the &#8220;Upgrade Your Template&#8221; button and choose the template you want.</p>
<p>Now, click on Layout -&gt; Edit HTML.</p>
<h3>Adding the New Code</h3>
<p><a href="http://life-of-brian.com/wp-content/uploads/2009/01/blogger-updated-html.png"><img class="alignright" title="Updating the Blogger HTML" src="http://life-of-brian.com/wp-content/uploads/2009/01/blogger-updated-html-300x187.png" alt="Add the highlighted line to your template file and click save template." /></a>In order to make the Navbar hidden, you&#8217;ll only need to add one line of code.</p>
<p>The beginning of the text in the textbox (your HTML template) deals with styling information. You want to scroll to <strong>the end</strong> of that. Scroll down until you see the following line:</p>

<div class="wp_syntax"><div class="code"><pre class="xml" style="font-family:monospace;">]]&gt;<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/b:skin<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></div></div>

<p>Just <strong>before</strong> that line, add the following line of code:</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #cc00cc;">#navbar</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">none</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>Then click the Save Template button, reload your blog, and your navbar should be gone!</p>
<p>If you are using the classic template, you&#8217;ll need to do things only slightly different. In your template, search for this line:</p>

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">style</span>&gt;</span></pre></div></div>

<p>Then, add the following line of code <strong>before</strong> that line:</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #cc00cc;">#navbar-iframe</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">none</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>Why the difference? Blogger uses a slightly different mechanism for the navbar in the classic template. It&#8217;s launched in an iframe, which is styled by the id #navbar-iframe. In the customized templates, the navbar is within the main page, so you can hide it directly without having to hide the iframe.</p>
<h3>That&#8217;s It?</h3>
<p>Umm&#8230; yeah.</p>
<p>I&#8217;ve seen some examples online where people included a bit more styling information (zero-ing out the margins and padding, for example). I haven&#8217;t found this to be necessary.</p>
<p>I used the code above and tested it (<a href="http://ubersuperblog.blogspot.com/">example here</a>) in Google Chrome, Firefox, and Internet Explorer and they all seemed to work fine.</p>
<p>Like I mentioned before, this is technically against the Blogger T.O.S., so you&#8217;re following this advice at your own risk. I doubt Google would notice, though, and if your site is popular enough to draw Google&#8217;s attention you should probably have moved onto a self-hosted blog anyway.</p>
]]></content:encoded>
			<wfw:commentRss>http://life-of-brian.com/2009/01/how-to-hide-the-navbar-on-a-blogger-hosted-blog/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

