23 April 2010

show/hide the blogger navbar

 
*bump*
(originally posted 6 November 2007)
reposted 6 February 2008, 6 November 2008, 6 July 2009, 16 September 2009, 23 November 2009

********************************************

It has been bothering me for a while that my email address is in full view at the top of the page whenever I am logged on. I do realize that it is only viewable by me and that others see their email addresses at the top of the page. However, if I were to log in to blogger or google on a shared computer in a public place, anyone could easily take note of my email address. I get plenty of spam as it is and don't really like the idea of adding even more.

Also, it has come to my attention that the "next blog" link may turn up a blog with really questionable content. I really dislike the idea of linking to unknown drivel. (I don't mind linking to drivel that I KNOW about... ;-))

I have searched and searched for a way to disable the "next blog" link and change the navbar so that the user nickname rather than the email address shows.

I did not find anything about that other than some hacks to remove the navbar entirely. I'm reluctant to do this as it is likely to be a violation of the blogger TOS.

However, I did find a very nice little javascript at Derya's WebResource.axd. I have modified it a little so that the words change depending on whether the navbar is visible or not. The nice thing about this is that it cannot be construed as a violation of the TOS because of the visible link to the blogger navigation bar.

Here is the coding to copy and paste somewhere above <head>:

<script type="text/javascript" language="javascript">
var showHeader=false;
function ShowHideNav()
{
showHeader=!showHeader;
var nav=document.getElementById("navbar-iframe");
if (showHeader)
{
nav.style.visibility="visible";
nav.style.display="block";
}
else
{
nav.style.visibility="hidden";
nav.style.display="none";
}
var nav=document.getElementById("warning");
if (showHeader)
{
// when the navbar is visible, the phrase after innerHTML will be seen
document.getElementById('warning').innerHTML="Please be wary of "next blog" link - there is questionable content on many blogs";
}
else
{
// when the navbar is invisible, the phrase after innerHTML will be seen
document.getElementById('warning').innerHTML="to search the blog; sign in and out of blogger; etc. etc.";
}
var nav=document.getElementById("showit");
if (showHeader)
{
// When the navbar is visible the word will be "Hide "
document.getElementById('showit').innerHTML="Hide ";
}
else
{
// When the navbar is invisible the word will be "Show "
document.getElementById('showit').innerHTML="Show ";
}

}
</script>
<style type="text/css">
#navbar-iframe {
visibility: hidden;
display: none;
}
</style>


And here is the coding to copy and paste somewhere below <body>

<small><span id="showhide" onclick="ShowHideNav();" title="Please be wary of "next blog" link">
<b><u><span id="showit">Show</span> Blogger Navigation Bar
<a href="http://derya-webresource.blogspot.com" title="derya-webresource.blogspot.com">...</a>
</u></b><br />
<span id="warning">to search the blog; sign in and out of blogger; etc. etc.</span></small>


The result is the following phrase when the navbar is invisible:

Show Blogger Navigation Bar
to search the blog; sign in and out of blogger; etc. etc.


that changes to this when the navbar is visible:

Hide Blogger Navigation Bar
Please be wary of "next blog" link - there is questionable content on many blogs


The words "Show" and "Hide" are housed in a span with the spec id="showit". To change those words, go to the first piece of coding and look for var nav=document.getElementById("showit"); and see the notes below.

The second phrase is housed in a span with the spec id="warning". To change those words, go to the coding in the header and look for var nav=document.getElementById("warning"); and see the notes below that.

I hope this all made sense!!