又發現了一個可以將blogger.com上方的Navigation bar隱藏起來的語法,隱藏分兩種,第一種是讓Navigation bar永遠消失:

#navbar-iframe {
height:0px;
visibility:hidden;
display:none;}




另一種是讓Navigation bar暫時消失:

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


但第二種mouse over時Navigation bar又會出現,測試在IE是不work的,Firefox則是OK,下面這種隱藏的語法沒辦法把自己的blog標題往上提就是了,兩種都是簡單將程式碼加入template就可以!

Navigation bar自動隱藏版的,經過簡單的修改就可以變得更好用,不過還是Firefox專用啦!

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=50);height:5px}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100);height:30px}

加入深駝色的高度參數height的變化,整個呈現就成了我的blog現在Navigation bar的模樣,除了會自動隱藏,隱藏時頁面上方也不會很大一塊空白。修改了這個地方:

#header-wrapper {
margin:16px 0 0 0;

將header-wrapper的margin參數的第1個數字,也就是標題區塊的上方空隙,由22px減到16px,以求得更好的視覺效果。做完了之後,發覺Navigation bar整個呈現與動態都差不多了

沒有留言:

張貼留言