Tuesday, March 11, 2008

FABULOUS TOOL!

Showing html code within your blog can be cumbersome to have it actually show properly. Centricle.com has created a simple encoding tool (click here for the link) to do the work for you. Enter the code you want encoded and click on the encoding button and like magic, it is done. Copy the encoded text into your blog and you are all set!

Note... It will look odd when you paste it, but it will come out correct in the "preview" mode.

I used this for the coding done in the blog SHOW/HIDE BLOG NAVIGATION BAR.

Enjoy!

SHOW/HIDE BLOG NAVIGATION BAR in BLOGGER

With a little html coding you can choose to show or hide your blog navigation bar on your blog page. See the show/hide in the upper right corner of this page.

Here are 3 simple steps to add this to your blog page:

  • Paste the following html code between your <head>...</head> tags:

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


  • Add a Page Element (HTML/Java Script) to your blog page where you would like the show/hide navigation to appear.

  • Paste the following html code within this Page Element

    <span style="cursor:pointer;" onclick="ShowHideNav();">
    Show/Hide Navigation
    <a a style="visibility:hidden;">
    </a></span>


That's it! Enjoy!