tag:blogger.com,1999:blog-59465307047421309702024-03-06T16:20:07.273+08:00Jax 的工作紀錄除了在整理學習上的經驗,同時也能幫助其他需要的人Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.comBlogger13125tag:blogger.com,1999:blog-5946530704742130970.post-68698866632108871882014-04-25T00:36:00.000+08:002014-04-25T00:36:46.078+08:00利用 Google Script 將 Blogger 備份到 Google Drive在 Google Drive 中建立『指令碼』<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj253QA-OE7-oN9HxbDYF0cVvbeXe5dWHirg__Os-KTGbTc1HkWfpThJGjy3fNnxP-3fnm6l68JH5xn3LvfhhMckPcbttRESsdCEhs_FTeLJ3HmNzUqWsAU_mcdB_AyYy7UdmVpfVpzGetp/s1600/blogger-backup-01.png"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj253QA-OE7-oN9HxbDYF0cVvbeXe5dWHirg__Os-KTGbTc1HkWfpThJGjy3fNnxP-3fnm6l68JH5xn3LvfhhMckPcbttRESsdCEhs_FTeLJ3HmNzUqWsAU_mcdB_AyYy7UdmVpfVpzGetp/s550/blogger-backup-01.png" /></a><br />
<br />
<br />
然後選擇『空白專案』<br />
<a href="http://3.bp.blogspot.com/-P3DtUjfuNwQ/U1k4v4RKuNI/AAAAAAAAM64/dvxVXBsymrY/s1600/blogger-backup-02.png"><img src="http://3.bp.blogspot.com/-P3DtUjfuNwQ/U1k4v4RKuNI/AAAAAAAAM64/dvxVXBsymrY/s550/blogger-backup-02.png" /></a><br />
<br />
<br />
貼上以下程式碼<br />
<pre class="js" name="code">/*
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;
}
</pre><br />
<br />
修改 {my_blog_1} 及 {blog_id},{my_blog_1} 是備份檔名的前綴,{blog_id} 則可以在文章管理的網址上找到<br />
<a href="http://3.bp.blogspot.com/-3RYrRTPfphM/U1k4vkoCZjI/AAAAAAAAM6w/m2i64VNrZ_A/s1600/blogger-backup-03.png"><img src="http://3.bp.blogspot.com/-3RYrRTPfphM/U1k4vkoCZjI/AAAAAAAAM6w/m2i64VNrZ_A/s550/blogger-backup-03.png" /></a><br />
<br />
<br />
儲存檔案,並取名為『Backup Blogger To Google Drive』<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8bONzotuVp3usDNFadI-q9agr4qqbfpQEbyiV6MiUywS4UgTqx7MrOigOdXX_9OAc6c3naJG9ze3K8oAO36z5qmDMeU38HnNodgIQkNGzq9K9f7ldZcVsn6yyAPoaFvS0XAYltrYYPt4-/s1600/blogger-backup-04.png"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8bONzotuVp3usDNFadI-q9agr4qqbfpQEbyiV6MiUywS4UgTqx7MrOigOdXX_9OAc6c3naJG9ze3K8oAO36z5qmDMeU38HnNodgIQkNGzq9K9f7ldZcVsn6yyAPoaFvS0XAYltrYYPt4-/s550/blogger-backup-04.png" /></a><br />
<a href="http://4.bp.blogspot.com/-hJpUV9CeRgI/U1k4w-yZV2I/AAAAAAAAM60/d053hWgWhf8/s1600/blogger-backup-05.png"><img src="http://4.bp.blogspot.com/-hJpUV9CeRgI/U1k4w-yZV2I/AAAAAAAAM60/d053hWgWhf8/s550/blogger-backup-05.png" /></a><br />
<br />
<br />
先來測試一下備份是否能正常執行,請選擇執行的函數為『main』,並按下『執行』,然後先為此程式授權<br />
<a href="http://3.bp.blogspot.com/-XeaoC33U5xE/U1k4xlTxovI/AAAAAAAAM7Y/41G-Ht2yHVY/s1600/blogger-backup-06.png"><img src="http://3.bp.blogspot.com/-XeaoC33U5xE/U1k4xlTxovI/AAAAAAAAM7Y/41G-Ht2yHVY/s550/blogger-backup-06.png" /></a><br />
<a href="http://3.bp.blogspot.com/-9Yuy_iVCBkk/U1k4yKHmq_I/AAAAAAAAM7M/hCkPPJ3SXRo/s1600/blogger-backup-07.png"><img src="http://3.bp.blogspot.com/-9Yuy_iVCBkk/U1k4yKHmq_I/AAAAAAAAM7M/hCkPPJ3SXRo/s550/blogger-backup-07.png" /></a><br />
<a href="http://1.bp.blogspot.com/-k5JwTGNI4dQ/U1k4yPL881I/AAAAAAAAM7Q/gUKGPx-5Lr4/s1600/blogger-backup-08.png"><img src="http://1.bp.blogspot.com/-k5JwTGNI4dQ/U1k4yPL881I/AAAAAAAAM7Q/gUKGPx-5Lr4/s550/blogger-backup-08.png" /></a><br />
<br />
<br />
如果都沒問題,接著來設定排程,選擇『啟動程序』<br />
<a href="http://4.bp.blogspot.com/-YCh0pRaJ1eg/U1k4ylaMDwI/AAAAAAAAM7w/6a0rTA1ydQM/s1600/blogger-backup-09.png"><img src="http://4.bp.blogspot.com/-YCh0pRaJ1eg/U1k4ylaMDwI/AAAAAAAAM7w/6a0rTA1ydQM/s550/blogger-backup-09.png" /></a><br />
<br />
<br />
新增一個觸發程序<br />
<a href="http://4.bp.blogspot.com/-_NKTo78iMbY/U1k4zOmtrhI/AAAAAAAAM7g/Pa068OrWomg/s1600/blogger-backup-10.png"><img src="http://4.bp.blogspot.com/-_NKTo78iMbY/U1k4zOmtrhI/AAAAAAAAM7g/Pa068OrWomg/s550/blogger-backup-10.png" /></a><br />
<br />
<br />
選擇執行的函數『main』,然後時間定在晚上 11 點,接著選擇『通知』<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWFgI4XXhdgzQ0bEBsVWnbm3twYAS3vda3naZe6VOvG3F1YHagpNQYybtz958Rte9ZqmMxCrgWW0-9DNlLiurRzT1x8dmZruqeD8_2t9RL_cOamKyesmUqu1S7PKaNIINF1BaiMdyrHAyA/s1600/blogger-backup-11.png"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWFgI4XXhdgzQ0bEBsVWnbm3twYAS3vda3naZe6VOvG3F1YHagpNQYybtz958Rte9ZqmMxCrgWW0-9DNlLiurRzT1x8dmZruqeD8_2t9RL_cOamKyesmUqu1S7PKaNIINF1BaiMdyrHAyA/s550/blogger-backup-11.png" /></a><br />
<br />
<br />
這個設定主要是發生錯誤的時候可以寄送通知<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCl3TY66youPD2koRPU-I3l2HfIVpVatmDEDqDBhokG6OikWIUBKU0EQYiq240vjov5W3wOKkOWJRYMdfnKN2cRA2YOVjI8d9Sj08rW62GdBC9ZU0yuaETzFKV5rNezl7FfzTFvIZgFb84/s1600/blogger-backup-12.png"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCl3TY66youPD2koRPU-I3l2HfIVpVatmDEDqDBhokG6OikWIUBKU0EQYiq240vjov5W3wOKkOWJRYMdfnKN2cRA2YOVjI8d9Sj08rW62GdBC9ZU0yuaETzFKV5rNezl7FfzTFvIZgFb84/s550/blogger-backup-12.png" /></a><br />
Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-44483820110398779072011-07-11T17:43:00.003+08:002014-10-08T13:43:31.830+08:00為 Blogger 的地點標記加上 Google Maps 呈現Blogger 增加了一個標記地點的功能,但只有標記也不知道能拿來做什麼,後來想想用JS寫了一個呈現的小程式,讓文章中設定的資訊可以直接呈現。<br />
<br />
以下程式不支援 IE,因為我不想在我的 Blog 上用 Framework,所以 IE 就沒辦法呈現,哈!只要將以下其中一個的程式碼加在 <strong style="color:red;"></body></strong> 之前就可以了。<br />
<br />
<strong>在[文章]的最[前面]插入地圖</strong><br />
<pre class="js" name="code"><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>
</pre><br />
<strong>在[文章]的最[後面]插入地圖</strong><br />
<pre class="js" name="code"><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>
</pre><br />
<strong>在[地點]的[前面]插入地圖</strong><br />
<pre class="js" name="code"><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>
</pre><br />
<br />
實際呈現樣式:<br />
<a href="http://4.bp.blogspot.com/-0BM7ftCBY98/ThrHVi3pAnI/AAAAAAAANHg/YnGEHPuZ-Fw/s1600/add%2Bgooglemaps%2Bin%2Bblogger%2B1.jpg"><img src="http://4.bp.blogspot.com/-0BM7ftCBY98/ThrHVi3pAnI/AAAAAAAANHg/YnGEHPuZ-Fw/s512/add%2Bgooglemaps%2Bin%2Bblogger%2B1.jpg" /></a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBtEgvWg_I32E8936fT7EWBEBXK25soXxnxr_-I1tV31b3PDFM3Jxe917LwY8VRL-4oPDytZgyF_VM4h8OMyae1zD3TyAwt5cUfoL5tsOoqwk6CVGiZ0TESJtm_qb4IQBeczvtnjCyyzlC/s1600/add+googlemaps+in+blogger+2.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBtEgvWg_I32E8936fT7EWBEBXK25soXxnxr_-I1tV31b3PDFM3Jxe917LwY8VRL-4oPDytZgyF_VM4h8OMyae1zD3TyAwt5cUfoL5tsOoqwk6CVGiZ0TESJtm_qb4IQBeczvtnjCyyzlC/s512/add+googlemaps+in+blogger+2.jpg" /></a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-1050612642494826882011-04-10T23:46:00.000+08:002013-06-10T22:59:46.173+08:00Facebook 推文按鈕 失效了之前寫過<a href="/2010/05/blogger-facebook.html">Blogger 的標題加上 Facebook 官方的推文按鈕</a>這篇文章<br />
最近 blogger 加了新功能用 ajax 換頁<br />
結果 Facebook 推文按鈕在第二頁就完全不會動了<br />
<br />
Google 一下找到 <a target="_blank" href="http://ticore.blogspot.com/2007/06/blogger-ajax-js.html">保留 Blogger Ajax 換頁功能,觸發自訂 JS 功能做法</a>這篇文章<br />
<br />
在範本中加入以下程式碼就好了:<br />
<pre class="xml" name="code"><img onload='if(FB){FB.Share.stopScan();}' src='http://www.blogblog.com/1kt/transparent/white80.png' width='0' />
</pre>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-78143669418442000412011-03-28T02:06:00.002+08:002014-11-30T17:40:49.879+08:00在 Blogger 加上各種推文按鈕(修正Plurk 的Bug)網友提出了 Plurk 的 bug<br />
說實在的找了半天的文件<br />
Blogger 並沒有可以直接使用的參數<br />
看來又只能依靠 JavaScript 來處理這種鳥問題了<br />
<br />
<a href="/2010/05/blogger_19.html">最終版程式碼</a><br />
<a href="/2010/05/blogger.html">在 Blogger 加上各種推文按鈕</a><br />
<br />
<a href="http://4.bp.blogspot.com/-xys0DaYHLn0/S_Qg___be2I/AAAAAAAANHg/xGlHKi5damk/social_icons.png"><img src="http://4.bp.blogspot.com/-xys0DaYHLn0/S_Qg___be2I/AAAAAAAANHg/xGlHKi5damk/social_icons.png" /></a><br />
<br />
<h4>CSS 程式碼</h4><pre class="css" name="code">/*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; }
</pre><br />
首先打開『版面配置』→『修改HTML』<br />
將『展開小裝置範本』打勾<br />
找到 <span style="color: rgb(255, 0, 0);">]]></b:skin></span> 將 CSS 的程式貼在上一行<br />
<span style="color: rgb(255, 0, 0);font-size:85%;" >小技巧:所有的瀏覽器都有搜尋功能 (Ctrl + F),只要搜尋 "skin" 就可以找到這行了</span><br />
<a href="http://1.bp.blogspot.com/_b8lN_UbLoEc/S-6ufim6_yI/AAAAAAAAHZg/nJbSSubYftI/s1600/blogger_social_buttons_code.png"><img src="http://1.bp.blogspot.com/_b8lN_UbLoEc/S-6ufim6_yI/AAAAAAAAHZg/nJbSSubYftI/s512/blogger_social_buttons_code.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5471502454190964514" /></a><br />
<br />
<br />
<h4>HTML 程式碼</h4>找尋 <span style="color: rgb(255, 0, 0);"><div class='post-footer'></span> 這一行<br />
然後向下找尋相對應的 </div><br />
這裡沒有比較清楚的標示<br />
找起來會比較困難一點<br />
將下面的程式貼在 <span style="color: rgb(255, 0, 0);"></div></span> 之前<br />
<pre class="xml" name="code"><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>
</pre><br />
<br />
<h4>JavaScript 程式碼</h4>找尋 <span style="color: rgb(255, 0, 0);"></body></span> 這一行,將 JavaScript 的程式貼在上一行<br />
<pre class="xml" name="code"><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>
</pre><br />
<br />
<h4>JavaScript 原始碼</h4><pre class="js" name="code">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;
};
</pre><br />
<br />
<h4>圖片來源:</h4><a target="_blank" href="http://www.komodomedia.com/blog/2009/06/social-network-icon-pack/">Social Media Network Icons | Komodo Media</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-28194837589167136642010-05-19T21:56:00.007+08:002010-05-27T00:09:33.515+08:00在 Blogger 加上各種推文按鈕(最終版)經過多次的修修改改<br />我想我應該不會再改了<br />這裡我只提供我目前的程式碼<br />詳細教學請至<a href="/2010/05/blogger.html">在 Blogger 加上各種推文按鈕</a><br /><br /><a href="http://picasaweb.google.com/lh/photo/unZUWaWS50Hc4zc6aLnZDhPOdhWj1fJ97NFksMXXP0o?feat=embedwebsite"><img src="http://lh3.ggpht.com/_b8lN_UbLoEc/S_Qg___be2I/AAAAAAAAHb0/nhqU4bKFvAA/social_icons.png" /></a><br /><pre class="css" name="code"><br />/*Social Icon*/<br />.social{<br /> background:transparent url(http://www.xxxx.com/social_icons.png) 0 0 no-repeat;<br /> /*16*16按鈕的圖片網址*/<br /><br /> display: -moz-inline-box;<br /> display: inline-block;<br /> height:16px;<br /> margin:0 4px;<br /> text-indent:-999999px;<br /> vertical-align:middle;<br /> width:16px;<br /> opacity:0.75;<br /> overflow:hidden;<br />}<br />.social:hover{<br /> opacity:1;<br />}<br /><br />a.toFacebook{ background-position: 0 0; }<br />a.toPlurk{ background-position: 0 -16px; }<br />a.toTwitter{ background-position: 0 -32px; }<br />a.toTechnorati{ background-position: 0 -48px; }<br />a.toDelicious{ background-position: 0 -64px; }<br />a.toBuzz{ background-position: 0 -80px; }<br />a.toDigg{ background-position: 0 -96px; }<br />a.toStumbleUpon{ background-position: 0 -112px; }<br />a.toDesignFloat{ background-position: 0 -128px; }<br />a.getAtomRSS{ background-position: 0 -144px; }<br />a.toReader{ background-position: 0 -160px; }<br /></pre><br /><pre class="xml" name="code"><br /><div class='post-footer-line post-footer-line-99'><span class='post-social-icons'><br /> 分享至 &#65306;<br /> <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><br /> <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><br /> <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><br /> <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><br /> <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><br /> <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> <br /> <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><br /> <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><br /> <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><br /> <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><br /> <a class='social getAtomRSS' href='/feeds/posts/default' title='訂閱 Atom / RSS' type='application/atom+xml'>Atom / RSS</a> <br /></span></div><br /></pre><br /><br /><h4>圖片來源:</h4><a href="http://www.komodomedia.com/blog/2009/06/social-network-icon-pack/">Social Media Network Icons | Komodo Media</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com5tag:blogger.com,1999:blog-5946530704742130970.post-4286845119770165652010-05-15T13:05:00.004+08:002010-05-20T02:14:14.001+08:00Blogger 的標題加上 Facebook 官方的推文按鈕之前協助 <a href="http://findingrogan.blogspot.com/">Rogan</a> 在他的 Blogger 上加上Facebook 計數推文按鈕<br />才知到原來沒什麼人寫這樣的文章<br />今天也為自己的 Blogger 加上推文按鈕<br />順便寫下教學文<br /><br /><br />首先先到 <a href="http://zh-tw.facebook.com/facebook-widgets/share.php">Facebook 分享</a> 選好需要的樣式<br />如果要選擇『自訂網址』請再輸入匡填入 <span style="color: rgb(255, 0, 0); font-weight: bold;">data:post.url</span><br />所以你會看像這的 HTML 程式碼:<br /><pre class="xml" name="code"><br /><a name="fb_share" type="button_count" share_url="data:post.url" href="http://www.facebook.com/sharer.php">分享</a><br /><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script><br /></pre><br />再來要符合 Blogger 樣版語法必須在 <span style="color: rgb(255, 0, 0); font-weight: bold;">share_url</span> 前面加上 <span style="color: rgb(255, 0, 0); font-weight: bold;">expr:</span><br />這樣我們才可以使用 <span style="color: rgb(255, 0, 0); font-weight: bold;">data:post.url</span> 這個樣版變數<br />再來為了讓 UI 有更清楚的標示再加上 <span style="color: rgb(255, 0, 0); font-weight: bold;">title="分享至 Facebook"</span> 這個屬性<br />最後修改就會像下面這樣:<br /><pre class="xml" name="code"><br /><a name="fb_share" type="button_count" expr:share_url="data:post.url" href="http://www.facebook.com/sharer.php" title="分享至 Facebook">分享</a><br /><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script><br /></pre><br /><br />打開『版面配置』→『修改HTML』<br />將『展開小裝置範本』打勾<br /><a href="http://4.bp.blogspot.com/_b8lN_UbLoEc/S-6Ly7QIM-I/AAAAAAAAHZI/U50KwPPiXHY/s1600/blogger_social_button.png"><img src="http://4.bp.blogspot.com/_b8lN_UbLoEc/S-6Ly7QIM-I/AAAAAAAAHZI/U50KwPPiXHY/s512/blogger_social_button.png" alt="" id="BLOGGER_PHOTO_ID_5471464304316789730" border="0" /></a><br />找到 <h3 class='post-title entry-title'>及 </h3><br /><span style="color: rgb(255, 0, 0);font-size:85%;" >小技巧:所有的瀏覽器都有搜尋功能(Ctrl + F),只要搜尋 <span style="font-weight: bold;">"post-title"</span> 就可以找到這行了</span><br />將 <a name="fb_share"... 這行貼在 </h3> 前面<br /><br />再去搜尋 </body> 這一行<br />將 <script src="http://static.ak.fb... 貼在 </body> 前面<br /><br /><br />這時候就可以先預覽如果沒問題就存檔<br />這時候應該會看起來會像這樣:<br /><img src="http://3.bp.blogspot.com/_b8lN_UbLoEc/S-8XjQNsHmI/AAAAAAAAHag/F3OH4wirBlc/blogger_social_button_show.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5471617966693686882" /><br /><br />下面是其他人寫的教學:<br /><a href="http://micnet.blogspot.com/2009/10/facebook-share.html">Blogger + facebook分享計數按鈕</a><br /><a href="http://steachs.com/archives/1451">如何在Wordpress或Blogger加上【Google Buzz推文分享按鈕】?</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-63737956187843874992010-01-27T02:34:00.003+08:002013-06-29T17:33:42.728+08:00將無名的備份檔匯入 Blogger之前幫 <a target="_blank" href="http://cyufred.blogspot.com/">fred</a> 寫了一個搬家的格式轉換器<br />
最近將標籤的解析加進去<br />
原本想將留言的解析也加進去<br />
但 Blogger 一直匯不進去<br />
還出現了格式錯誤的問題<br />
所以並沒有支援留言的轉換<br />
<br />
這是用 JavaScript 寫出來的<br />
為了增加效率<br />
我將原本用正規標示式的解析方式<br />
改成以 DOM 的方式解析<br />
但很遺憾的捨棄 IE 的支援<br />
<br />
格式轉換器:<a target="_blank" href="https://dl.dropboxusercontent.com/u/16784943/code-demo/wretch_to_atom.html">wretch_to_atom.html</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-83092925809640622332009-12-21T15:11:00.009+08:002012-03-16T22:58:01.081+08:00Blogger 文章匯入的格式Blogger 可以接受 <a href="http://www.w3.org/2005/Atom">Atom</a> 的格式匯入<br />至於 RSS 的格式就要去找轉換器轉成 <a href="http://www.w3.org/2005/Atom">Atom</a> 才可以匯入<br /><br />以下是 Blogeer 匯入時的最簡化的格式<br /><pre class="xml" name="code"><br /><?xml version='1.0' encoding='UTF-8'?><br /><?xml-stylesheet <br /> href="http://www.blogger.com/styles/atom.css" <br /> type="text/css"?<br />><br /><feed xmlns='http://www.w3.org/2005/Atom' <br /> xmlns:openSearch='http://a9.com/-/spec/opensearchrss/1.0/' <br /> xmlns:georss='http://www.georss.org/georss'<br />><br /> <id>tag:blogger.com,1999:blog-4</id><br /> <generator version='7.00' uri='http://www.blogger.com'>Blogger</generator><br /><br /> <entry><br /> <id>tag:blogger.com,1999:blog-4.post-2</id><br /> <published>2009-12-19T23:39:20.281+08:00</published><br /> <title type='text'>標題</title><br /> <content type='html'>文章內容</content><br /> <category scheme='http://www.blogger.com/atom/ns#' term='標籤1'/><br /> <category scheme='http://www.blogger.com/atom/ns#' term='標籤2'/><br /> </entry><br /><br /> <entry><br /> <id>tag:blogger.com,1999:blog-4.post-2</id><br /> <published>2009-12-19T23:39:20.281+08:00</published><br /> <title type='text'>標題</title><br /> <content type='html'>文章內容</content><br /> <category scheme='http://www.blogger.com/atom/ns#' term='標籤1'/><br /> <category scheme='http://www.blogger.com/atom/ns#' term='標籤2'/><br /> </entry><br /><br /></feed><br /></pre><ul><li><strong>generator</strong>:產生器識別,Blogger 只接受自己的標示</li><li><strong>id</strong>:可以重複,但必須符合格式</li><li><strong>published</strong>:發佈時間,格式為 ISO8601</li><li><strong>title</strong>:文章標題</li><li><strong>content</strong>:文章內文,可以允許換行符號"\n",內文的 HTML 必須實體逸出</li><li><strong>category</strong>:標籤<br /></li></ul>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-64505401275332184002009-04-14T16:48:00.008+08:002010-05-27T00:28:56.043+08:00改寫 dp.SyntaxHighlighter 中 CSS 的 Highlighter 方式最近掙扎了很久,考慮要不要用 <a href="http://code.google.com/p/syntaxhighlighter/">dp.SyntaxHighlighter</a> 來處理 Blog 中程式碼的 Highlighter,因為之前用的 Iris Syntax Highlighter 已經收起來了,而且在文章撰寫上十分不方便也不直覺,所以花了一點心思改成 <a href="http://code.google.com/p/syntaxhighlighter/">dp.SyntaxHighlighter</a> 的模式,但 1.5.1 版還蠻陽春的,花了一點時間做語法增強及檔案瘦身,希望這個套件可以用久一點。<br /><br />原本 <a href="http://code.google.com/p/syntaxhighlighter/">dp.SyntaxHighlighter</a> 中 CSS 的 Highlighter 是用 keyword 的方式去處理的,未定義的 keyword 將不會有 Highlighter,為了得到更好的效果,又必須增加更多的 keyword,實在是很不划算。<br /><br />所以我改用解析 Syntax 結構的方式去處理 Highlighter 的動作,雖然還不是很完整,但整體的效果比原生好多了。<br /><br /><pre class="js" name="code"><br />/**=[ CSS ]===========================================*/<br />dp.sh.Brushes.CSS = function(){<br /> // 樣式定義<br /> this.CssClass = 'dp-css';<br /> this.Style = '.dp-css .value{color:blue;}' +<br /> '.dp-css .important{color:red;font-weight:bold;}'+<br /> '.dp-css .keyword{color:#7F0055;font-weight:bold;}'+<br /> '.dp-css .func{color:#F55;font-weight:normal;}';<br />};<br /><br />dp.sh.Brushes.CSS.prototype = new dp.sh.Highlighter();<br />dp.sh.Brushes.CSS.Aliases = ['css'];<br /><br />dp.sh.Brushes.CSS.prototype.ProcessRegexList = function(){<br /> function push(array, value){<br /> array[array.length] = value;<br /> }<br /> var match1,match2,regex1,regex2;<br /> <br /> /* 加入註解解析 */<br /> this.GetMatches(dp.sh.RegexLib.MultiLineCComments, 'comments');<br /> /* 加入 !important 解析 */<br /> this.GetMatches(new RegExp('!important', 'g'),'important');<br /><br /> /* 解析屬性區塊 */<br /> // 匹配 '{' 至 '}' 之間的文字<br /> regex1 = new RegExp('\{[^}]+\}', 'gm');<br /> // 匹配 'xxx:xxx[;\n\(!]' 格式的文字<br /> regex2 = new RegExp('([:\\w-\.]+)\\s*:\\s*([^;\n\(!]+)[;\n\(!]', 'gm');<br /> while((match1 = regex1.exec(this.code))){<br /> while((match2 = regex2.exec(match1[0]))){<br /> if(!match2[1]){continue;}<br /> // 匹配屬性名稱<br /> push(this.matches, new dp.sh.Match(<br /> match2[1], <br /> match1.index+match2.index, <br /> 'func'<br /> ));<br /> <br /> // 匹配屬性值<br /> if(match2[2]){<br /> push(this.matches,new dp.sh.Match(<br /> match2[2], <br /> match1.index+match2.index+match2[0].indexOf(match2[2]), <br /> 'value'<br /> ));<br /> }<br /> }<br /> }<br /> <br /> /* 解析選擇器區塊 */<br /> // 匹配 'xxx[,\{\n]' 格式的文字<br /> regex1 = new RegExp('^([\\s\\w\.#*:+-]+)[,\{\n]', 'gm');<br /> while((match1 = regex1.exec(this.code))){<br /> if(!match1[1]){continue;}<br /> push(this.matches, new dp.sh.Match(<br /> match1[1], <br /> match1.index, <br /> 'keyword'<br /> ));<br /> }<br />};<br /></pre><br /><br />效果可察看之前的文章:<br /><a href="/2009/04/ie6-visibility.html">IE6 對 visibility 負荷過大的問題[CSS]</a><br /><a href="/2009/02/ie6.html">IE6 中的最大最小寬度和高度</a><br /><a href="/2008/10/css-fixed-ff-ie6.html">CSS fixed 定位( FF / IE6 )</a><br /><a href="/2007/08/important-ie-firefox.html">利用 !important 修正 IE 與 Firefox 的差異</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-45571040164050563592008-11-01T17:27:00.007+08:002023-02-25T21:45:16.640+08:00用 CSS 實現 blogger [繼續閱讀]的方法雖然與<a href="http://lingshu1005.blogspot.com/">白花花</a>所寫的<a href="http://lingshu1005.blogspot.com/2007/07/blogger.html">在blogger實現繼續閱讀的作法</a>是用同樣的方法,但為了增加使用上的彈性,我做了不一樣的基本設定,讓任何 HTML Tag 只要套用 fullpost 這個 ClassName 就可以在部分閱覽中隱藏。
在 <b:skin> 中的 CSS 設定:
<pre class="css" name="code">
/*部分隱藏樣式*/
.posts-index .fullpost{
display:none;
}
</pre>
在詳細樣版中找到 <strong><data:post.body/></strong> 這行,並修改成以下形式:
<pre class="xml" name="code">
<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>
</pre>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-51892272308543095122007-10-13T21:11:00.007+08:002014-12-02T13:41:41.716+08:00Blogger 排版方式<img src="http://4.bp.blogspot.com/-X83We3ezUMc/RxIV44JhU5I/AAAAAAAANHg/EWmUxL4ml_k/gif_1.gif" /><br />
這是 blogger 的排版方式,雖然不是每個樣式都一樣,但主要都會有這些區塊,在這裡可以讓大家有個參考,如果想知道更明確的排版方式可以用 Firefox 的 DOM 觀察器去瞭解詳細的內容。Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-29637280580177049602007-10-02T11:39:00.003+08:002014-12-02T13:46:56.039+08:00可惡的 Microsoft IE這是之前 Blog 在 IE6 中顯示的樣式狀況,很奇怪的多了一條線,在 HTML 中明明就沒有套用樣式,可是那個 div 卻自己套用了上一個父標籤的樣式。<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQUw7Tl-KMxj6-H4WlFA9-zz_oMJiaZnAlSJ6TZgIRJPoInJnm8zGl1qhjRRFnmur53kFdunUmjjYg2H1k1hThmcw_38n3m4lDn2E32y4JatlTvIam97w3R2l-n9FqM2VbgnucOaAuao3U/s320/photo+for+IE.jpg" /><br />
<br />
在 Firefox 中沒有這個問題,能夠正常顯示我所設定的樣式。<br />
<img src="http://2.bp.blogspot.com/-ABoMXFEve7k/RwMQaIJhUbI/AAAAAAAANHg/d1nK4H1i6ic/s320/photo%2Bfor%2Bfox.jpg" /><br />
<br />
為了能讓更多的瀏覽者能夠正確的顯示我的網頁,於是我只好另外設計對應 IE6 的樣式,選擇了替代方案。<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFy_VdatGXQ0BKVkMGHVcUwANF4l7nUV7mxeyjUlTaKuMxMiC9cZNzlebTbEejxIq_W60Dn8Ef5hmWFF3elhckNjGfpXp2-mmQoTvBF8684KGQKB4vmtGIxc572QKgBxRUMxAiJiVhUZOm/s320/MWSnap070.jpg" /><br />
<br />
可是呢?我找別人幫我測試我的網頁,在 IE7 中一樣出現了之前的問題,為了解決這個問題,在網路上找尋相對應的方法,但在<a href="http://www.stillfar.com/blog/post/70.html">胡思乱想</a>的 Blog 中看到了這段話:<br />
<br />
<blockquote>『<span style="font-style: italic;">話說回來,IE7 的出現,又給網頁設計師們出了個難題,拋開 IE345,以往僅僅要顧及 IE6 和 Firefox 的差異就夠令人鬱悶的了,這又出現了 IE7。一直呼喊著標準啊標準啊,強悍的微軟告訴我們,他們家的 IE 就是標準,什麼 W3C,滾一邊去。</span>』</blockquote><br />
<br />
這讓我失去了為 IE7 修改錯誤的動力,就暫時先考量 IE6 和 Firefox 這兩大族群,對於其他不遵守標準的 IE 就暫時不理他吧!Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-77811041991580833262007-10-01T14:21:00.004+08:002010-05-15T18:11:03.357+08:00設定 Blogger 在 IE 的 CSS由於我另一個 Blog 在 IE 中有了奇怪顯示錯誤,為了達到親和力信念,我無法忽視這討厭的錯誤。<br /><br />原本是用 <span style="color: rgb(255, 0, 0); font-weight: bold;">!important</span> 的方法去做,但發現完全沒有用,真奇怪到底是那裡不行,原來 blogger 有自己的設定方式。<br /><br />只要在給 IE 樣式名稱前加上 <span style="color: rgb(255, 0, 0); font-weight: bold;">_</span> 就可以了,但如果也有給 Firefox 系列用的樣式,必須將Firefox 的樣式放在 IE 樣式的前面。<br /><pre class="css" name="code"><br />.sidebar .widget {<br /> border : 1px dotted #FFFFFF ; /*這是給 Firefox 的樣式*/<br /> _border : 2px dotted #999999 ; /*這是給 IE 的樣式*/<br />}<br /></pre>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0