Jump breaks!! Blogger 官方版的繼續閱讀(read more)功能

9月9日 blogger 官方部落格已宣佈開放繼續閱讀 (read more)的功能.設定方式很容易,也不需要自行加入程式碼,只要在寫文章時按一下 Jump breaks 鍵,就能在首頁時只顯示摘要,想看全文時,一按下閱讀全文的連結後,才連到該文章的頁面.



Blogger 日前發布了這篇文章You might as well jump裡,就宣佈了read more (閱讀全文)的功能.只是想使用這功能,還要先設定一些條件.

1. 要在 http://draft.blogger.com/裡使用, draft blogger 與 blogger 使用方式一樣, 只是draft blogger裡會有一些即將正式上線的新功能,可以搶先使用.

登入draft blogger後(使用的帳號密碼與blogger一樣), 點選 設定-->基本.


2. 在一般設定裡, 點選 新版文章編輯器 --> 按下 儲存, 不然目前還看不到 jump breaks 的按鈕.


3. 這時在文章頁面的撰寫模式下, 就會看到一個 Jump breaks 的按鈕.


4. 如果想改 閱讀全文的 文字, 可進到 版面配置中的網頁元素裡, 點選 網誌文章 的編輯按鈕.


5. 在這裡, 就可以更改 閱讀全文的 顯示文字.


6. 以後在寫文章時,想使用閱讀全文(read more)的功能, 只要在按下 Jump breaks 按鈕後, 就可以自動把文章切開. 看到的效果如下.


7. 在 HTML 頁面,可以看到其實是插入一行 程式碼 <!-- more -->.


8.發佈文章後, 就可以在首頁看到效果了.


這佪功能對於目前還沒加入改版程式碼的blogger而言,應該是很容易就能使用. 然而模板若是採用非blogger預設版型,且已加入其他的改版程式,有可能運作上會有些不同.

此時可參考這篇文章,做進一步修改.

參考來源:
Creating 'After the jump' summaries
You might as well jump

閱讀全文...

用blockquote css 在引用文字的兩端加入雙引號及首字放大

在文章裡引用一段文字時, 通常我們會用雙引號將這段文字包起來,很多部落格平台都有提供簡單的引用格式(blockquote),用來區別此段文字的不同.之前曾在這篇文章善用及改造 blogger 中的引用文字(blockquote)功能裡,分享用圖片當引用文字背景的做法,其實還有一種在文字的起始與結束分別加入雙引號,而且讓首字放大的效果.


這個做法用到的圖片,最好尺寸要小一點(如15*15),會比較好看.

1.按一下圖片 及 ,另存新檔後,再上傳到自己的網頁空間,然後取得這兩個圖片的網址(如圖片網址1,圖片網址2).

2. 在CSS區,加入以下程式碼
blockquote {
font: Georgia, "Times New Roman",serif;
color: #999;
width: 450px;
background: transparent url(圖片網址2) no-repeat right bottom;
padding-left: 18px;
text-indent: -18px;
}

blockquote:first-letter {
background: transparent url(圖片網址1) no-repeat left top;
padding-left: 18px;
font: italic 1.4em Georgia, "Times New Roman", Times, serif;
}


其中 blockquote 裡的 width 指的是引用區段的寬度.
而 blockquote:first-letter裡,就是設定首字放大的效果,如果想更改,可自行調整font的設定.
italic是斜體, 斜體在引用英文時比較好看,中文看起來就會怪怪的,也可以考慮用粗體Bold.

3. 要引用時,就在這段引用文字的開頭與結尾 分別 以 <blockquote> 及 </blockquote> 包住.



4. 首字粗體(Bold)放大效果如下,

The blockquote element is used to indicate the quotation of a large section of text from another source. Using the default HTML styling of most web browsers, it will indent the right and left margins both on the display and in printed form.

The non-semantic use of the blockquote element purely to indent text is deprecated by the W3C (World Wide Web Consortium) in the current (1999) HTML 4.01 Specification,[1] which is also the basis for XHTML 1.0. The preferred approach is the use of CSS (Cascading Style Sheets).

中文效果:

引用是修辭手法的一種，以引用名人說話﹑名人所提出的事﹑物或俗語﹑格言﹑諺語等，來支持作者的立場。
舉例:
治生之道，莫尚乎勤，故邵子雲：「一日之計在於晨，一歲之計在於春，一生之計在於勤。」言雖近而旨則遠矣。（出自古文《說勤》）

參考來源: Simple Double Quotes

閱讀全文...

搜尋引擎又一招! 微軟推出視覺化搜尋 Bing Visual Search

一般搜尋資料時,都是以文字搜尋,就是輸入關鍵字後,開始等待搜尋結果.如果不知道這名稱,只知道外觀時,該怎麼辦呢? 微軟推出的新搜尋方法,就是用圖片取代文字輸入,直接從圖片去找資料,如方說,輸入歐巴馬,跟直接看到歐巴馬的照片時, 是不是用看的比較直覺?


想使用Visual Search必須先安裝微軟的Sliverlight(關於 Sliverlight 的介紹, 可參考這裡).

1. 安裝好Sliverlight後, 還要先將地區設為美國,一般來說連到首頁時,就會自動判斷地區為台灣(繁體中文),點一下台灣之後, 就可以進入改地區.


2. 連到Visual Search, 目前提供幾個類別.(Entertainment, Famous People, Reference, Shopping, Sports), 或是直接點入任一個圖片集.


3. 每一頁結果都是以圖片顯示,可使用右側的拖拉bar或鍵盤上的上下鍵換頁,也可改變排序方式.


4.滑鼠移到某一張圖片上時,就會出現該圖片的名稱.


5.如果圖片太多,左側還有一些條件可過濾搜索結果.


6. 再點入其中一張圖片(如Ben Affleck),這時就會顯示所有關於Ben Affleck的搜尋結果了.


簡單試用一下,的確與平時的使用習慣不同, 目前圖片資料還不夠多,不過有競爭才會有進步,相信未來的搜尋引擎介面會愈來愈人性化.
閱讀全文...

bit.ly再推更極簡的縮網址服務

落落長的網址,在分享上十分不便, 特別是在有限制字數twitter 或 plurk上, 字數更顯得需要斤斤計較. 知名的縮網址網站bit.ly最近推出一個可以縮更短網址的服務 , 功能都相似, 差別是前置網址只有3個字母,比bit.ly再少2個字母,除了縮網址, 還有簡易的分析流量功能.


在j.mp 頁面, 輸入想縮網址的URL後, 按下 shorten 後, 就可以得到一個系統給的網址.


有時候系統亂數取的網址,反而不好記, 所以也可以考慮自己訂網址.


得到的新網址, 將會有基本的流量分析. 記錄網頁的點擊數, IP, 及從哪些頁面連結過去.


不用註冊就能使用這些功能,統計資訊都是即時更新.


閱讀全文...

錄畫面又錄聲音的 Screenr, 讓分享更聲動,

跟朋友分享一段有趣的影片時,有時候只想強調某一個片段,或是想錄下網頁的操作方式做為教學,就可以考慮這個web 2.0網站.不但可錄下在網頁上操作的動作,也可以直接錄製影片(含聲音,最長5分鐘),錄製後的成品,即可發佈到twitter或是網站.


Screenr的介面設計直覺,一進首頁,就可以看到明顯的錄製鈕. 不過必須要有twitter帳號才能使用,如果擔心安全性,不妨另外申請一個twitter帳號來試玩看看.


1. 按下 Record your screencast now! 後, 會跳出一個Java applet提醒視窗,允許程式執行, 勾選 執行後, 才能使用. 不過, 這個選項 始終信任此發行人的內容 倒不必勾選.


2. 按下執行後, 會跳出一個方框, 可調整想截取畫面的範圍, 調好後,再按下 錄製鈕(紅點) 就可開始錄製畫面上的動作.


3. 最多可錄製5分鐘, 按下 done, 代表錄製完畢, 可試播看看.


4. 影片錄製後,可選擇是否同步將訊息發佈到twitter及發佈到網站.


5. 錄製後的影片,將會有一個網址及提供內嵌程式碼, 可放到自己的部落格上分享.


試錄了在FunP 上的簡單操作及影片,有興趣可以參考.

閱讀全文...

用Google Flu Trends 及 FluTracker 查看流感疫情分佈情況

最近全世界的新型流感H1N1疫情又加溫,台灣也開始出現群聚感染.究竟各地區的疫情情況如何? Google 針對某些國家做了一個流感疫情趨勢圖.


另外這個網站FluTracker整理了全世界目前各國家新流感的病例,標示在地圖上提供查詢.


當疫情愈嚴重,人們的關心程度就愈高,想多了解流感相關資料,有可能就會透過網路以流感為關鍵字找資料, Google 發現這其中有正相關的關係,因此 Google Flu Trends 收集了幾個國家(如 Australia,New Zealand, United States )過去3-5年的流感病例數為基準線,再將關鍵詞搜尋次數繪製成一個流感趨勢圖,並分成幾個等級(Minimal, Low, Moderate, High, 及 Intense),流感相關詞的搜尋頻率愈高,代表流感的活躍程度( flu activity )愈高.

從圖表資料看來,目前 New Zealand 的 flu activity 是屬於高度活躍 (High).淺色曲線代表過去的病例資料.深藍色曲線為最近流感關鍵字的搜尋頻率.


還可以根據搜尋者所在地區的IP, 以地理位置顯示哪個區域的 flu activity.


Google 還提供原始資料下載.


之前介紹過 在Google Map上 追擊H1N1 Swine Flu(新型流感)疫情 , 先前是由Dr. Niman將各國家的H1N1流感整理在Google Maps 上,後來將資料另外整理到FluTracker , 並增加了一些圖表功能,不過目前資料來源是包含官方及非官方.


可以看到數據最近更新的日期及來源.


從Confirmed H1N1 cases by country 地圖上, 可看出各國家的已確定病例 (confirmed cases) 情況.

閱讀全文...

Blogger 推出標籤雲的格式及自選標籤

標籤雲, 就是將文章標籤以雲狀方式排列, 在呈現上可以用最小範圍看到所有標籤.這樣特殊的呈現方式在之前, 是需要改程式碼, 而如今Blogger居然推出了標籤雲的功能,不用改程式,直接選格式就能將原本的清單標籤改為標籤, 如果只想讓某些標籤呈現, 還可以自選標籤.


1.設定方式:到 版面配置--> 網頁元素, 如果原本就有標籤的網頁元素,就按編輯. 如果沒有這元素, 就新增一個網頁元素.


2. 新增標籤的網頁元素


3. 將顯示的選項, 從清單改為雲端.


4. 儲存後,回到部落格,就能看到樣式.


5. 若是標籤數太多, 或只想呈現特定標籤, 則在顯示的選項, 選 己選取的標籤-->再按編輯.

6. 選取要顯示的標籤, 儲存後就能將標籤雲清單改成標籤雲了!


Google 推出這樣的設定功能, 不得不說: 真的很貼心!
閱讀全文...