2008年1月6日 星期日

教你如何在 Google Blogger 上加入書籤按鈕

加入書籤: HemiDemi MyShare Baidu Google Bookmarks Yahoo! My Web Del.icio.us Digg technorati furl

開始步驟如下( 按圖施工保証成功 ^0^! )

1. 先備份你的 Blogger 範本 HTML

2. 修改 Blogger 範本的 HTML,請記得勾選 展開小裝置範本

3. 尋找下面框框內第一行字,將它『取代』成下面這個樣子後儲存

<div class='post-header-line-1'>
<div style="text-align:right">加入書籤:
<a expr:href='"javascript:addBookmark(\"hemidemi\"," + "\"" + data:post.title + "\"" + "," + "\"" + data:post.url + "\"" + ");"' >
<img src="http://blog.pixnet.net/imgs/tags/hemidemi.jpg" title="HemiDemi" alt="HemiDemi" border="0" style="vertical-align:text-bottom;border-width:0px;padding:0"/></a>
<a expr:href='"javascript:addBookmark(\"myshare\"," + "\"" + data:post.title + "\"" + "," + "\"" + data:post.url + "\"" + ");"' >
<img src="http://blog.pixnet.net/imgs/tags/myshare.jpg" title="MyShare" alt="MyShare" border="0" style="vertical-align:text-bottom;border-width:0px;padding:0"/></a>
<a expr:href='"javascript:addBookmark(\"baidu\"," + "\"" + data:post.title + "\"" + "," + "\"" + data:post.url + "\"" + ");"' >
<img src="http://blog.pixnet.net/imgs/tags/baidu.gif" title="Baidu" alt="Baidu" border="0" style="vertical-align:text-bottom;border-width:0px;padding:0"/></a>
<a expr:href='"javascript:addBookmark(\"google\"," + "\"" + data:post.title + "\"" + "," + "\"" + data:post.url + "\"" + ");"' >
<img src="http://blog.pixnet.net/imgs/tags/google.jpg" title="Google Bookmarks" alt="Google Bookmarks" border="0" style="vertical-align:text-bottom;border-width:0px;padding:0"/></a>
<a expr:href='"javascript:addBookmark(\"yahoo\"," + "\"" + data:post.title + "\"" + "," + "\"" + data:post.url + "\"" + ");"' >
<img src="http://blog.pixnet.net/imgs/tags/yahoo.jpg" title="Yahoo! My Web" alt="Yahoo! My Web" border="0" style="vertical-align:text-bottom;border-width:0px;padding:0"/></a>
<a expr:href='"javascript:addBookmark(\"delicious\"," + "\"" + data:post.title + "\"" + "," + "\"" + data:post.url + "\"" + ");"' >
<img src="http://blog.pixnet.net/imgs/tags/delicious.jpg" title="Del.icio.us" alt="Del.icio.us" border="0" style="vertical-align:text-bottom;border-width:0px;padding:0"/></a>
<a expr:href='"javascript:addBookmark(\"digg\"," + "\"" + data:post.title + "\"" + "," + "\"" + data:post.url + "\"" + ");"' >
<img src="http://blog.pixnet.net/imgs/tags/digg.jpg" title="Digg" alt="Digg" border="0" style="vertical-align:text-bottom;border-width:0px;padding:0"/></a>
<a expr:href='"javascript:addBookmark(\"technorati\"," + "\"" + data:post.title + "\"" + "," + "\"" + data:post.url + "\"" + ");"' >
<img src="http://blog.pixnet.net/imgs/tags/technorati.jpg" title="technorati" alt="technorati" border="0" style="vertical-align:text-bottom;border-width:0px;padding:0"/></a>
<a expr:href='"javascript:addBookmark(\"furl\"," + "\"" + data:post.title + "\"" + "," + "\"" + data:post.url + "\"" + ");"' >
<img src="http://blog.pixnet.net/imgs/tags/furl.jpg" title="furl" alt="furl" border="0" style="vertical-align:text-bottom;border-width:0px;padding:0"/></a>
</div>
</div>

4. 新加/修改一個 HTML/JavaScript 網頁元素,將底下內容貼上去後儲存。

<script type="text/javascript">
function getSelectText() {
var d = document;
var desc = '';
if(window.getSelection)desc=window.getSelection();
else if(document.getSelection)desc=document.getSelection();
else if(document.selection)desc=document.selection.createRange().text;
else desc = '';
return desc;
}
function addBookmark(sType, sTitle, sURL) {

//var via = if(document.referrer)via=encodeURIComponent(document.referrer);
var via ='';
var result = '';
var sTitle = encodeURIComponent(sTitle);
var sURL = encodeURIComponent(sURL);
sDesc = encodeURIComponent( getSelectText());

if( sType==("hemidemi")) {
result = 'http://www.hemidemi.com/user_bookmark/new?title='+sTitle+'&url='+sURL+'&description='+sDesc+'&via='+via;
} else if( sType==("myshare")) {
result = 'http://myshare.url.com.tw/index.php?func=newurl&from=mysharepop&url='+sURL+'&desc='+sTitle+'&contents='+sDesc;
} else if( sType==("baidu")) {
result = 'http://cang.baidu.com/do/add?iu='+sURL+'&it='+sTitle+'&dc='+sDesc;
} else if( sType==("google")) {
result = 'http://www.google.com/bookmarks/mark?op=add&bkmk='+sURL+'&title='+sTitle+'&annotation='+sDesc;
} else if( sType==("yahoo")) {
result = 'http://tw.myweb2.search.yahoo.com/myresults/bookmarklet?t='+sTitle+'&u='+sURL+'&d='+sDesc+'&ei=UTF-8';
} else if( sType==("delicious")) {
result = 'http://del.icio.us/post?title='+sTitle+'&url='+sURL+'&notes='+sDesc;
} else if( sType==("digg")) {
result = 'http://digg.com/submit?phase=2&url='+sURL+'&title='+sTitle+'&bodytext='+sDesc;
} else if( sType==("technorati")) {
result = 'http://technorati.com/faves?add='+sURL+'&title='+sTitle;
} else if( sType==("furl")) {
result = 'http://www.furl.net/storeIt.jsp?t='+sTitle+'&u='+sURL+'&r='+escape(via)+'&c='+sDesc+'&p=1';
}

if(result!='') {
window.open( result, 'addbookmak');
}
}
</script>


5. 測試正常即大功告成..增加你想要的書籤按鈕。

3 則留言:

pfge 提到...

我照你的方式貼了編碼,所有的圖片都無法在IE7或Firefox3.1正常呈現,請看http://pfge-pfge.blogspot.com/

但有趣的是,其分享功能是正常。

請問如何讓圖片正常顯示?

pfge 提到...

我已經解決了此一問題,我將圖片jpg檔轉成gif檔就可以呈現了。謝謝你製作的編碼。

麦芽糖 提到...

能否提供QQ书签的代码。

EasyReadMore