Blogspot 改裝 - 導覽列自動隱藏（Mouse Over）

Google 提供的 BSP - Blogspot（Blogger），整體來說不錯用，但還是有些小地方，修改過後會更好，就上最上方的導覽列（Navigation Bar），有時候對排版來說，真的很不搭，移除掉又不方便（登入、搜尋…），不過已經有人把他作成滑鼠觸發的模式（Dropdown），而且只需要增加元件，不需要修改程式碼。

Blogspot 原先的導覽列，選擇不多，常常會影響版面。


安裝後，滑鼠移到頂端導覽列就會列出。


移開滑鼠後，導覽列又會自動收合。


安裝方式為增加網頁元素（新增小工具→HTML/JavaScript）


填入以下程式碼

<!-- Dropdown Navbar -->
<!-- 支援 Firefox 2~ , Opera 9~, Chrome 2~, Safari 3~, IE7 (strict mode) -->
<style type="text/css">
#navbar {
    display: inline;
    width: 100%;
    position: absolute;
    background-color: transparent;
    top: -30px;
    left: 0px;
    height: 60px;
    z-index: 999999;
}
#navbar:hover {
    top: 0px;
    height: 30px;
}
</style>

<!-- IE7 之前版本修正 -->
<!--[if lt IE 7]>
<style type="text/css">
#navbar {
    height: 30px;
    top: 0px;
}
</style>
<script type="text/javascript">
var navbar = document.getElementById('navbar');
if (navbar) {
    navbar.onmouseover = function() {
        navbar.style.top = '0px';
        navbar.style.height = '30px';
    }
    navbar.onmouseout = function() {
        navbar.style.top = '-30px';
        navbar.style.height = '60px';
    }
    if (navbar.captureEvents) {
        navbar.captureEvents(Event.MOUSEOVER);
        navbar.captureEvents(Event.MOUSEOUT);
    }
    navbar.onmouseout();
}
</script>
<![endif]-->

<!-- IE8 與之後版本修正 -->
<!--[if gte IE 8]>
<style type="text/css">
#navbar {
    position: fixed;
    top: 0px;
    height: 30px;
}
#navbar div {
    display: none;
}
</style>
<script type='text/javascript'>
var navBar = document.getElementById('navbar');
if (navBar) {
    navBar.onmouseover = function() {
        var navBar1 = document.getElementById('Navbar1');
        if (navBar1) navBar1.style.display='block';
    };
    navBar.onmouseout = function() {
        var navBar1 = document.getElementById('Navbar1');
        if (navBar1) navBar1.style.display='none';
    };
}
</script>
<![endif]-->
<!-- End Dropdown Navbar -->

標題可以不填（空白），內容為程式碼，最後按 [儲存] 就完成了。