首頁說:我也要一排書籤收藏按鈕

online
本文原發表於舊站,以程式匯入於此,尚待修整。

日前無意中發現有位網友在del.icio.us將我的部落格加入其書籤收藏中。這讓我興起了在部落格首頁上設置書籤收藏按鈕工具的念頭。

早先,我已應用石頭成所寫的為部落格加上「加入xx分享書籤」的按鈕工具(並參考丸小管知識:為樂多加入收藏按鈕,使用外連js檔的方式)。石頭成在其原創版本中「提供了兩種工具,一種是只在部落格首頁的邊欄上加上書籤按鈕,第二種是為每一篇文章加上書籤按鈕」。我所採用的是後者。

為了在首頁上也加上類似按鈕,首先想到的是:把上述第一種工具加入首頁邊欄。但這種解決方案會導致首頁載入兩組程式碼,並不經濟。此外,第一種工具並不像其姊妹版那樣具有載入「description」的功能。因此,我試把原程式稍加改寫,並在CSS上動點手腳。試車結果:還好。

發佈這個小技,也許對需要者有點用處,也當作是拋磚引玉。以下內容假設您已讀石頭閒語為部落格加上「加入xx分享書籤」的按鈕工具,並對CSS有基礎概念。

步驟 1. 改寫第二項工具之 javascript (請參閱原程式碼):

a. 刪除原程式第 3 行與第 104 行

b. 將以下這一段插至原程式第 6 行與第 7 行之間。

if (/\/archives\/\d+\.html/.test(document.URL)) {
var dc='main';
}
else{
var dc ='gintro';
}

c. 將原程式第18行中的「'main'」改成「dc」,亦即:

if (ds[i].className == 'main')

if (ds[i].className == dc)

步驟 2. 在CSS表中加入這兩行,其中第一行將影響按鈕區段在首頁的顯示外觀,我們利用這一行的設定來壓制原來寫在「.posted」這個class的設定,尤其水平對齊方式。同時我建議您在這裡設定高度,以免按鈕圖形載入後,才去推擠它下面的其它內容。

.sidebody .posted{}
.gintro{display: none}

步驟 3. 在首頁上預定加入按鈕處填入以下這一行:

<div class="posted"> </div>

步驟 4. 在首頁邊欄任一處加入下這一行,並將灰色部分改寫成您的部落格之描述文字,這行文字將不會顯現在首頁上:

<div class="gintro">部落格略述</div>

最後檢查首頁上出現的按鈕排列是否符合期待。調整的方式請見步驟 2。

結果:見本站首頁。 

後記:

樂多改版升級後多了「樂多書籤」功能。若樂多書籤能壯大起來也是好事一樁。不過,樂多平台上的網誌被收到別的 social bookmark 網站,這對樂多本身而言,應會帶來某種程度的經濟效益。既然改版後的樂多並(尚?)未如石頭成所期待的那樣,將眾家書籤業者的按鈕內建化,那大家只好繼續 外掛,繼續 hack。換一個角度想,網路這玩意兒變化快,BSP再怎麼推出新功能,還是永遠會慢一、二或很多步。莊子所謂之「有涯/無涯」問題也。

by 慕容理深
update: 2007.04.28 03:24
歡迎轉載轉寄(姓名標示-非商業性-禁止改作

Technorati : BSP, blog, css, javascript, 書籤, 樂多
Del.icio.us : , , , , ,

關於本文的 5 則留言

  1. 若您的CSS表中已有名為「gintro」這個class(有這麼巧嗎?)請同時在CSS與javascript (見步驟1.b)以及步驟四之tag中全部改用其它名稱。

  2. 請問如何讓自己寫的文章..有關鍵字..讓別人可以按索引..
    好難喔..我不會用.可以教一下嗎..
    THX

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料