2007年8月15日 星期三

搜尋Blogspot.com的同好

自己做了一個Google Blogger的網站,也想看看其他以Blogspot.com架設部落誌的網友們的情況。

這個功能可以快速搜尋出你想找的其他blogger網友,他的搜尋標的是每個Blogger的關於我自己的簡介(Profile),從其中去搜尋你想找的網友,分成Interests興趣、Music音樂、Movies電影、Books書籍,這四大項,輸入你想找的關鍵字,就會找到這些網友的資料,比如選擇Books,輸入哈利波特,就會找到和你一樣喜歡哈利波特的同好,或是選擇興趣,輸入日本旅遊,也會找到喜歡到日本旅遊的網友,諸如此類,我覺得是蠻不錯的功能。

如下圖:


不過如果你沒有開放關於你自己的簡介,在這搜尋功能就會找不到,像我自己就沒有開放這個項目,如果想開放,登入後到編輯設定檔,勾選分享我的簡介,然後編輯你的延伸資訊,並在網頁元素中加入"資料",並勾選"分享我的簡介",就可以在這個功能搜尋到有關你的網站了。


其實如果有開放的話,進入"檢視我的完整簡介"時,點選有超連結的文字,都可以此關鍵字搜尋到相關的網友,不過觀察過台灣的使用者,這方面都沒有列的很詳細,甚至沒有仔細去填這些資料(like me),相對的國外的朋友會填得比較完整,不過國外blogger的使用者本來就比較多。


如何增加這個搜尋功能呢?
將以下程式碼新增到網頁元素即可,我有改一些原始碼,用中文的方式顯示,原始程式碼在此,以下是我自己改過的

<script language="javascript">
//results open in new window, to change this
//edit target on selectedIndex e.g. target=_self
//by Improbulus http://www.consumingexperience.com/
// licensed under Creative Commons License
//http://creativecommons.org/licenses/by-nc-sa/2.5/
//- based with thanks on code by Petra Richardson at
//http://www.js-x.com/javascript/?id=1041
//and thanks to G-BOAC of Blogger Forum for the fix
//to open results in a new window properly

function send_search()
{
var searchstring=window.document.searchengine.search.value;

if(window.document.searchengine.engine.selectedIndex == "0")
{
window.document.interests.t.value="i";
window.document.interests.q.value=searchstring;
window.document.interests.action="http://www.blogger.com/profile-find.g";
window.document.interests.target="_blank";
window.document.interests.submit()
;
}

if(window.document.searchengine.engine.selectedIndex == "1")
{
window.document.movies.t.value="m";
window.document.movies.q.value=searchstring;
window.document.movies.action="http://www.blogger.com/profile-find.g";
window.document.movies.target="_blank";
window.document.movies.submit()
;
}

if(window.document.searchengine.engine.selectedIndex == "2")
{
window.document.music.t.value="s";
window.document.music.q.value=searchstring;
window.document.music.action="http://www.blogger.com/profile-find.g";
window.document.music.target="_blank";
window.document.music.submit()
;
}

if(window.document.searchengine.engine.selectedIndex == "3")
{
window.document.books.t.value="b";
window.document.books.q.value=searchstring;
window.document.books.action="http://www.blogger.com/profile-find.g";
window.document.books.target="_blank";
window.document.books.submit()
;
}
}
</script>

<!-- below are the submission forms -->
<form action="http://www.blogger.com/profile-find.g" name="interests" method="get"/>
<input value="i" name="t" type="hidden"/>
<input name="q" type="hidden"/>
</form>

<form action="http://www.blogger.com/profile-find.g" name="movies" method="get"/>
<input value="m" name="t" type="hidden"/>
<input name="q" type="hidden"/>
</form>

<form action="http://www.blogger.com/profile-find.g" name="music" method="get"/>
<input value="s" name="t" type="hidden"/>
<input name="q" type="hidden"/>
</form>

<form action="http://www.blogger.com/profile-find.g" name="books" method="get"/>
<input value="b" name="t" type="hidden"/>
<input name="q" type="hidden"/>
</form>

<!-- below is the multiple search box that you will see on your webpage -->

<form action="javascript:send_search()" name="searchengine" method="post">
輸入關鍵字或句子:
<br/><input name="search" size="15" type="text"/><br/>
選擇分類:
<select name="engine">
<option/>Interests
<option/>Movies
<option/>Music
<option/>Books
</select>
<p>
<input value="Search profiles" name="B1" onclick="javascript:send_search()" type="button"/>
</p>
</form>


其中特別標明藍色的你可以自己改文字及搜尋框的長度(以字元為主)。
呈現出的效果就像我右邊的搜尋一樣,有興趣的人可以試試。

2007年8月13日 星期一

如何讓Firefox的字和IE一樣大?

我在設計BLOG的版面時通常會採用IE來進行,但會比照Firefox呈現出來的畫面作比較來調整,通常發現Firefox的字會比較小,遍詢網路上的解決方法,但是都沒有什麼效果,有使用Java Script的方法,但經測試過沒有效,最後還是得自己想辦法。
v
在blogger上文章的字型,通常是以變數定義,例如 $bodyfont或是 $textFont,
而定義的區段通常在
.post { 或是
#main {,這兩塊
我會設定為
font-size: 9pt;
而非原來的 $bodyfont或是$textFont,或是12px,
感覺用pt受瀏覽器的影響較小。

所以目前我的網站文章區段,在IE或是Firefox看都差不多,至於其他的部分,目前我覺得不是那麼重要,所以就維持原來的設定。

另外這個秘訣應該大家都知道,在Firefox裡按Ctrl+“+”或是Ctrl+”-”,來放大或縮小也是可以,只是每個網站設定都不盡相同,連結到另一個網站又顯得過大或過小,其實也有人設計出放大縮小的外掛,只是我試過一直沒法成功,所以就放棄了。

發現一勞永逸的方法就是設定自己Firefox,不管看什麼網站至少都看得清楚,也不用調整,在工具→選項裡→內容頁面→字型與色彩→進階→最小字型大小,設成13px,就可以了,這是我能接受的最小字了。


其實小字會讓整個網站看起來精緻許多,也很美觀,但是對於文字的閱讀卻很吃力,如何兼顧兩者,網站的微調就顯得相當重要了,慢慢努力吧。

2007年8月11日 星期六

用Grazr Rss輪播器來顯示最新回應、最新文章

Grazr

最近又發現一個好東西,可以用RSS輪播最新文章及最新回應,介面相當多選擇,也適合很多不同的網站空間來使用。

2010.8.19更新,目前這網站已無法使用。



一直以來我想要有一個有Scrollbar(滾動軸)的widget來顯示最新文章與最新回應,因為通常hack所設計的都是有數量限制,如果數目多所佔的頁面空間相對的就會增大,而我又不想用閉合功能將網頁元素給關閉,這個widget可以自訂你所想呈現的大小,讓他可以更適合你版面的編排,試用過後覺得還可以,尤其我喜歡他的介面,一句話,就是漂亮,比起用google reader輪播介面的單調,雖然他也是單色的,但是底色所呈現的光澤感,及hover滑過會變色的模式我都超喜歡,而如何製作自己的輪播器呢?

進入Grazr網站,點選上方Create a Widget,

第1步驟,輸入你的rss網址
文章是http://你的網站網址/feeds/posts/default
回應是http://你的網站網址/feeds/comments/default
按下enter或是update,右方就會出現你的最新文章或回應
第2步驟,Customize your Widget,按下edit,就會展開編輯畫面
選擇theme,選好後,按下apply theme後,才會產生變化
Default View,建議選擇outline,會貼齊邊緣線
Dimensions,選擇長度、寬度,或是勾選右方的size width to fit,自動配合你sidebar的寬度
Font & Text Size,字型與大小,配合你自己的版面來作選擇,順眼就好。
第3步驟,選擇blogger(也可貼在其他的介面上,見圖),再點選sidebar,(如果你想放在文章區也可以,就點Blog Post)下面就會出現程式碼,再將程式碼貼到你新增的網頁元素裡即可。


實際經過測試後,發現最新文章第一次出現的速度大概是15秒,最新回應出現的速度則是11秒,如果已經曾經loading過,再出現就會比較快,但是第一次15秒真的有點久,所以目前我的最新文章還是採用Google Reader提供的輪播,最新回應則用Grazr,因為用原來的方法有時還是會有問題,而且純文字顯示真的不是很優,而早一點的回應,因為篇數的限制也看不到,除非點選特定文章,有些問題網友會重複問,如果可以看到從前的回應,也可以參考一下。

其實不用這個Widget來輪播自己的最新文章除了loading時間較長,也有一個原因是,他按下文章標題後,內容會直接顯示在widget下方,要按”》”鍵才會顯示原本的網頁,邊欄已經很窄了,不適合顯示原有的文章,除非你把widget放在文章區,但這有點畫蛇添足了,而最新回應都很簡短,所以顯示在下方比較不會有問題。

不過要注意的是,這個Grazr所提供的文章與回應,只有25則,如果你的回應真的很多,大概就不適用,不過目前對我是已經足夠了。

另外,這個服務也適用ATOM、RDF、OPML格式,不過我還沒學會,有空再學了再來分享了。

2007年8月6日 星期一

如何將連結以另開視窗呈現

很多人會在blog的邊欄(sidebar),即網頁元素上加上連結清單(links)的欄位,但官方所設的連結欄位通常都是在原來的視窗開啟,除非在網址上按右鍵指定用新視窗開啟連結,(其實這也是我瀏覽網站的習慣,尤其firefox可以分頁瀏覽,減少你等待的空檔,目前IE7也有提供這種服務),如何做呢?
記得先將你的連結清單設好,才能修改。

進入後台→版面配置→修改HTML→勾選"展開小裝置範本",
找到這行<li><a expr:href='data:link.target'><data:link.name/></a></li>
改成
<li><a expr:href='data:link.target' target="_blank"><data:link.name/></a></li>
即可,就是多增加這個 target="_blank"

如果你有多個連結的網頁元素,就每一個都要加上 target="_blank",記得target前面要空一格,譬如我的另一個網站,有設了4個區塊連結,就4個都要改語法。
如何快速找到這個語法的位置呢?可以按Ctrl+F,快速尋找,文字填上 expr:href='data:link.target',然後按下找下一個,就可以迅速找到這段語法的位置,然後再改就行了。

2007年8月4日 星期六

在Comments意見欄留下超連結

分享一個小技巧,很多人或許知道,但常忽略的。

發現很多人在意見欄(post a comment)留下自己的意見時,若有留下推薦網站的網址時,通常都是以純文字方式表現,沒有超連結的作用,這時需要複製網址後再貼上網址列才能連上網站,會降低許多人想看你所推薦或是參考網站的欲望,如果想在純文字的意見欄留下超連結,只要使用下列語法就可以讓讀者按一下滑鼠,就可前往你所要連結的網站,非常的方便。
<a href="網址URL">網址名稱</a>

2007年8月1日 星期三

將Twitter放到你的部落格上

申請了當然就要放到blog上了,方便自己使用,也可以即時和twitter的朋友對話。

進入後台,按下Badges即可跑到設定畫面
2008.4.23更新
請參考將Twitter放到部落格的各種方式一文

申請 Twitter 來 喃喃自語

最近Twitter真是火熱,好玩的新東西我也來申請看看,標榜的是全球性的交友社區,以"What are you doing?"來和世界對話,在網路上,或是用手機、MSN都可以傳達你想傳達的短短的一句話,為什麼是短短呢?因為他有字數限制,最多140個半型字,換算成中文,應該只有70個字。