Endless TACOJOHN

音樂，在布洛格也是一個很重要的元素。
一直很想找到一個solution，可以很簡單的播放音樂，畢竟複雜的音樂播放器對我這個偶爾客串介紹我個人主觀喜歡的音樂的BLOG來說…實在有點殺雞焉用牛刀的多餘。

好在，找到一個很簡單的方法，是由del.icio.us所提供的，只要在blog template裡加上下面這一段程式：

<script type="text/javascript" src="http://del.icio.us/js/playtagger"></script>


以後只要內容裡的超連結內容是指向MP3檔案的話，就會出現一個單純的PLAY圖示供使用者點選並播放，很簡單喲!!

有製作過網頁的朋友應該都知道，自從現在流行的所謂兩欄式或是三欄式的風格出現後，所謂邊欄的內容便常常會隨著網頁的變化而有所不同。
比如說搜尋的邊欄，可能就只有在首頁才會出現，而進到特定頁面時便讓它消失!!
這個功能，在Blogger其實要達到也非常的容易!!
在上一篇的【Blogger】“Read More” Expandable Posts Link裡，小弟有稍微提到一點點基礎的概念，即判斷在首頁、文章內文的條件式；也就是利用這簡單的條件式，我們就可以輕易達到上面的功能囉!!

在往下介紹怎麼實作之前，我們得先學一下另一個基礎的東東，要針對不同的Widget修改，總得先知道怎麼找到這個Widget在那裡是吧，所以我下面先跟各位簡單介紹要如何找出Widget來囉!!
每個邊欄(在regular的blogger template裡叫sidebar)的每個不同的Widget¹，都有其特定的id、及其抬頭(title)。
而以程式來說的話，每個不同的Widget會以下面的方式包著
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'>
...
</b:widget>
其中，上面寫用紅色粗體的部份，便是我們用來分辨是那個Widget的關鍵字囉!!
通常，在作者資料的這個Widget，Blogger會預設用"Profile1"這個id，而顯示所有文章Label的這個Widget則會預設為"Label1"。
而上面的title，就是您頁面上該Widget顯示的title，這個是在您設定置放該Widget時設定的。
透過上面的資訊，您應該對於要怎麼在那麼長的程式裡找到您要修改的Widget有一點譜了吧?!

Okay，假設您已經具備找備找到該Widget的基本能力了，接下來就是來去實作這個功能囉!! Let's go ~~

作法，一樣…先進到"修改HTML"的頁面後，由於我們要設定Widget的顯示方式，所以不能把Widget的程式碼隱藏，千萬要記得勾選"展開小裝置範本"喲!!
接下來就是找到您要設定的Widget啦，我們用下面這一段當範例：
<b:widget id='HTML1' locked='false' title='Guest Book' type='HTML'>
  <b:includable id='main'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != ""'>
      <h2 class='title'><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <data:content/>
    </div>
    <b:include name='quickedit'/>
  </b:includable>
</b:widget>


上面的灰色字體部份，是該Widget顯示的內容，就不是我們這次要修改的地方，我們要改的，就是在灰色字體的外面加上一點東西，決定他們何時才要顯示!!
如果要設定這個Widget只在首頁才顯示，就在灰色的這一段程式上、下各加上下面的程式(即<b:includable id='main'>這段的下面，以及</b:includable>的上面)
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  Widget內容(即上段程式灰色字體部份)
</b:if>


而如果是要設定這個Widget是在單篇文章的頁面才顯示的話，程式則修改為如下
<b:if cond='data:blog.pageType == "item"'>
  Widget內容(即上段程式灰色字體部份)
</b:if>


其實兩種，只差在第一行的判斷式囉!!
最後，當然就是儲存、打完收工囉!!!

• ¹在這邊我們還是先用Widget來稱呼這個元素element，而先不管上一篇Blogger in draft所提到新的Gadget。


• ²年紀大了，常常會沒注意而打錯，還發生讓好朋友幫我花時間debug的糗事，如果各位有任何疑問或發現錯誤，敬請見諒並懇請通知小弟修正囉^^

在其他的BLOG空間裡，很常見的便是繼續閱讀的功能。但在Google的Blogger裡，卻是找不到這個功能的。但也因為Blogger的高程式自由度特色，我們其實也可以很容易把這個功能給加入。
繼續閱讀的功能，其實就是讓撰文者可以選擇不同長度的內文顯示在首頁，而不是完整的顯現；也就是像在首頁的部份顯示abstract一樣，當讀者對該文有興趣時，再透過點取"繼續閱讀"連結來觀看完整的文章。這功能尤其在當您的文章落落長時就顯得非常的有用了，尤其落落長的文章不僅止會影響版面的layout，更會影響對該文章沒興趣的讀者閱讀其他文章的閱讀興趣呢!!

在很久前的一篇"【Blogger】Expandable posts with Peekaboo view"文章裡，我就有簡單記錄了一下如何在blogger使用"繼續閱讀"的功能，來達成精簡版面的效果。
在那一篇裡，除了是加入"繼續閱讀"的功能外，更同時提供了"折疊"的功能，透過javascript的效果，將更要隱藏的內文折疊，當使用者想看時才打開，搭配fade in的效果，相當的炫!!!

不過，由於這個效果，對於非常講求速度的人來說，或是單純想要極簡風而不想要這些很炫的功能的使用者來說，可能就有點殺雞用牛刀的感覺了!!
因此，這邊就簡單記錄一下更簡單的方法，讓使用者點"繼續閱讀"時，是指接換頁進入該文章的頁面。而要隱藏的文字部份，如同之前那一篇一樣，都是透過CSS tag來控制，讓文章撰寫的人可以自由的控制文章的顯示囉!!

當然，兩種方式都有它有趣、好玩的功能，就看個人的使用習慣及想要的效果囉!!

在開始之前，先回味一下如何修改blogger的code好了。
要進入修改code的頁面，最簡單的方式，大概就屬於從您的網站頁面進入了!!從您的網站頁面上方，有一個稱為"Navigation Bar"的玩意兒，就像下面的圖一樣，點擊"自訂"即可!!


進入控制主頁後，進入"版面配置"這個頁籤，並點擊進入"修改HTML"這個頁面!!(如下圖，標示為1的地方)
在這個頁面中，您可以選擇備份您的模版(template)，會將模版的XML檔下載至您的本地機器上。
或是您也可以透過上傳模版XML檔的方式，將您於本地端修改的模版檔上傳至blogger上。(如下圖，標示為2的地方)
另外，由於blogger將各不同的小裝置(區塊)套入模組化的概念，所以如果您有需要直接透過這個頁面修改小裝置的程式的話，記得把下圖標示為3的地方，即"展開小裝置範本"的地方選取打勾哦!!!^1、2



Okay, are you ready?!
Let's do it step by step!!

• Step 1:
  先找到(可以利用Ctrl+F搜尋)這段code: <data:post.body/>
  (其實，按照國外的教學，應該是要找post-header-line-1這一段code才對。如果您是使用Blogger本身提供的template來修改的話，上面這段應該是可以正常找到的；但有些高手客製的template可能會把它移除或是修改，那可能就會找不太到這一段程式。也因此，為了一勞永逸，直接找上面我寫的那一段就好囉!!)
  這一段<data:post.body/>程式，一定會存在您的程式裡，無論您是用那一個版本的template，因為這一段程式是blogger用來顯示您的文章本文的!!



• Step 2:
  把下面的這段程式複製，並取代剛剛找到的<data:post.body/>。
  <b:if cond='data:blog.pageType == "item"'>
  <style>.fullpost{display:inline;}</style>
  <p><data:post.body/></p>
<b:else/>
  <style>.fullpost{display:none;}</style>
  <p><data:post.body/></p>
  <b:if cond='data:blog.pageType != "item"'>
    <br /><a expr:href='data:post.url'>Read more...</a>
  </b:if>
</b:if>
  Okay，我稍微解釋一下上面這段程式好了。
  <b:if cond='data:blog.pageType == "item"'>，這個判斷式其實就是用來判斷頁面是在特定文章的頁面(只顯示該文章的內文)或是在首頁(會顯示一定數目的文章)。若為item的話，則表示是在特定文章的頁面!!
  下面的就是根據判斷式，如果是在特定文章的頁面的話，就會將完整的文章顯示，<style>.fullpost{display:inline;}</style>表示即便您文章內文用CSS tag，將style設為fullpost亦會顯示出來!!
  反之，如果是在首頁的話，就會利用CSS tag，將CSS的style設為fullpost的部份給隱藏(<style>.fullpost{display:none;}</style>)!!
  此外，由於在首頁時，我們會把部份文章隱藏，所以要加個Read more的連結，也就是上面第7行的部份。聰明的您應該看的出來，<a expr:href='data:post.url'>Read more...</a>這一段其實就是新增一段文字"Read more..."，並將這段文字加上超連結連到該文章的頁面囉!!也因此，這個"Read more..."是可以修改的，管你是要用英文、中文、台語還是台灣國語，改它就對了!!它前面的"<BR />"則是HTML的換行符號，也就是我們希望換行後才顯示"Read more..."，可以讓讀者在視覺上容易注意，也可以讓讀者在心裡上稍喘一口氣!!當然這也是可以自由的修改的囉!!

• ^PS.1在設定本篇討論的功能時，記得要把它打勾哦!!


• ^PS.2個人習慣，會先把這個選項打勾後，直接把全部的程式碼全選、拷貝，在自己平常習慣的文字編輯器(如Ultra Edit等)編輯，編輯完後再貼回瀏覽器儲存。這樣至少在編輯上是依自己習慣的編輯器動作!!


• ^PS.3小弟我原本是用<span id="fullpost">來實做這個功能(我的tag是id，而不是class)，後來改template時若照上面的程式寫的話，所有的文章都沒辦法達到隱藏的功能，除非我每篇文章都把隱藏的部份的tag改回class。
  不過…我們可是在討論修改上百篇的文章啊!!我怎麼可能真的這麼幹呢!!!
  如果您有跟小弟一樣的困擾的話，其實改兩個地方就可以很簡單的讓您完成無縫轉換template啦!!
  只要把Step2的程式，兩個.fullpost改成#fullpost，那您在寫文章時，就可以繼續延用<span id="fullpost">啦!!


• ^PS.4如果您想要直接完整顯示整篇文章，即不要在首頁隱藏加上"Read more..."的話，只要在寫文章時，不要加上那段<span>的CSS碼即可!!

進入Web2.0後，標籤(tag)的使用無疑是最具影響力之一的突破。
不同於傳統的樹狀分類，tag的運用可以是一對一、一對多甚至是多對多。
以Blog而言，tag的標示使用便相對的方便且重要了!!
當在觀看一篇特定文章時，能夠自動將相關的文章給列示出來，就可以可讓讀者看到可能同樣有興趣的文章，更可吸引讀者去瀏覽自己其他的文章。

由於Blogger會賦予每篇文章靜態連結網址，所以我們很容易便可透過RSS來達成上面我們要的功能了!!
意即，只要透過文章tag的RSS Feed，抓出所有擁有相同tag的文章，並將之列出(或亂數選擇幾篇)即可。
以下的做法是參考自ABIN'S TECH NOTE，該網站有很多很有用的blogger hack，而且在blogger的基礎教學上也很豐富，是玩blogger的template或是widget一定要去逛逛的好站哦!!

要改之前，請千萬記得要先備份template。
首先，要先在<head>及</head>之間加入下面這一段JavaScript的程式
<script type='text/javascript'>
//<![CDATA[
var relatedPostsNum = 0;
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedDates = new Array();

function RelatedLabels(json) {
  for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    relatedTitles[relatedPostsNum] = entry.title.$t;
    relatedDates[relatedPostsNum] = entry.published.$t.substr(0,10);
    for (var j = 0; j < entry.link.length; j++) {
      if (entry.link[j].rel == 'alternate') {
        relatedUrls[relatedPostsNum] = entry.link[j].href;
        relatedPostsNum++;
        break;
      }
    }
  }
}

function RemoveDuplicatedPosts(PostUrl) {
  var tmpUrls = new Array(0);
  var tmpTitles = new Array(0);
  var tmpDates = new Array(0);
  function contains(a, e) {
    for(var j = 0; j < a.length; j++)
      if (a[j]==e)
        return true;
      return false;
    }
    for(var i = 0; i < relatedUrls.length; i++) {
      if(!contains(tmpUrls, relatedUrls[i]) && PostUrl != relatedUrls[i]) {
        tmpUrls.length += 1;
        tmpUrls[tmpUrls.length - 1] = relatedUrls[i];
        tmpTitles.length += 1;
        tmpTitles[tmpTitles.length - 1] = relatedTitles[i];
        tmpDates.length += 1;
        tmpDates[tmpDates.length - 1] = relatedDates[i];
      }
    }
  relatedTitles = tmpTitles;
  relatedUrls = tmpUrls;
  relatedDates = tmpDates;
}

function ShowRelatedPosts(PostUrl) {
  RemoveDuplicatedPosts(PostUrl);
  var r = Math.floor((relatedTitles.length - 1) * Math.random());
  var i = 0;
  if (relatedTitles.length > 0) {
    document.write('Related Posts: <ul>');
    while (i < relatedTitles.length && i < 5) {
      document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a> - ' + relatedDates[r] + '</li>');
      if (r < relatedTitles.length - 1)
        r++;
      else
        r = 0;
      i++;
    }
    document.write('</ul>');
  }
}
//]]>
</script>
可以看到上面，其實是透過JSON去抓取RSS Feed的內容，並且只抓取文章的標題、連結及日期的部份。另外，ABIN前輩還透過RemoveDuplicatedPosts這支程式將文章自身給排除在候選名單之外，更顯得合理，否則在文章內的相關文章還出現自身就有點脫褲子放屁的感覺了!!
此外，在ShowRelatedPosts這支函式中，有兩個部份比較需要注意，一是我用紅色粗體字標示的部份，就是要亂數選取文章的篇數，意即要列出的文章篇數。
二則是document.write的部份，這部份就是要如何顯示在文章內的格式(並非顯示的位置)，這兩個部份非常方便讓使用者來修改!!

再來便是要決定何時呼叫上面的函式來抓取文章了。
先找到在文章裡顯示該文所擁有tag的程式，在列出tag的同時，就順便做過濾RSS Feed的動作，避免重新再做一次浪費資源及時間!!
<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>
在上面這段程式中的每個迴圈最後，就執行程式去抓取!!
也就是將上面這段程式加入下面藍色的部份
<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:if cond='data:blog.pageType == &quot;item&quot;'>
      <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=RelatedLabels&amp;max-results=10&quot;' type='text/javascript'/>
    </b:if>
  </b:loop>
</b:if>
上面這段程式，紅色粗體字則決定了抓取的相關文章的母數，這個數字得大於前面決定的列出文章的數量才行。
當然，這個數字越大相關文章的亂數樣本也越大，也就是相關文章可以顯示越多舊的相關文章。相對的耗費的資源也就多了點。
OK，到這邊基本上都做完了，唯一剩下的部份，就是把結果顯示了!!
顯示的部份，只有一個條件，就是必須在上面這一段程式的後面才能顯示(總得讓程式先抓完資料才有東西可以顯示吧^^)
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <script type='text/javascript'>
  ShowRelatedPosts(&#39;<data:post.url/>&#39;);
  </script>
</b:if>

好了，儲存後就打完收工啦!!!
上一段藍色的判斷式，是用來判斷目前所在頁面是否在文章的連結內頁。所以如果是加上面的方式做的話，這個顯示相關文章效果，在首頁的文章是看不到的，得要點入文章的內頁連結（當然，那篇文章要有加註標籤被分類過），在顯示標籤的後面才會顯示效果哦!!

※參考網站：
．Abin's Tech Note:加入相關文章功能(Related Post)

首字放大，在出版業，無論是雜誌、文案或是海報都很常見。

基本上，首字放大可區分為兩種，一種是"Drop Caps"，就是首字放大，其他的文字會類似文繞圖的方式呈現。另一種稱之為"First Letter Big"，首字一樣放大，但是跟我們平常單獨調整文字的大小一樣，不會有文繞圖的效果。各有各的美，只有使用的時機不同而已。

上面指的是呈現的方式，再來依編寫(coding)的方式，我會介紹CSS Inline Style、CSS Style Sheet以及CSS First-Letter Pseudo等三種方式。依常用程度來區分Inline Style的話，如果你的文章不常用這種首字放大的效果的話，Inline Style就蠻方便的；如果你還蠻常用的，但不是每篇文章都用的話，那利用Style Sheet比較適合；如果你是重度的使用者，每篇文章都要用的話，那First-Letter Pseudo會讓你寫起文章變得更EASY囉!!

下面的範例，我會先介紹Drop Caps，把三種不同的編寫方式做個簡單的介紹；再介紹的三種不同編寫方式。

• 這是第一種呈現方式，即Drop Caps。
  我們希望首字放大約五行的話，就大約算一下，把字型大小(font-size)設定為100px，行高(line-height)設為80px。
  行高的設定會影響到該段落其他文字落在首字右方的斷行數。
  下面我們會就三種的編寫方式做分別的說明。
  
  
  
  
  1. 使用Inline Style，語法如下：
     <span style="float:left;color:chocolate;font-size:100px;line-height:80px;padding-top:2px;font-family: 標楷體, Georgia;">這</span>是第一種，直接在本文使用inline style。……

  
  
  2. 使用Style Sheet，語法如下：
     先加入下面這一段CSS
     .dropcap {
  .float:left;
  color:chocolate;
  font-size:100px;
  line-height:80px;
  padding-top:2px;
  font-family: 標楷體, Georgia;
}
     再來，當要使用時，只要在首字部份加上span、class等tag即可，如下：
     <span class="dropcap">這</span>就是利用Style Sheet實現Drop Caps
  
  
  3. 使用First-Letter Pseudo的語法如下：
     一樣，先加入下面這一段CSS
     <style type="text/css">
firstletter:first-letter {
  font-family: 標楷體, Georgia;
  color:chocolate;
  font-size:100px;
  line-height:80px;
  padding-top:2px;
  float:left;
}
</style>
     使用時，直接將整個文章內容用段落tag包起來即可，不用針對首字做tagging，如下
     <p class="firstletter">這一段利用First-Letter Pseudo來實現，不需要針對首字做個別的處理即可達成。</p>


• 再來是First Letter Big，看出跟上面的Drop Caps的差異了嗎??這種單純只會對首字做放大的效果，而不會有文繞圖，也就是首字跟其他文字的水平對齊是bottom。
  
  
  
  
  1. 使用Inline Style，語法如下：
     <span style="font-family:標楷體, Georgia,;color:chocolate;font-size:100px;font-weight:normal;line-height:80%;letter-spacing:-6px;">這</span>是第一種，直接在本文使用inline style。……

  
  
  2. 使用Style Sheet，語法如下：
     先加入一段CSS如下：
     .firstbigletter {
  font-family: 標楷體, Georgia,;
  color:chocolate;
  font-size:100px;
  font-weight:normal;
  line-height:80%;
  letter-spacing:-6px;
}
     再來，當要使用時，只要在首字部份加上span、class等tag即可，如下：
     <span class="dropcap">這</span>就是利用Style Sheet實現First Letter Big效果。
  
  
  3. 使用First-Letter Pseudo的語法如下：
     一樣，加入下面這一段CSS
     <style type="text/css">
firstletter:first-letter {
  font-family: 標楷體, Georgia,;
  color:chocolate;
  font-size:100px;
  font-weight:normal;
  line-height:80%;
  letter-spacing:-6px;
}
</style>
     使用時，直接將整個文章內容用段落tag包起來即可，不用針對首字做tagging，如下
     <p class="firstletter">這一段利用First-Letter Pseudo來實現，不需要針對首字做個別的處理即可達成。</p>

第一次看到Lightbox的特效是在強者我同事狗頭的布洛格上看到的，當時就對它的呈現方式感到相當的驚艷、滿意!!這兩天稍微研究一下，在不更動原始碼的情況下，其實安裝根本就是無痛，三分鐘就安裝完成了!!

介紹如何無痛安裝之前，先介紹一下什麼是Lightbox好了!!
Lightbox基本上是一種在網頁上展示影像的JavaScript程式。一般我們在網頁上秀圖的方式，通常是利用該圖的縮圖當連結，當使用者點選該圖時，再連結到原始大圖的頁面做完整的顯示。而Lightbox則是利用JavaScript運用CSS的Overlay，在同一頁面展示大圖，並且淡化原有的背景內容進而突顯照片內容。

如同原作者Lokesh Dhakar在其網站所說的一樣：

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.
簡單說，就是Lightbox是一個可以在所有的瀏覽器上安裝、執行的一個很簡單、低調的一種Script!!好個低調啊!!!!

利用Bookmark來做文章的共享是很多人悠遊於布洛格海的方式之一
如果讓讀者方便的能將文章加入書籤便相對的重要了，不啻也是提高讀者數量的方法之一囉!!

加入這些小圖示的方法如下：

1. 首先進入管理頁面 -> "範本"頁籤 > 修改 HTML > 並將"展開小裝置範本"選項打勾


2. 找到下面程式碼
   <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 != "true"'>,</b:if>
</b:loop>
</b:if>
<!-- 書籤圖示代碼插入處 -->
</span>

   


3. 在上面的"<!-- 書籤圖示代碼插入處 -->"插入下面的共享書籤代碼
   <!-- MyShare -->
<a expr:href='"http://myshare.url.com.tw/index.php?func=newurl&url=" + data:post.url + "&desc=" + data:post.title' target='_blank' title='收進你的MyShare個人書籤'><img alt='MyShare個人書籤' src='圖示來源位址' style='border:0; padding:0;padding-right:3px;'/></a>

<!-- Technorati -->
<a expr:href='"http://www.technorati.com/cosmos/search.html?url=" + data:post.url' target='_blank' title='Add to Technorati'><img alt='Technorati' src='圖示來源位址' style='border:0; padding:0;padding-right:3px;'/></a>

<!-- Del.icio.us -->
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Add to Del.icio.us'><img alt='Del.icio.us' src='圖示來源位址' style='border:0; padding:0;padding-right:3px;'/></a>

<!-- Furl -->
<a expr:href='"http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&t=" + data:post.title' target='_blank' title='Add to Furl'><img alt='Furl' src='圖示來源位址' style='border:0; padding:0;padding-right:3px;'/></a>

<!-- HEMiDEMi -->
<a expr:href='"http://www.hemidemi.com/user_bookmark/new?title=" + data:post.title + "&url=" + data:post.url' target='_blank' title='Add to HEMiDEMi'><img alt='HEMiDEMi' src='圖示來源位址' style='border:0; padding:0;padding-right:3px;'/></a>

<!-- Yahoo書籤 -->
<a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?ei=UTF-8&u=" + data:post.url + "&t=" + data:post.title' target='_blank' title='加入 Yahoo 分享書籤'><img alt='Yahoo分享書籤' border='0' src='圖示來源位址' style='border:0; padding:0;padding-right:3px;'/></a>

<!-- Google Bookmarks -->
<a href="javascript:void window.open('http://www.google.com/bookmarks/mark?op=add&bkmk='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title))"><img src="圖示來源位址" title="Google Bookmarks" alt="Google Bookmarks" style='border:0; padding:0; padding-right: 3px;' /></a>

   


4. 儲存，打完收工，回文章頁面確認看看有無錯誤囉!!


5. 如果儲存時出現錯誤的話，請試著將上面的代碼中所有的"&"改為"&amp;"。

在Yadao-博客男女看到這個有趣的測試
輸入你的Blog的atom就可以測試你的Blog性向~~

Endless TACOJOHN

18.0%男性倾向,82.0%女性倾向 评点：明净雅致的语言让人为之倾倒，人生的感悟、生活情趣都融合在其中，自有一番细腻的心思在其间。 yodao | 博客男女

前陣子在Kaie's Blog上看到這篇透過javascript來對文章做加密的教學

基本上，就是…
如果你(妳)在外面有外婆(外公)的話，想要偷偷讓她(他)看到你們出遊的照片，或是談情說愛一番的話，這時候，就可以透過對你的文章加密的方式，利用輸入你們的代號來解密。用這個方法就可以讓你(妳)家裡的女王(皇上)看不到你(妳)偷吃的證據囉!!

如何，提起您的興趣了嗎?!!

說真的，其實我們常有一些比較隱私的內容、圖片想要記錄，但卻又不希望只讓某部份特定的好朋可以分享、觀看時，就可以利用這個方法來達成我們的目的。
這個方法其實是針對Blog中某一段文字給予加密，變成讓人無法理解的「火星文」 XD.. 解密過程只需輸入正確的代碼之後，即可馬上在Blog上顯示出正確的「地球文」，不用重新Reload...非常的方便

※操作方式：

1. 加入此Hack所需的Javascript到你的Blog Template內，在Blogger即將底下的code加在Template中的</head>上面即可
   <script language='JavaScript' src='http://vincentcheung.googlepages.com/blogjscrypt.js'></script>
   基本上…到這邊已經完成了!!再來剩下的就是火星文的轉換跟撰寫至BLOG內囉



2. 產生加密過後的火星文
   到這個網站，在key欄位輸入您的解密代碼，再於"Plain Text"欄位內輸入您要加密的文章內容，接著按下"Plain Text"欄位下面的"Encrypt"鈕，會在下方的"Cipher Text"欄位產生加密過後的火星文!!(ps.千萬別忘了你剛剛輸入的key值哦，否則，十個深藍來解可能都要解個數十年咧!!)



3. 嵌入火星文至文章內
   ．方法一(直接在文章中顯示火星文):
   <a href="javascript:Decrypt_text('unique_name');">Click to Decrypt text (點擊此處解開火星文)</a>
<div id="unique_name">此段內容為由上面Step1.所產生出來的一整段火星文(例如:wRxSwskrWsmohc1...之類的文字)</div>
   ．方法二(隱藏火星文，只顯示連結):
   <a href="javascript:Decrypt_text('unique_name', '此段內容為由上面Step1.所產生出來的一整段火星文(例如:wRxSwskrWsmohc1...之類的文字)');">Show encrypted text</a>
<div id="unique_name"></div>
   ※注意上方的unique_name型態是div tag的一個id名，請自行命名，唯獨在template及所有文章中不能出現相同的id名字，否則會造成判斷錯誤!!可以利用流水號之類的方式的加入編號命名!!
   上面兩種方法最主要的差別就是在有沒有顯示出火星文的內容，沒有的話畫面比較乾淨，但是有的話可以有提醒讀者這邊還有內容的效果，好不好見人見智囉!!



4. 打完收工
   請儘請享用您的偷情世界…啊不是啦…是您的私密世界啦~~

如同我的Banner，上面的照片欄位怎麼制作的呢?!
本文將說明如何讓自己的banner有個自由的欄位，使用者可自由置放flickr badge或是其他自己想放的內容。

Step 1: 登入Blogger並進入修改HTML頁面

Step 2: 找到banner部分的片段，並新增紅色的部份
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='自己的blog標題' type='Header'/>
<b:widget id='headhtml' locked='false' title='' type='HTML'/>
</b:section>
</div>


Step 3: 儲存範本…打完!!基本上算是打完收工啦!!

此時再到設定/範本/網頁元素頁面，會看到Banner下方多了一個自由欄位，即可利用編輯的方式加入你想要加入的內容、Java Script程式啦!!

okay，再來教大家如何像我一樣，加入Flickr Badge!!

Step 4: 到Flickr Badge依照指示設定自己想要的樣式，最後再將它所給的html code加入剛剛新增的欄位就可以了。

另外，預設layout是會置左，如果要置右的話，先來看一下剛剛的那段code(以下是以小弟得到的code，若你的code不同，請自行舉一反三)
<!-- Start of Flickr Badge -->
<style type="text/css">
#flickr_badge_uber_wrapper {margin-right:40px;float:right;padding: 0 0 10px;}
#flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}
#flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}
#flickr_icon_td {padding:0 5px 0 0 !important;}
.flickr_badge_image {text-align:center !important;}
.flickr_badge_image img {margin:0 3px;background-color:#fff;padding:4px;border:1px solid #333 !important;}
#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}
#flickr_badge_wrapper {}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}
</style>
<table id="flickr_badge_uber_wrapper" border="0" cellpadding="0" cellspacing="10"><tr><td>
<script src="http://www.flickr.com/badge_code_v2.gne?count=5&display=random&size=s&layout=h&source=user&user=********" type="text/javascript"></script>
</td>
</tr>
</table>
<!-- End of Flickr Badge -->

看出來了嗎??我加入紅色的部份，其中這段CSS的class名稱就跟下方綠色的Table ID是一樣的!!
至於其他的CSS語法請自行參閱網路上的教學囉!!

好吧，大放送，有人用完會發現Banner變超大一個，那是因為網站描述(description)欄位的關係
一樣，進入修改HTML頁面，找到下面這一串CSS程式
#header .description {
display: block;
margin: 0 1%;
padding: 0 0 40px;
line-height: 1.4em;
font-size: 50%;
}

把40px改小即可囉!!

Enjoy it!!!

你的Blogger也許有非常火紅的文章~~
也因此，回應的文章也許會堆積如山…比爸爸還要高!!
也因此，你的讀者會想要看到原作者你的回覆!!
也因此，如果你的回覆文的layout跟別人不同的話，對你的讀者來說會更方便閱讀!!
也因此，你的讀者會越來越多~~
也因此，你的回文會多上加多，比玉山高、比喜馬來雅山高，更比你爺爺還要高!!
也因此，………

透過下面這一段Blogger的語法的修改、增加，可以把原作者的回應利用顏色來區隔
方便其他人的辨識、閱讀!!

Step 1: 登入Blogger並進入修改HTML頁面

Step 2: 勾選"展開小裝置範本"

Step 3: 先找到CSS的段落，並加入下面的CSS語法，紅色部份為你的文章要用什麼顏色Highlight
.comment-body-author {
margin:0;
padding:0 0 0 20px;
}
.comment-body-author p {
font-size:100%;
margin:0 0 .2em 0;
color:#CC3300;
text-decoration:bold;
}

Step 4: 張大你的眼睛，找到下面這一段語法
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'> <data:comment.body/> </span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

Step 5: 在它的上面及下面各加上下面紅色部份語法
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'> <data:comment.body/> </span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>

Step 6: 打完收工，按下儲存

如此，以後就不會反客為主、圖地反轉囉~~

※參考來源：
．Ben's部落不及格: 把部落主人的話給擦得火亮

這個功能是我會來用Blogger的一大"助燃物"
很久以前就知道Blogger了，也很喜歡它的版面設計，可是它的Post文章並沒有辦法將abstract跟content分開
而是整篇文章一次秀出，這對較長的文章而言會造成版面的負擔
直到看到這個功能，才有了解決方案

這個功能是利用Java Script達成，不像其他網站的"繼續閱讀"功能是換頁顯示完整的文章，它是在同一個頁面將content的部份折疊起來，當你點"繼續閱讀"時它直接延展開，不用再重新讀取，方便又快速!!閱讀完畢時，又可折回去，不占版面空間，相當的方便 ^_^

實作方法如下：

Step1: 將這行加到<head>裡
<script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' />

Step2: 找到下面這段，並加入紅色的部份
<b:includable id='post' var='post'>
<div class='post' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>

Step3: 同樣，再找到下面這段，並再加入紅色的部份
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>

<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);'
expr:onclick='"javascript:showFull(\"post-" +
data:post.id + "\");"'>[+/-] Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);'
expr:onclick='"javascript:hideFull(\"post-" +
data:post.id + "\");"'>[+/-] Summary only...</a></p>

</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats --></div>

※若要更改"顯示文字"，請自行更改上頭程式碼裡頭的綠色部份的兩個文字標籤...

Step4: 基本上這樣就完成了! 最後，使用方式為，貼文時將欲折疊的部份用下面的TAG包住即可
<span id="fullpost"> 想要折疊的部份 </span>

※參考來源：
．Hackosphere -> Expandable posts with Peekaboo view
．How can I make show/hide links for my posts?
．Kaie's Blog-[Blog] Expandable posts with Peekaboo view (blogger beta)


google的Blogger的template並沒有提供"最新文章"、"最近回應"等等的widget在sidebar上
對於其他的Blog平台轉換過來的使用者來說，還是有些許的不方便
這邊就教大家如何快速的利用Blogger的網頁元素把這兩個功能加回去囉!!

Step1. 首先進入後台，並進入"範本"的TAB，並進入"網頁元素"的畫面，進而新增個網頁元素囉

Step2. 如下圖，新增個"資訊提供"的網頁元素


Step3. 資訊提供的URL分別填入如下(紅色部份請自行修改成您的BLOG位址
A. 最新文章：http://douglas-cyli.blogspot.com/feeds/posts/default
B. 最新回應：http://douglas-cyli.blogspot.com/feeds/comments/full

Step4. 最後最重要的，就是要儲存囉，打完收工!!!

很讚的一個CSS，非常適合我們這種死工程師
即愛分享code，又要把reference給寫出來時，這種block就真的很簡潔明瞭

樣式跟程式如下所示
/* CSS for Code Block in content */
code.code {
display: block; /* fixes a strange ie margin bug */
font: $bodyFont;
font-size: 10pt;
overflow:auto; /* 是否顯示scroll bar*/
background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y;
border: 1px dashed #ccc;
padding: 10px 5px 10px 20px;
margin: 5px 0 0 15px;
max-height:250px;
line-height: 1.2em;
}

code.ref{
display: block; /* fixes a strange ie margin bug */
overflow:auto; /* 是否顯示scroll bar*/
background: #fff url(http://chenkaie.googlepages.com/Code_REF.gif) left top repeat-y;
border: 1px dashed #333;
padding: 10px 5px 10px 20px;
margin: 5px 0 0 15px;
font-size: 13px;
font: $bodyFont;
line-height: 1.6em;
}
第一個控制的是code的部份，第二個則是控制reference的部份囉!!
就加在內的CSS語法中即可!!

PO文時，使用方法如下：
<code class="code"> 程式的部份 </code>
<code class="ref"> REFERENCE的部份 </code>
※參考來源：
．良人的大秘寶-[筆記]在文章裡顯示優質的程式碼區
．Kaie's Blog-[CSS] A Cool blockquote for "Code style" and some blogging tips