2009-01-11

簡單地在Blogger安裝「分享書籤」按鈕

當看到網頁上都有加入書籤的按鈕,我也很心動、想在我的部落格放上這些小玩意;但看了幾篇描述、都是應用在無名、Pixnet、天空.....,而非我使用的Blogger。

有趣的是,在網路上發現瘋狂小狼犬在106發表「教你如何在 Google Blogger 上加入書籤按鈕」,他保證若按圖施工會成功;另外,他將語法分成兩部分:一部分是「圖檔」的語法,另一部分是「書籤分享網址」的語法。此兩段式語法是較早之前,在Ressol的2007413文章「【教學】幫Google Blogger 加入書籤按鈕 」內可以看到。可是我照其法安裝後,各家書籤圖示都無法顯示,雖然分享書籤的功能仍然存在。

後來我發現作者所用的圖檔格式是jpg及png,改用gif格式才能顯示(原因未知);另外就語法部分,我找到Angelo在2006924的「加入HemiDemi書籤 for Blogger」文章,他是將「圖檔」及「書籤分享網址」的語法合併放在同一地方,較為簡單,所以我決定採用他的;在書籤圖示部分,則利用已出現在各網頁的小方塊,並將圖檔格式都一律轉成gif。雖然同是使用Blogger,但是仍然有微小的差異、須要調整。

以FunP書籤分享為例,我們可以很容易增加任何「分享書籤」按鈕,其公式是:

<a expr:href='"FunP書籤分享網址?title=" + data:post.title + "&amp;url=" + data:post.url' class="addToolTip" title="Add to FunP" target='_blank'><img style='border:0;' alt="FunP" src="FunP小方格圖示"/></a>


我很滿意這樣的結果,再將已知的中、英文書籤列入,可得結果如上圖所示。

我將自己最常用的FunP及Hemidemi兩個放在最左邊,再來是其他中文、英文網站,最後是已整合的英文網站。

全部「書籤語法」〔第一行"align:"後的英文字,可調整為靠左(left)、置中(center)或靠右(right)〕:


<div style='text-align:left'>加入書籤&#65306;
<div style='text-align:left'><a class='addToolTip' expr:href='&quot;http://funp.com/pages/submit/?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to FunP'><img alt='FunP' src='http://i263.photobucket.com/albums/ii158/tvbullshit/Fraud%20Ring/funP.gif' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://www.hemidemi.com/user_bookmark/new?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to HEMiDEMi'><img alt='HEMiDEMi' src='http://i263.photobucket.com/albums/ii158/tvbullshit/Fraud%20Ring/HEMiDEMi.gif' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://www.google.com/bookmarks/mark?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to Google'><img alt='Google' src='http://i263.photobucket.com/albums/ii158/tvbullshit/Fraud%20Ring/google.gif' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://tw.myweb2.search.yahoo.com/myresults/bookmarklet? title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to Yahoo'><img alt='Yahoo' src='http://i263.photobucket.com/albums/ii158/tvbullshit/Fraud%20Ring/yahookimo.gif' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://bookmark.udn.com/new?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to Udn'><img alt='Udn' src='http://i263.photobucket.com/albums/ii158/tvbullshit/Fraud%20Ring/udn.gif' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://favorites.live.com/quickadd.aspx?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to WindowsLive'><img alt='WindowsLive' src='http://i263.photobucket.com/albums/ii158/tvbullshit/Fraud%20Ring/live.gif' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://myshare.url.com.tw/index.php?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to MyShare'><img alt='MyShare' src='http://i263.photobucket.com/albums/ii158/tvbullshit/Fraud%20Ring/MyShare.gif' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://www.plurk.com/?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to Plurk'><img alt='Plurk' src='http://img.atlaspost.com//albumimages/226402/412303_normal_6c87b.gif' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://cang.baidu.com/do/add?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to Baidu'><img alt='Baidu' src='http://i263.photobucket.com/albums/ii158/tvbullshit/Fraud%20Ring/baidu.gif' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://www.fiigo.com.tw/bookmark/add.php?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to Fiigo'><img alt='Fiigo' src='http://i263.photobucket.com/albums/ii158/tvbullshit/Fraud%20Ring/fiigo.jpg' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://www.push-reporter.com/submit.php?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to push'><img alt='push' src='http://www.im.tv/blog/images/bookmark/yp.gif' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://www.youpush.net/submit.php?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to YouPush'><img alt='YouPush' src='http://img.atlaspost.com//albumimages/226402/412303_normal_dd3cd.gif' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://www.pushba.com/UrlPromotePage.aspx?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to PushBa'><img alt='PushBa' src='http://api.ning.com/files/IyNLC6ZAIJV1M7OxNmM4GynW-d45ce-jAX4HC1E0pEzhY9MuqYKS5N6mBdUjr8DOTJARiEJuvRwbUImbraWkpZJHcBMftTbD/Pushba.gif' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://del.icio.us/post?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to delicious'><img alt='delicious' src='http://i263.photobucket.com/albums/ii158/tvbullshit/Fraud%20Ring/del.gif' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://technorati.com/faves?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to technorati'><img alt='technorati' src='http://i263.photobucket.com/albums/ii158/tvbullshit/Fraud%20Ring/Technorati.gif' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://www.furl.net/storeIt.jsp?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to furl'><img alt='furl' src='http://i263.photobucket.com/albums/ii158/tvbullshit/Fraud%20Ring/Furl.gif' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://digg.com/submit?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to digg'><img alt='digg' src='http://i263.photobucket.com/albums/ii158/tvbullshit/Fraud%20Ring/digg.gif' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://www.reddit.com/submit?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to reddit'><img alt='reddit' src='http://i263.photobucket.com/albums/ii158/tvbullshit/Fraud%20Ring/reddit.gif' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://www.facebook.com/sharer.php?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to facebook'><img alt='facebook' src='http://img.atlaspost.com//albumimages/226402/412303_normal_faec8.gif' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://twitter.com/home/?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to twitter'><img alt='twitter' src='http://img.atlaspost.com//albumimages/226402/412303_normal_db420.jpg' style='border:0;'/></a><a class='addToolTip' expr:href='&quot;http://www.addthis.com/bookmark.php?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Add to AddThis'><img alt='AddThis' src='http://s3.addthis.com/button1-bm.gif' style='border:0;'/></a></div>


整個安裝步驟是:

1. 請先備份你的 「Blogger 範本 HTML」,以防出錯時可以救回來;

2. 勾選「展開小裝置」範本;

3. 在「Blogger 範本 HTML」內,先找到有下面框框內第一行字"post-header-line-1",將它『取代』成下面這個樣子後儲存。

將書籤按鈕放在文章的標題之下

<div class='post-header-line-1'>
<div style='text-align:left'>加入書籤&#65306;
<a expr:href='"http://funp.com/pages/submit/?title=" + data:post.title + "&amp;url=" +
data:post.url' class="addToolTip"
title="Add to FunP" target='_blank'><img style='border:0;' alt="FunP"
src="http://www.taiwanus.net/photo/pics/funp.gif"/></a>
<a expr:href='"http://www.hemidemi.com/user_bookmark/new?title=" + data:post.title +
"&amp;url=" + data:post.url' class="addToolTip"
title="Add to HEMiDEMi" target='_blank'><img style='border:0;' alt="HEMiDEMi"
src="http://www.taiwanus.net/photo/pics/hemidemi.gif"/></a>
<a expr:href='"http://www.google.com/bookmarks/mark?title=" + data:post.title +
"&amp;url=" + data:post.url' class="addToolTip"
title="Add to Goog" target='_blank'><img style='border:0;' alt="Goog"
src="http://www.taiwanus.net/photo/pics/goog.gif"/></a>
<a expr:href='"http://tw.myweb2.search.yahoo.com/myresults/bookmarklet?title=" +
data:post.title + "&amp;url=" + data:post.url' class="addToolTip"
title="Add to Yahoo" target='_blank'><img style='border:0;' alt="Yahoo"
src="http://www.taiwanus.net/photo/pics/yahoomyweb.gif"/></a>
<a expr:href='"http://bookmark.udn.com/new?title=" + data:post.title + "&amp;url=" +
data:post.url' class="addToolTip"
title="Add to Udn" target='_blank'><img style='border:0;' alt="Udn"
src="http://www.taiwanus.net/photo/pics/udn.gif"/></a>
<a expr:href='"http://favorites.live.com/quickadd.aspx?title=" + data:post.title +
"&amp;url=" + data:post.url' class="addToolTip"
title="Add to WindowsLive" target='_blank'><img style='border:0;' alt="WindowsLive"
src="http://www.taiwanus.net/photo/pics/WindowsLive.gif"/></a>
<a expr:href='"http://myshare.url.com.tw/index.php?title=" + data:post.title +
"&amp;url=" + data:post.url' class="addToolTip"
title="Add to MyShare" target='_blank'><img style='border:0;' alt="MyShare"
src="http://www.taiwanus.net/photo/pics/myshare.gif"/></a>
<a expr:href='"http://cang.baidu.com/do/add?title=" + data:post.title + "&amp;url=" +
data:post.url' class="addToolTip"
title="Add to Baidu" target='_blank'><img style='border:0;' alt="Baidu"
src="http://www.taiwanus.net/photo/pics/baidu.gif"/></a>
<a expr:href='"http://search20.portal20.com.tw/x.jsp?title=" + data:post.title +
"&amp;url=" + data:post.url' class="addToolTip"
title="Add to PChome" target='_blank'><img style='border:0;' alt="PChome"
src="http://www.taiwanus.net/photo/pics/PChome.gif"/></a>
<a expr:href='"http://www.fiigo.com.tw/bookmark/add.php?title=" + data:post.title +
"&amp;url=" + data:post.url' class="addToolTip"
title="Add to Fiigo" target='_blank'><img style='border:0;' alt="Fiigo"
src="http://www.taiwanus.net/photo/pics/fiigo.gif"/></a>
<a expr:href='"http://www.push-reporter.com/submit.php?title=" + data:post.title +
"&amp;url=" + data:post.url' class="addToolTip"
title="Add to push" target='_blank'><img style='border:0;' alt="push"
src="http://www.taiwanus.net/photo/pics/push.gif"/></a>
<a expr:href='"http://www.youpush.net/submit.php?title=" + data:post.title +
"&amp;url=" + data:post.url' class="addToolTip"
title="Add to YouPush" target='_blank'><img style='border:0;' alt="YouPush"
src="http://www.taiwanus.net/photo/pics/yp.gif"/></a>
<a expr:href='"http://cliip.roodo.com/Main.php?title=" + data:post.title +
"&amp;url=" + data:post.url' class="addToolTip"
title="Add to Roodo" target='_blank'><img style='border:0;' alt="Roodo"
src="http://www.taiwanus.net/photo/pics/roodo.gif"/></a>
<a expr:href='"http://del.icio.us/post?title=" + data:post.title + "&amp;url=" +
data:post.url' class="addToolTip"
title="Add to delicious" target='_blank'><img style='border:0;' alt="delicious"
src="http://www.taiwanus.net/photo/pics/delicious.gif"/></a>
<a expr:href='"http://technorati.com/faves?title=" + data:post.title + "&amp;url=" +
data:post.url' class="addToolTip"
title="Add to technorati" target='_blank'><img style='border:0;' alt="technorati"
src="http://www.taiwanus.net/photo/pics/technorati.gif"/></a>
<a expr:href='"http://www.furl.net/storeIt.jsp?title=" + data:post.title + "&amp;url="
+ data:post.url' class="addToolTip"
title="Add to furl" target='_blank'><img style='border:0;' alt="furl"
src="http://www.taiwanus.net/photo/pics/furl.gif"/></a>
<a expr:href='"http://digg.com/submit?title=" + data:post.title + "&amp;url=" +
data:post.url' class="addToolTip"
title="Add to digg" target='_blank'><img style='border:0;' alt="digg"
src="http://www.taiwanus.net/photo/pics/digg.gif"/></a>
<a expr:href='"http://www.addthis.com/bookmark.php?title=" + data:post.title +
"&amp;url=" + data:post.url' class="addToolTip"
title="Add to AddThis" target='_blank'><img style='border:0;' alt="AddThis"
src="http://s3.addthis.com/button1-bm.gif"/></a>
</div>
</div>


書籤的位置,也可調整放在文章的標籤後;如前,先找到第一行的"post-labels",然後將「書籤語法」放在"/b:if"之後。

將書籤按鈕放在文章的標籤之下(要記得加入上述的「書籤語法」)

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
插入上述「書籤語法」
</span>



進一步文章:
用masthead_function在Blogger做成「書籤分享盒」及「物件收納盒」



4 則留言:

  1. 其實痞客幫一直都有,我正在研究^^

    回覆刪除
  2. 我看你的部落格上已經有了!

    回覆刪除
  3. 我們無法剖析您的範本,因為它的結構不完整。 請確定所有的 XML 元素均已正確關閉。
    XML 錯誤訊息: Element type "a" must be followed by either attribute specifications, ">" or "/>".

    您好 我照著您的方法做 老是出現上面的字樣 為什麼
    可否教小弟 拜託您 e-mail: bagoods@hotmail.com 再次拜託您

    回覆刪除
  4. 昨天已經寄email給你,請將你所用的其中一個書籤公式的整個編碼寄給我,或貼在這裡讓我看看。

    回覆刪除

由於Google留言系統與Facebook留言系統互相衝突,若先有Google留言,煩請繼續用此系統留言;反之,若先有Facebook留言,請繼續用Facebook留言。

LinkWithin

Related Posts Plugin for WordPress, Blogger...
Real Time Analytics