Blog 結構圖與隱藏 NavBar 功能

前一陣子在別人的 blog 有看過介紹，不過當時沒有多加注意。

在 Websites as graphs 輸入您 blog 的網址後，它會以圖形的方式呈現您 blog 的結構。依您 blog 結構的複雜程度不同，所需的時間也不同，您可以看著它慢慢成長、開花。此功能是由 Sala 開發的（email: sala AT aharef DOT info），還提供 sourcecode 。

這是我 blog 的架構圖：


花花綠綠的顏色代表什麼意義呢？該網站下方也有說明：
藍色： for links (the A tag)
紅色： for tables (TABLE, TR and TD tags)
綠色： for the DIV tag
紫色： for images (the IMG tag)
黃色： for forms (FORM, INPUT, TEXTAREA, SELECT and OPTION tags)
橘色： for linebreaks and blockquotes (BR, P, and BLOCKQUOTE tags)
黑色： the HTML tag, the root node
灰色： all other tags

另外，在 Kaie's Blog 發現讓 Blogger 上方 NavBar 暫時隱藏（只在滑鼠移至該位置時出現）的功能。（感謝 Kaie 的教學與分享）

只要加上這段 CSS code 即可：

#navbar-iframe{
opacity:0.0;
filter:alpha(Opacity=0);
}

#navbar-iframe:hover{
opacity:1.0;
filter:alpha(Opacity=100, FinishedOpacity=100);
}

教學文章
[Blog] Peek-A-Boo Navbar and Google Ajax BlogSearch box @ Kaie's Blog