March 28, 2007

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

2 comments:

  1. 用ie6會出不來耶!有解決之道嗎?

    ReplyDelete
  2. 在 Kaie's Blog 原來的文章就有提到,這個功能 IE 不適用,唯一的解決辦法似乎是改用 Firefox,給您參考。

    ReplyDelete