Ressol's Blog - 舊站

關於部落格
您好,這個網誌已不再更新,僅同步張貼來自新站的文章。
若要閱讀新文章,請您前往 這裡
  • 68083

    累積人氣

  • 0

    今日人氣

    0

    訂閱人氣

【教學】幫Google Blogger 加入書籤按鈕

之前有朋友問到, 如何在 Google Blogger 上加入書籤按鈕,在經過 shen 的解說後,其實有一個叫做 Add This!  的網站,提供了整合書籤的服務,它提供一個整合好的畫面,只要你點選想要加入的書籤網站(如:google)後,就會自動把你帶到該網站(Google)去進行網摘編輯的工作,算是很方便的一個工具。


美中不足的是,Add This! 並沒有整合國內的書籤網站,除了部份網站中文會有問題外,也不支援反白即內容的功能。我想,Add This! 的工程師短時間應該沒空做這些事吧?那只好自己來摸摸看要怎麼改一個支援 Blogger 的書籤語法。做出來的畫面長這個樣子。



首先跟各位說明 Blogger 的限制:
  1. Blogger 首頁的文章是全部展開(沒有摘要),因此,原來的 document.title / location.href 語法再怎麼抓都還是抓到首頁。
  2. 因 Blogger 的特性使然,不能使用 jQuery 來處理這問題.
  3. Blogger 的範本中有自己的語法,直接使用 HTML/javascript 語法去改範本會有問題


本次修改的目標如下:
  •  不論在 Blogger 首頁 / 文章內頁,都有書籤按鈕
  •  可以在首頁將任一文章單獨加入書籤
  •  支援反白即摘要
  •  便於日後修改、調整

這裡先不討論太偏技術的問題,底下直接說明怎麼放上去。

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


3. 尋找 <div class='post-header-line-1'/> 這段字,『換成』下面這個樣子後儲存
<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>

ps. 超連結(<A expr:href ... > ) 的語法請不要去動它,以免被 blogger 誤判

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. 測試是否正常。


修改後的成果,可至小弟的測試站 來看看。

相關的檔案可在這裡下載:
範本修改內容範本修改內容
javascript 內容Javascript 內容

ps. 特別感謝 CGS 介紹的邊框語法 ^^
相簿設定
標籤設定
相簿狀態