顯示具有 Blogger 標籤的文章。 顯示所有文章
顯示具有 Blogger 標籤的文章。 顯示所有文章
2014-04-25 00:36

利用 Google Script 將 Blogger 備份到 Google Drive

在 Google Drive 中建立『指令碼』



然後選擇『空白專案』



貼上以下程式碼
/*
Ref:
https://developers.google.com/apps-script/reference/drive/drive-app
https://developers.google.com/apps-script/reference/drive/file
https://developers.google.com/apps-script/reference/drive/folder
https://developers.google.com/apps-script/reference/url-fetch/url-fetch-app
https://developers.google.com/apps-script/reference/url-fetch/o-auth-config
https://developers.google.com/apps-script/reference/base/blob
https://developers.google.com/apps-script/reference/utilities/utilities

*/

var _backupKeepAmount = 10;
var _backupFolderName = 'blogger_backup';
var _backupFolder;



function main(){
  var folders = DriveApp.getFoldersByName(_backupFolderName);

  if(folders.hasNext()){
    _backupFolder = folders.next();
  }else{
    _backupFolder = DriveApp.createFolder(_backupFolderName);
  }


  setAuth();

  backupBlogger('{my_blog_1}', '{blog_id}', false);
  backupBlogger('{my_blog_2}', '{blog_id}', false);

  MailApp.sendEmail(Session.getActiveUser().getEmail(), 'Backup Blogger To Google Drive', Logger.getLog());
}


/**
 * @param {String} prefixName 備份檔名的前綴
 * @param {String} blogId
 * @param {Boolean} isBigSize 如果備份的檔案超過 10M,請設為 true
 */
function backupBlogger(prefixName, blogId, isBigSize){
  logMsg('Backup Start', prefixName);


  /* 取得之前的備份清單 */
  var files = _backupFolder.getFilesByType('application/xml');
  var beforeFiles = [];
  while (files.hasNext()) {
    var file = files.next();
    if(file.getName().indexOf(prefixName) == -1){ continue; }

    beforeFiles.push(file);
  }

  beforeFiles.sort(function (a, b) {
    return b.getName().localeCompare(a.getName());
  });


  /* 下載並儲存檔案 */
  var isChange;
  if(isBigSize){
    isChange = downloadAndSaveBigSizeArchiveXml(prefixName, blogId, beforeFiles[0]);
  }else{
    isChange = downloadAndSaveArchiveXml(prefixName, blogId, beforeFiles[0]);
  }

  /*沒有異動結束處理*/
  if(!isChange){ return; }


  /* 刪除舊檔案 */
  var oleFiles = beforeFiles.slice(_backupKeepAmount);
  for(var i=0; i < oleFiles.length; i++){
    oleFiles[i].setTrashed(true);
  }


  logMsg('Backup Complete', prefixName);
}




function logMsg(status, msg){
  Logger.log('%s | %s', status, msg);
}



function setAuth(){
  var scope = "https://www.blogger.com/feeds/";
  var oAuthConfig = UrlFetchApp.addOAuthService("blogger");
  oAuthConfig.setRequestTokenUrl("https://www.google.com/accounts/OAuthGetRequestToken?scope="+scope);
  oAuthConfig.setAuthorizationUrl("https://www.google.com/accounts/OAuthAuthorizeToken");
  oAuthConfig.setAccessTokenUrl("https://www.google.com/accounts/OAuthGetAccessToken");

//  oAuthConfig.setConsumerKey("anonymous");
//  oAuthConfig.setConsumerSecret("anonymous");
}



function getArchiveXmlResponse(blogId){
  var options = {
      "oAuthServiceName" : "blogger",
      "oAuthUseToken" : "always"
  };

  var url = 'https://www.blogger.com/feeds/' + blogId + '/archive';
  var response = UrlFetchApp.fetch(url, options);

  /*下載失敗,錯誤記錄*/
  if(response.getResponseCode() != 200){
    logMsg('Download Failed', response.getAllHeaders().toSource());
    return null;
  }

  return response;
}


function downloadAndSaveArchiveXml(prefixName, blogId, beforeFile){
  var response = getArchiveXmlResponse(blogId);
  if(!response){ return false; }

  var downloadContent = response.getContentText();

  /* 檢查檔案異動 */
  if(beforeFile){
    var content = beforeFile.getBlob().getDataAsString();

    if(beforeFile && Math.abs(content.length -downloadContent.length) < 100){
      logMsg('Not Change', prefixName);
      return false;
    }
  }

  /* 儲存下載 */
  var fileName = Utilities.formatDate(new Date(), "+8", "yyyyMMdd_HHmmss'.xml'");
  _backupFolder.createFile(prefixName + '_' + fileName, downloadContent, 'application/xml');

  return true;
}



function downloadAndSaveBigSizeArchiveXml(prefixName, blogId, beforeFile){
  var response = getArchiveXmlResponse(blogId);
  if(!response){ return false; }


  /* 儲存下載 */
  var fileName = Utilities.formatDate(new Date(), "+8", "yyyyMMdd_HHmmss'.xml'");
  var downloadBlob = response.getBlob();
  downloadBlob.setName(prefixName + '_' + fileName);
  downloadBlob.setContentType('application/xml');
  var downloadFile = _backupFolder.createFile(downloadBlob);


  /* 檢查檔案異動 */
  if(beforeFile && Math.abs(beforeFile.getSize() - downloadFile.getSize() ) < 1000){
    downloadFile.setTrashed(true);
    logMsg('Not Change', prefixName);
    return false;
  }

  return true;
}


修改 {my_blog_1} 及 {blog_id},{my_blog_1} 是備份檔名的前綴,{blog_id} 則可以在文章管理的網址上找到



儲存檔案,並取名為『Backup Blogger To Google Drive』




先來測試一下備份是否能正常執行,請選擇執行的函數為『main』,並按下『執行』,然後先為此程式授權





如果都沒問題,接著來設定排程,選擇『啟動程序』



新增一個觸發程序



選擇執行的函數『main』,然後時間定在晚上 11 點,接著選擇『通知』



這個設定主要是發生錯誤的時候可以寄送通知

2011-07-11 17:43

為 Blogger 的地點標記加上 Google Maps 呈現

Blogger 增加了一個標記地點的功能,但只有標記也不知道能拿來做什麼,後來想想用JS寫了一個呈現的小程式,讓文章中設定的資訊可以直接呈現。

以下程式不支援 IE,因為我不想在我的 Blog 上用 Framework,所以 IE 就沒辦法呈現,哈!只要將以下其中一個的程式碼加在 </body> 之前就可以了。

在[文章]的最[前面]插入地圖
<script type="text/javascript">
function showGoogleMap(pos){
    var w=300,h=300,z=14;
try {
    var postOuter=document.getElementsByClassName(&#039;post-outer&#039;);
    for(var i=0; i&lt;postOuter.length; i++){
        var postLocation=postOuter[i].getElementsByClassName(&#039;post-location&#039;)[0];
        var point=postLocation.getElementsByTagName(&#039;a&#039;)[0];
        if(!point){continue;}
        var mapIframe=&#039;&lt;iframe width=&quot;&#039;+w+&#039;&quot; height=&quot;&#039;+h+&#039;&quot; src=&quot;&#039;+point.href+&#039;&amp;output=embed&amp;iwloc=z&amp;z=&#039;+z+&#039;&quot; frameborder=&quot;0&quot; scrolling=&quot;no&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot;&gt;&lt;/iframe&gt;&lt;br /&gt;&#039;;
        var postBody=postOuter[i].getElementsByClassName(&#039;post-body&#039;)[0];

        switch(pos){
            case &#039;loc-a&#039;:
                postLocation.innerHTML+=mapIframe;
                break;
            case &#039;loc-b&#039;:
                postLocation.innerHTML=mapIframe+postLocation.innerHTML;
                break;
            case &#039;post-a&#039;:
                postBody.innerHTML+=mapIframe;
                break;
            case &#039;post-b&#039;:
            default:
                postBody.innerHTML=mapIframe+postBody.innerHTML;
                break;
        }
    }
}catch(e){}
}
showGoogleMap(&#039;post-b&#039;);
</script>

在[文章]的最[後面]插入地圖
<script type="text/javascript">
function showGoogleMap(pos){
    var w=300,h=300,z=14;
try {
    var postOuter=document.getElementsByClassName(&#039;post-outer&#039;);
    for(var i=0; i&lt;postOuter.length; i++){
        var postLocation=postOuter[i].getElementsByClassName(&#039;post-location&#039;)[0];
        var point=postLocation.getElementsByTagName(&#039;a&#039;)[0];
        if(!point){continue;}
        var mapIframe=&#039;&lt;iframe width=&quot;&#039;+w+&#039;&quot; height=&quot;&#039;+h+&#039;&quot; src=&quot;&#039;+point.href+&#039;&amp;output=embed&amp;iwloc=z&amp;z=&#039;+z+&#039;&quot; frameborder=&quot;0&quot; scrolling=&quot;no&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot;&gt;&lt;/iframe&gt;&lt;br /&gt;&#039;;
        var postBody=postOuter[i].getElementsByClassName(&#039;post-body&#039;)[0];

        switch(pos){
            case &#039;loc-a&#039;:
                postLocation.innerHTML+=mapIframe;
                break;
            case &#039;loc-b&#039;:
                postLocation.innerHTML=mapIframe+postLocation.innerHTML;
                break;
            case &#039;post-a&#039;:
                postBody.innerHTML+=mapIframe;
                break;
            case &#039;post-b&#039;:
            default:
                postBody.innerHTML=mapIframe+postBody.innerHTML;
                break;
        }
    }
}catch(e){}
}
showGoogleMap(&#039;post-a&#039;);
</script>

在[地點]的[前面]插入地圖
<script type="text/javascript">
function showGoogleMap(pos){
    var w=300,h=300,z=14;
try {
    var postOuter=document.getElementsByClassName(&#039;post-outer&#039;);
    for(var i=0; i&lt;postOuter.length; i++){
        var postLocation=postOuter[i].getElementsByClassName(&#039;post-location&#039;)[0];
        var point=postLocation.getElementsByTagName(&#039;a&#039;)[0];
        if(!point){continue;}
        var mapIframe=&#039;&lt;iframe width=&quot;&#039;+w+&#039;&quot; height=&quot;&#039;+h+&#039;&quot; src=&quot;&#039;+point.href+&#039;&amp;output=embed&amp;iwloc=z&amp;z=&#039;+z+&#039;&quot; frameborder=&quot;0&quot; scrolling=&quot;no&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot;&gt;&lt;/iframe&gt;&lt;br /&gt;&#039;;
        var postBody=postOuter[i].getElementsByClassName(&#039;post-body&#039;)[0];

        switch(pos){
            case &#039;loc-a&#039;:
                postLocation.innerHTML+=mapIframe;
                break;
            case &#039;loc-b&#039;:
                postLocation.innerHTML=mapIframe+postLocation.innerHTML;
                break;
            case &#039;post-a&#039;:
                postBody.innerHTML+=mapIframe;
                break;
            case &#039;post-b&#039;:
            default:
                postBody.innerHTML=mapIframe+postBody.innerHTML;
                break;
        }
    }
}catch(e){}
}
showGoogleMap(&#039;loc-b&#039;);
</script>


實際呈現樣式:


2011-04-10 23:46

Facebook 推文按鈕 失效了

之前寫過Blogger 的標題加上 Facebook 官方的推文按鈕這篇文章
最近 blogger 加了新功能用 ajax 換頁
結果 Facebook 推文按鈕在第二頁就完全不會動了

Google 一下找到 保留 Blogger Ajax 換頁功能,觸發自訂 JS 功能做法這篇文章

在範本中加入以下程式碼就好了:
<img onload='if(FB){FB.Share.stopScan();}' src='http://www.blogblog.com/1kt/transparent/white80.png' width='0' />
2011-03-28 02:06

在 Blogger 加上各種推文按鈕(修正Plurk 的Bug)

網友提出了 Plurk 的 bug
說實在的找了半天的文件
Blogger 並沒有可以直接使用的參數
看來又只能依靠 JavaScript 來處理這種鳥問題了

最終版程式碼
在 Blogger 加上各種推文按鈕



CSS 程式碼

/*Social Icon*/
.social{
background:transparent url(http://www.xxxx.com/social_icons.png) 0 0 no-repeat;
/*16*16按鈕的圖片網址*/

display: -moz-inline-box;
display: inline-block;
height:16px;
margin:0 4px;
text-indent:-999999px;
vertical-align:middle;
width:16px;
opacity:0.75;
overflow:hidden;
}
.social:hover{
opacity:1;
}

a.toFacebook{ background-position: 0 0; }
a.toPlurk{ background-position: 0 -16px; }
a.toTwitter{ background-position: 0 -32px; }
a.toTechnorati{ background-position: 0 -48px; }
a.toDelicious{ background-position: 0 -64px; }
a.toBuzz{ background-position: 0 -80px; }
a.toDigg{ background-position: 0 -96px; }
a.toStumbleUpon{ background-position: 0 -112px; }
a.toDesignFloat{ background-position: 0 -128px; }
a.getAtomRSS{ background-position: 0 -144px; }
a.toReader{ background-position: 0 -160px; }

首先打開『版面配置』→『修改HTML』
將『展開小裝置範本』打勾
找到 ]]></b:skin> 將 CSS 的程式貼在上一行
小技巧:所有的瀏覽器都有搜尋功能 (Ctrl + F),只要搜尋 "skin" 就可以找到這行了



HTML 程式碼

找尋 <div class='post-footer'> 這一行
然後向下找尋相對應的 </div>
這裡沒有比較清楚的標示
找起來會比較困難一點
將下面的程式貼在 </div> 之前
<div class='post-footer-line post-footer-line-99'>
 <span class='post-social-icons' name='post-social-icons' expr:t='data:post.title' expr:u='data:post.url' expr:h='data:blog.homepageUrl'></span>
</div>


JavaScript 程式碼

找尋 </body> 這一行,將 JavaScript 的程式貼在上一行
<script type="text/javascript">
var data = [
    {&quot;c&quot;:&quot;toFacebook&quot;, &quot;u&quot;:&quot;http://www.facebook.com/sharer.php?u=$url$&amp;t=$title$&quot;,&quot;t&quot;:&quot;Facebook&quot;},
    {&quot;c&quot;:&quot;toPlurk&quot;, &quot;u&quot;:&quot;http://www.plurk.com/?qualifier=shares&amp;status=$url$ ($title$)&quot;,&quot;t&quot;:&quot;Plurk&quot;},
    {&quot;c&quot;:&quot;toTwitter&quot;, &quot;u&quot;:&quot;http://twitter.com/home?status=$title$ $url$&quot;,&quot;t&quot;:&quot;Twitter&quot;},
    {&quot;c&quot;:&quot;toTechnorati&quot;, &quot;u&quot;:&quot;http://technorati.com/faves?add=$url$ $title$&quot;,&quot;t&quot;:&quot;Technorati&quot;},
    {&quot;c&quot;:&quot;toDelicious&quot;, &quot;u&quot;:&quot;http://del.icio.us/post?url=$url$ $title$&quot;,&quot;t&quot;:&quot;Delicious&quot;},
    {&quot;c&quot;:&quot;toDigg&quot;, &quot;u&quot;:&quot;http://digg.com/submit?phase=2&amp;url=$url$&amp;title=$title$&quot;,&quot;t&quot;:&quot;Digg&quot;},  
    {&quot;c&quot;:&quot;toStumbleUpon&quot;, &quot;u&quot;:&quot;http://www.stumbleupon.com/submit?url=$url$&amp;title=$title$&quot;,&quot;t&quot;:&quot;Stumble Upon&quot;},
    {&quot;c&quot;:&quot;toDesignFloat&quot;, &quot;u&quot;:&quot;http://www.designfloat.com/submit.php?url=$url$&amp;title=$title$&quot;,&quot;t&quot;:&quot;Design Float&quot;},
    {&quot;c&quot;:&quot;toReader&quot;, &quot;u&quot;:&quot;http://www.google.com/reader/link?url=$url$&amp;title=$title$&amp;srcURL=$home$&quot;,&quot;t&quot;:&quot;Google Reader&quot;},
    {&quot;c&quot;:&quot;toBuzz&quot;, &quot;u&quot;:&quot;http://www.google.com/buzz/post?url=$url$&quot;,&quot;t&quot;:&quot;Buzz&quot;},
    {&quot;c&quot;:&quot;getAtomRSS&quot;, &quot;u&quot;:&quot;/feeds/posts/default&quot;, &quot;t&quot;:&quot;Atom / RSS&quot;}   
];


var list=document.getElementsByName(&#039;post-social-icons&#039;);

for (var li=0,ll=list.length; li&lt;ll; li++){
    var title=encodeURIComponent(list[li].getAttribute(&#039;t&#039;));    
    var url=encodeURIComponent(list[li].getAttribute(&#039;u&#039;));    
    var home=encodeURIComponent(list[li].getAttribute(&#039;h&#039;));
    var temp=&quot;分享至 &amp;#65306;&quot;;
    for (var di=0,dl=data.length; di&lt;dl; di++){
        var href=data[di].u.replace(&quot;$title$&quot;,title).replace(&quot;$url$&quot;,url).replace(&quot;$home$&quot;,home);
        temp+=&quot;&lt;a class=&#039;social &quot;+data[di].c+&quot;&#039; href=&#039;&quot;+href+&quot;&#039; title=&#039;分享至 &quot;+data[di].t+&quot;&#039;&gt;&quot;+data[di].t+&quot;&lt;/a&gt;&quot;
    };
    list[li].innerHTML=temp;
};
</script>


JavaScript 原始碼

var data = [
    {"c":"toFacebook", "u":"http://www.facebook.com/sharer.php?u=$url$&t=$title$","t":"Facebook"},
    {"c":"toPlurk", "u":"http://www.plurk.com/?qualifier=shares&status=$url$ ($title$)","t":"Plurk"},
    {"c":"toTwitter", "u":"http://twitter.com/home?status=$title$ $url$","t":"Twitter"},
    {"c":"toTechnorati", "u":"http://technorati.com/faves?add=$url$ $title$","t":"Technorati"},
    {"c":"toDelicious", "u":"http://del.icio.us/post?url=$url$ $title$","t":"Delicious"},
    {"c":"toDigg", "u":"http://digg.com/submit?phase=2&url=$url$&title=$title$","t":"Digg"},  
    {"c":"toStumbleUpon", "u":"http://www.stumbleupon.com/submit?url=$url$&title=$title$","t":"Stumble Upon"},
    {"c":"toDesignFloat", "u":"http://www.designfloat.com/submit.php?url=$url$&title=$title$","t":"Design Float"},
    {"c":"toReader", "u":"http://www.google.com/reader/link?url=$url$&title=$title$&srcURL=$home$","t":"Google Reader"},
    {"c":"toBuzz", "u":"http://www.google.com/buzz/post?url=$url$","t":"Buzz"},
    {"c":"getAtomRSS", "u":"/feeds/posts/default", "t":"Atom / RSS"}   
];


var list=document.getElementsByName('post-social-icons');

for (var li=0,ll=list.length; li<ll; li++){
    var title=encodeURIComponent(list[li].getAttribute('t'));    
    var url=encodeURIComponent(list[li].getAttribute('u'));    
    var home=encodeURIComponent(list[li].getAttribute('h'));
    var temp="分享至 :";
    for (var di=0,dl=data.length; di<dl; di++){
        var href=data[di].u.replace("$title$",title).replace("$url$",url).replace("$home$",home);
        temp+="<a class='social "+data[di].c+"' href='"+href+"' title='分享至 "+data[di].t+"'>"+data[di].t+"</a>"
    };
    list[li].innerHTML=temp;
};


圖片來源:

Social Media Network Icons | Komodo Media
2010-05-19 21:56

在 Blogger 加上各種推文按鈕(最終版)

經過多次的修修改改
我想我應該不會再改了
這裡我只提供我目前的程式碼
詳細教學請至在 Blogger 加上各種推文按鈕



/*Social Icon*/
.social{
background:transparent url(http://www.xxxx.com/social_icons.png) 0 0 no-repeat;
/*16*16按鈕的圖片網址*/

display: -moz-inline-box;
display: inline-block;
height:16px;
margin:0 4px;
text-indent:-999999px;
vertical-align:middle;
width:16px;
opacity:0.75;
overflow:hidden;
}
.social:hover{
opacity:1;
}

a.toFacebook{ background-position: 0 0; }
a.toPlurk{ background-position: 0 -16px; }
a.toTwitter{ background-position: 0 -32px; }
a.toTechnorati{ background-position: 0 -48px; }
a.toDelicious{ background-position: 0 -64px; }
a.toBuzz{ background-position: 0 -80px; }
a.toDigg{ background-position: 0 -96px; }
a.toStumbleUpon{ background-position: 0 -112px; }
a.toDesignFloat{ background-position: 0 -128px; }
a.getAtomRSS{ background-position: 0 -144px; }
a.toReader{ background-position: 0 -160px; }


<div class='post-footer-line post-footer-line-99'><span class='post-social-icons'>
分享至 &#65306;
<a class='social toFacebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot;+ data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='分享至 Facebook'>Facebook</a>
<a class='social toPlurk' expr:href='&quot;http://www.plurk.com/?qualifier=shares&amp;status=&quot;+ data:post.url + &quot; (&quot; + data:post.title + &quot;)&quot;' rel='external nofollow' target='_blank' title='分享至 Plurk'>Plurk</a>
<a class='social toTwitter' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; &quot;+ data:post.url' rel='external nofollow' target='_blank' title='分享至 Twitter'>Twitter</a>
<a class='social toTechnorati' expr:href='&quot;http://technorati.com/faves?add=&quot;+ data:post.url + &quot; &quot; + data:post.title' rel='external nofollow' target='_blank' title='分享至 Technorati'>Technorati</a>
<a class='social toDelicious' expr:href='&quot;http://del.icio.us/post?url=&quot;+ data:post.url + &quot; &quot; + data:post.title' rel='external nofollow' target='_blank' title='儲存至 Delicious'>Delicious</a>
<a class='social toDigg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='分享至 Digg'>Digg</a>
<a class='social toStumbleUpon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='分享至 Stumble Upon'>Stumble Upon</a>
<a class='social toDesignFloat' expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='分享至 Design Float&quot;'>Design Float</a>
<a class='social toReader' expr:href='&quot;http://www.google.com/reader/link?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;srcURL=&quot;+data:blog.homepageUrl' rel='external nofollow' target='_blank' title='分享至 Google Reader'>Google Reader</a>
<a class='social toBuzz' expr:href='&quot;http://www.google.com/buzz/post?url=&quot;+ data:post.url' rel='external nofollow' target='_blank' title='分享至 Buzz'>Buzz</a>
<a class='social getAtomRSS' href='/feeds/posts/default' title='訂閱 Atom / RSS' type='application/atom+xml'>Atom / RSS</a>
</span></div>


圖片來源:

Social Media Network Icons | Komodo Media
2010-05-15 13:05

Blogger 的標題加上 Facebook 官方的推文按鈕

之前協助 Rogan 在他的 Blogger 上加上Facebook 計數推文按鈕
才知到原來沒什麼人寫這樣的文章
今天也為自己的 Blogger 加上推文按鈕
順便寫下教學文


首先先到 Facebook 分享 選好需要的樣式
如果要選擇『自訂網址』請再輸入匡填入 data:post.url
所以你會看像這的 HTML 程式碼:

<a name="fb_share" type="button_count" share_url="data:post.url" href="http://www.facebook.com/sharer.php">分享</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

再來要符合 Blogger 樣版語法必須在 share_url 前面加上 expr:
這樣我們才可以使用 data:post.url 這個樣版變數
再來為了讓 UI 有更清楚的標示再加上 title="分享至 Facebook" 這個屬性
最後修改就會像下面這樣:

<a name="fb_share" type="button_count" expr:share_url="data:post.url" href="http://www.facebook.com/sharer.php" title="分享至 Facebook">分享</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>


打開『版面配置』→『修改HTML』
將『展開小裝置範本』打勾

找到 <h3 class='post-title entry-title'>及 </h3>
小技巧:所有的瀏覽器都有搜尋功能(Ctrl + F),只要搜尋 "post-title" 就可以找到這行了
將 <a name="fb_share"... 這行貼在 </h3> 前面

再去搜尋 </body> 這一行
將 <script src="http://static.ak.fb... 貼在 </body> 前面


這時候就可以先預覽如果沒問題就存檔
這時候應該會看起來會像這樣:


下面是其他人寫的教學:
Blogger + facebook分享計數按鈕
如何在Wordpress或Blogger加上【Google Buzz推文分享按鈕】?
2010-01-27 02:34

將無名的備份檔匯入 Blogger

之前幫 fred 寫了一個搬家的格式轉換器
最近將標籤的解析加進去
原本想將留言的解析也加進去
但 Blogger 一直匯不進去
還出現了格式錯誤的問題
所以並沒有支援留言的轉換

這是用 JavaScript 寫出來的
為了增加效率
我將原本用正規標示式的解析方式
改成以 DOM 的方式解析
但很遺憾的捨棄 IE 的支援

格式轉換器:wretch_to_atom.html
2009-12-21 15:11

Blogger 文章匯入的格式

Blogger 可以接受 Atom 的格式匯入
至於 RSS 的格式就要去找轉換器轉成 Atom 才可以匯入

以下是 Blogeer 匯入時的最簡化的格式

<?xml version='1.0' encoding='UTF-8'?>
<?xml-stylesheet
href="http://www.blogger.com/styles/atom.css"
type="text/css"?
>
<feed xmlns='http://www.w3.org/2005/Atom'
xmlns:openSearch='http://a9.com/-/spec/opensearchrss/1.0/'
xmlns:georss='http://www.georss.org/georss'
>
<id>tag:blogger.com,1999:blog-4</id>
<generator version='7.00' uri='http://www.blogger.com'>Blogger</generator>

<entry>
<id>tag:blogger.com,1999:blog-4.post-2</id>
<published>2009-12-19T23:39:20.281+08:00</published>
<title type='text'>標題</title>
<content type='html'>文章內容</content>
<category scheme='http://www.blogger.com/atom/ns#' term='標籤1'/>
<category scheme='http://www.blogger.com/atom/ns#' term='標籤2'/>
</entry>

<entry>
<id>tag:blogger.com,1999:blog-4.post-2</id>
<published>2009-12-19T23:39:20.281+08:00</published>
<title type='text'>標題</title>
<content type='html'>文章內容</content>
<category scheme='http://www.blogger.com/atom/ns#' term='標籤1'/>
<category scheme='http://www.blogger.com/atom/ns#' term='標籤2'/>
</entry>

</feed>
  • generator:產生器識別,Blogger 只接受自己的標示
  • id:可以重複,但必須符合格式
  • published:發佈時間,格式為 ISO8601
  • title:文章標題
  • content:文章內文,可以允許換行符號"\n",內文的 HTML 必須實體逸出
  • category:標籤
2009-04-14 16:48

改寫 dp.SyntaxHighlighter 中 CSS 的 Highlighter 方式

最近掙扎了很久,考慮要不要用 dp.SyntaxHighlighter 來處理 Blog 中程式碼的 Highlighter,因為之前用的 Iris Syntax Highlighter 已經收起來了,而且在文章撰寫上十分不方便也不直覺,所以花了一點心思改成 dp.SyntaxHighlighter 的模式,但 1.5.1 版還蠻陽春的,花了一點時間做語法增強及檔案瘦身,希望這個套件可以用久一點。

原本 dp.SyntaxHighlighter 中 CSS 的 Highlighter 是用 keyword 的方式去處理的,未定義的 keyword 將不會有 Highlighter,為了得到更好的效果,又必須增加更多的 keyword,實在是很不划算。

所以我改用解析 Syntax 結構的方式去處理 Highlighter 的動作,雖然還不是很完整,但整體的效果比原生好多了。


/**=[ CSS ]===========================================*/
dp.sh.Brushes.CSS = function(){
// 樣式定義
this.CssClass = 'dp-css';
this.Style = '.dp-css .value{color:blue;}' +
'.dp-css .important{color:red;font-weight:bold;}'+
'.dp-css .keyword{color:#7F0055;font-weight:bold;}'+
'.dp-css .func{color:#F55;font-weight:normal;}';
};

dp.sh.Brushes.CSS.prototype = new dp.sh.Highlighter();
dp.sh.Brushes.CSS.Aliases = ['css'];

dp.sh.Brushes.CSS.prototype.ProcessRegexList = function(){
function push(array, value){
array[array.length] = value;
}
var match1,match2,regex1,regex2;

/* 加入註解解析 */
this.GetMatches(dp.sh.RegexLib.MultiLineCComments, 'comments');
/* 加入 !important 解析 */
this.GetMatches(new RegExp('!important', 'g'),'important');

/* 解析屬性區塊 */
// 匹配 '{' 至 '}' 之間的文字
regex1 = new RegExp('\{[^}]+\}', 'gm');
// 匹配 'xxx:xxx[;\n\(!]' 格式的文字
regex2 = new RegExp('([:\\w-\.]+)\\s*:\\s*([^;\n\(!]+)[;\n\(!]', 'gm');
while((match1 = regex1.exec(this.code))){
while((match2 = regex2.exec(match1[0]))){
if(!match2[1]){continue;}
// 匹配屬性名稱
push(this.matches, new dp.sh.Match(
match2[1],
match1.index+match2.index,
'func'
));

// 匹配屬性值
if(match2[2]){
push(this.matches,new dp.sh.Match(
match2[2],
match1.index+match2.index+match2[0].indexOf(match2[2]),
'value'
));
}
}
}

/* 解析選擇器區塊 */
// 匹配 'xxx[,\{\n]' 格式的文字
regex1 = new RegExp('^([\\s\\w\.#*:+-]+)[,\{\n]', 'gm');
while((match1 = regex1.exec(this.code))){
if(!match1[1]){continue;}
push(this.matches, new dp.sh.Match(
match1[1],
match1.index,
'keyword'
));
}
};


效果可察看之前的文章:
IE6 對 visibility 負荷過大的問題[CSS]
IE6 中的最大最小寬度和高度
CSS fixed 定位( FF / IE6 )
利用 !important 修正 IE 與 Firefox 的差異
2008-11-01 17:27

用 CSS 實現 blogger [繼續閱讀]的方法

雖然與白花花所寫的在blogger實現繼續閱讀的作法是用同樣的方法,但為了增加使用上的彈性,我做了不一樣的基本設定,讓任何 HTML Tag 只要套用 fullpost 這個 ClassName 就可以在部分閱覽中隱藏。 在 <b:skin> 中的 CSS 設定:
/*部分隱藏樣式*/
.posts-index .fullpost{
  display:none;
}
在詳細樣版中找到 <data:post.body/> 這行,並修改成以下形式:
<div expr:class='"post-body
     entry-content
     posts-"+data:blog.pageType'>
  <data:post.body/>
  <div style='clear: both;'/> <!-- clear for photos floats -->
<!-- 非單篇顯示時,顯示繼續閱讀 -->
<b:if cond='data:blog.pageType != "item"'>
 <p>
 <b:if cond='data:post.link'>
   <a expr:href='data:post.link'>繼續閱讀...</a>
 <b:else/>
   <a expr:href='data:post.url'>繼續閱讀...</a>
 </b:if>
 </p>
</b:if>
</div>
2007-10-13 21:11

Blogger 排版方式


這是 blogger 的排版方式,雖然不是每個樣式都一樣,但主要都會有這些區塊,在這裡可以讓大家有個參考,如果想知道更明確的排版方式可以用 Firefox 的 DOM 觀察器去瞭解詳細的內容。
2007-10-02 11:39

可惡的 Microsoft IE

這是之前 Blog 在 IE6 中顯示的樣式狀況,很奇怪的多了一條線,在 HTML 中明明就沒有套用樣式,可是那個 div 卻自己套用了上一個父標籤的樣式。


在 Firefox 中沒有這個問題,能夠正常顯示我所設定的樣式。


為了能讓更多的瀏覽者能夠正確的顯示我的網頁,於是我只好另外設計對應 IE6 的樣式,選擇了替代方案。


可是呢?我找別人幫我測試我的網頁,在 IE7 中一樣出現了之前的問題,為了解決這個問題,在網路上找尋相對應的方法,但在胡思乱想的 Blog 中看到了這段話:

話說回來,IE7 的出現,又給網頁設計師們出了個難題,拋開 IE345,以往僅僅要顧及 IE6 和 Firefox 的差異就夠令人鬱悶的了,這又出現了 IE7。一直呼喊著標準啊標準啊,強悍的微軟告訴我們,他們家的 IE 就是標準,什麼 W3C,滾一邊去。


這讓我失去了為 IE7 修改錯誤的動力,就暫時先考量 IE6 和 Firefox 這兩大族群,對於其他不遵守標準的 IE 就暫時不理他吧!
2007-10-01 14:21

設定 Blogger 在 IE 的 CSS

由於我另一個 Blog 在 IE 中有了奇怪顯示錯誤,為了達到親和力信念,我無法忽視這討厭的錯誤。

原本是用 !important 的方法去做,但發現完全沒有用,真奇怪到底是那裡不行,原來 blogger 有自己的設定方式。

只要在給 IE 樣式名稱前加上 _ 就可以了,但如果也有給 Firefox 系列用的樣式,必須將Firefox 的樣式放在 IE 樣式的前面。

.sidebar .widget {
border : 1px dotted #FFFFFF ; /*這是給 Firefox 的樣式*/
_border : 2px dotted #999999 ; /*這是給 IE 的樣式*/
}