Kaie"s Blog 2.0 beta!
Back to "Top"

My Secret Notebook
 Show "Table of Contents"
Contact Me
Subscribe to my Posts feed
Subscribe to my Comments feed
My Flickr
Back to "Top"
My Secret Notebook
 Show "Table of Contents"
Contact Me
Subscribe to my Posts feed
Subscribe to my Comments feed
My Flickr

Sunday, November 19, 2006

[Blog] Peek-A-Boo Navbar and Google Ajax BlogSearch box

為了使整個版面好看,但又不失支持Blogger的原則,還是要幫Blogger打個廣告,而且發現升級到Blogger beta之後,那個navbar裡頭的"Search Blog"這個功能,相當的不賴,他的Search Result會直接show在原本Blog中的#content-wrapper裡頭,也就是MainPage中,一整個就很像是WordPress所提供的「站內的全文搜尋」功能,個人相當滿意 :)。
※範例:像是搜尋Keyword "blog"的話,所呈現出來的結果就像這樣

因此,我想要的呈現方式便是:將原本固定在版面上頭的navbar的行為設成:「隱藏在上頭看不到,一旦滑鼠移過去的時候,就會出現(還是有幫Blogger作個廣告吧 XD)」,然後將"Search Blog"的功能直接顯示在Sidebar中,方便搜尋 ^_^參考資料來源:
Basang Panaginip -> Setup a Blog: hide or remove the navbar and add blog search box
.動態顯示Navbar的方式如下,只要在template中加入此段css code即可(IE不適用..對於IE的愛用者感到萬分抱歉,請儘速轉移到Firefox...XD):

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

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

.在Sidebar中加入Search Blog的功能,只要新增一個Page Element(HTML/JavaScript),然後加入底下的code:
<form id="searchthis" action="http://YourID.blogspot.com/search" style="display:inline;" method="get">
<input id="b-query" maxlength="255" name="q" size="15" type="text"/>
<input id="b-searchbtn" value="Search" class="blue" type="submit"/>
<br/>By Google (Show result in this Blog)
</form>
至於一些個人化語法的修改,就請參考原著,不再詳述,基本上改上面的size:"Search Box的大小",value:"所要顯示的文字"。

※由於上面那個Blog Search「目前」對於中文字的搜尋似乎還不太準確(給Google一些時間,相信他一定會改善的),於是便需借助"Technorati"這個站的幫忙囉,可是透過他的網站所產生的javascript code,所呈現出來的樣式,並非我想的,於是便作了一些修改,拿掉些我不想要的東西 ^^,source code如下:
<script type="text/javascript">
<!--
drawTREmbed( '<div id="technorati">' +
'<form id="te_s" method="post" action="http://www.technorati.com/search.php">' +
'<input id="te_search" type="text" size="15" name="s" maxlength="255" /> <label for="te_search"> </label> ' +
'<input type=\"submit\" class=\"btn\" value=\"Search\" /> <input type=\"hidden\" name=\"sub\" value=\"searchlet\" /> <input type=\"hidden\" name=\"from\" value=\"http://chenkaie.blogspot.com\" /> <input type=\"hidden\" name=\"cc\" value=\"8hq5ubtxcg\" /> </form>' +
'Powered by <a href="http://www.technorati.com/?cc=8hq5ubtxcg"><img border="0" src="http://static.technorati.com/pix/tn-tiny.gif" alt="Powered by Technorati" /></a>'+
'<br/><a href="http://www.technorati.com/search/http://chenkaie.blogspot.com?cc=8hq5ubtxcg" id="te_lh" target="_blank" >» Blogs that link here</a>' +
'</div>'
);

function drawTREmbed(s){ document.write(s); }
// -->

</script>

9 Comments:

Who: S Class:
When: December 09, 2006 8:05 AM  

technorati 用javascript只是拉慢載入速度而已

參考這裡吧

Who: Tsung-Kai Chen Class:
When: December 09, 2006 11:49 AM  

To S:
您好,小弟不才,從你給的連結裡,看不太懂為何如此..

若只是放個Searchlet在頁面中,但沒有使用到的話,我想Browser應該只是Loading一些短短的HTML語法,呈現在頁面上而已..

可否明確指出為何如此,謝謝..

Who: S Class:
When: December 09, 2006 2:59 PM  

是只loading一些小東西而已沒錯,不過某些用戶連接到technorati速度並不太好
(比如我 囧興~ )

seednet開technorati的速度不是很快,所以在看BLOG的時候,就常常看到一條出來一半的SIDEBAR了 ^__^

Who: Tsung-Kai Chen Class:
When: December 09, 2006 3:11 PM  

To S:
XD..喔,原來是這樣子的呀...我剛好不是seednet所以沒什麼特別感受..cc

但看searchlet那邊的語法,似乎有外連到technorati這個國外站的,也只有底下Link,那張圖而已說(也只有447byte大小的一張gif圖檔)…其它的都是一般HTML語法,都不需外連...所以,好像也有點怪怪的,我也說不出個所以然..或許是我網頁中其它javascript在作怪吧..XD..等我換seednet體驗一下就知道了!

http://static.technorati.com/pix/tn-tiny.gif

Who: Pinocchio Class:
When: February 01, 2007 5:17 PM  

Hi Kaie,

想請教一下,不知為甚麼我的NavBar不能除意隱藏,它不是SHOW在版面就是怎樣也看不見.....

Who: Tsung-Kai Chen Class:
When: February 09, 2007 4:45 PM  

To pinocchio:
我看你的source code,你應該是在template裡頭有引用了某些javascript語法,例如阿土伯網友所作的all in one之類的那種,剛好他有牽扯到navbar的東西,所以導致我所提供的這個語法被蓋掉了,所以失靈了..

Who: Pinocchio Class:
When: February 09, 2007 6:47 PM  

明白了. 謝!

Who: 戰地記者 Class:
When: April 14, 2007 10:33 PM  

Google 有另一個 BlogSearch
中文滿準的,不過會另開視窗!

http://blogsearch.google.com/blogsearch?num=50&bl_url=anchime.blogspot.com&scoring=d&as_q=%E8%BC%AA%E6%B5%81

Who: Tsung-Kai Chen Class:
When: April 16, 2007 8:01 AM  

To 戰地記者:
嗯,試一下,好像還不錯唷…謝謝你提供的資訊!!