Kaie's Blog: blogger hack

Showing posts with label blogger hack. Show all posts

[Blogger Hack] Comment Photo Hack (在Comment處顯示回應者圖片)

　　這個Blogger Hack我已經使用很久了，也是我個人非常喜愛的一個Hack，在我的Kubrick版型中，也有提供之功能!我覺得在回應文章時，同時顯示回應者的圖像是很酷的一件事，看圖片很快就可以辨認出是某某某，同時此iCon也具有特別的意義，像徵著你的Blog Spirit..等同於一個人的網路身份..口桀口桀 (XD..當我在亂講就好...是我個人特別癖好罷了)，當初在找這個Hack的時候，覺得明明Blogger就可以自行提供個人Profile Image的link，很簡單就可以辦到了，沒什麼技術上的問題，但為啥不提供...後來在Google Groupgs有看到，聽說官方的回應是，會有關於安全性方面的問題，所以不提供...至於問題是如何，當然就沒提到囉...

※Demo1: example
※Demo2: 以這篇回應較多的文章來看看吧...

　　因為之前較沒空，所以一直懶得翻譯...並且有不少網友來信問說是如何弄的，所以就直接來篇翻翻教學吧，請往下看吧..

．參考資料來源：
New Comment Photo Hack (Blogger) (新方法，較簡易，底下講解此方法..)
comment photos and highlighting hack (這篇是舊方法)

Step1.首先開啟你的Template(記得要是完整的，也就是到"Edit Html"頁面勾選"Expand Widget Templates")，找到底下的code

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>

在這段code底下插入下面的code

<div style="clear:both">
<dt style="float:left;margin-right:5px;clear:both;" expr:id='"commentphoto" + data:comment.id'></dt>
<!--底下這段，針對IE修正了些小bug-->
<b:if cond='data:comment.authorUrl'>
&lt;script type=&quot;text/javascript&quot;&gt; if(typeof(commentPhotoIds) == &#39;undefined&#39;) var commentPhotoIds = []; commentPhotoIds.push({&#39;id&#39;:&#39;commentphoto<data:comment.id/>&#39;, &#39;url&#39;:&#39;<data:comment.authorUrl/>&#39;});&lt;/script&gt;                
<b:else/>
&lt;script type=&quot;text/javascript&quot;&gt; if(typeof(commentPhotoIds) == &#39;undefined&#39;) var commentPhotoIds = []; commentPhotoIds.push({&#39;id&#39;:&#39;commentphoto<data:comment.id/>&#39;, &#39;url&#39;:&#39;&#39;});&lt;/script&gt;                
</b:if>

Step2.接著往下滾，你會找到一個相對應的</b:loop>，在</b:loop>之前新增底下的code</div>
Step3.在tempalte中，找到</body>，接著將底下這段code貼在</body>上面，底下有maxwidth(限制最大圖像寬度)和defaultimage(若在Profile中沒有圖片時，所使用的預設圖片)參數供你自行調整

<script type='text/javascript'>
//<![CDATA[
  function commentPhotoDo() {
      var tag;
      for(var i = 0; i < commentPhotoIds.length; i++) { 
//上面那行，相較於原文，也作了些小修正了，解決一些怪異的行為
        tag = document.createElement('script');
        tag.type = 'text/javascript';
        tag.src = 'http://scrape.singpolyma.net/avatar.php?maxwidth=70&url='+encodeURIComponent(commentPhotoIds[i].url)+'&id='+encodeURIComponent(commentPhotoIds[i].id)+'&defaultimage='+encodeURIComponent('http://img139.imageshack.us/img139/1011/defaultavatarad7.png');
        document.body.appendChild(tag);
      }//end for var i in commentPhotoIds
  }//end function commentPhotoDo
  if(typeof(commentPhotoIds) != "undefined") commentPhotoDo(); //在首頁不執行此script
//]]>
</script>

Step4.接著就是存檔，就ok啦...快去看看你的成果吧..

．Tags: all blog blogger hack computer WTF

．Comment counts: 96 Comments

[+/-]

[公告] 更新之前發佈過的一些 blogger 相關網頁

．Tags: all blog blogger hack computer google javascript template

．Comment counts: 23 Comments

[+/-]

[AJAX/JSON] Kaie's Blog 2.0 (beta)

．Tags: AJAX all blog blogger hack computer JSON

．Comment counts: 5 Comments

[+/-]

[Template] Neo for everyone

．Tags: AJAX all blog blogger hack computer JSON template

．Comment counts: 14 Comments

[+/-]

[Javascript] Style Sheet Switcher

．Tags: all blog blogger hack computer javascript template

．Comment counts: 12 Comments

[+/-]

[Javascript] Encrypt your private blog post

　　今日在PPT上的Blog版逛到版友weijr所提到的一篇好文章，可以用來針對Blog中某一段文字給予加密，變成讓人無法理解的「火星文」 XD.. 解密過程只輸入正確的密碼之後，即可馬上在Blog上顯示出正確的「地球文」，不用重新Reload...超棒的Hack，對於此類技術性的Hack，個人超愛的…

研究所時有碰過一些跟Cryptography(密碼學)有關的東西，但只懂一點理論上的皮毛而已，沒有動作實作過，如今玩Blogger的同時，剛好有個有人心士將他所學應用在他的需求上，真是與實務面作了結合，太棒了老兄…我要向他看齊..XD。

原作者實現此Hack的用意就是: 他想要將他一些私人的、不方便公開的東西，亦或某些只想供親朋好友看的內容，記錄在公開的Blog上頭，又不失隱密性，且方便日後查詢，於是針對這些私密訊息的簡易加解密功能就如此誕生啦! (所利用的演算法是 256-bit AES，目前來說「安全性」算相當高了)

※適用範圍: 所有支援Javascript的Blog，若不幸你的Blog不支援的話，快跳槽來「Blogger」吧，保証可以隨便你惡搞的Blog平台，不會後悔的

資料來源:
Vincent Cheung -> Encrypted blog posts

快往下瞧瞧這強大的Hack吧... :D
:: Demo (展現出來的效果如下，兩種方式) ::
Key(密鑰): ie-sucks

Demo1:
Click to Decrypt text (點擊此處解開火星文，裡頭有清涼的唷)

Z0J1c4HlZqELhLfFoUOd5hH9Wu6ntYW26B4XXM24lKlRT05Z+lEDEsPVjtvqISIXoAtLKJwuksdqBpY3higDTLhYarZUgXVyyH1WY5N7hzPrP2xx0gJisgbHx2IdtoXww4Ure0hui2IcRuX26FSlxTnbIKQlLH22p7cIvQXgYak6KiV6MKaBKeiIBSKSYi5Kz8t6MSM4kIGnmzBmibsNMaPCjzb4KGmVA7xegfkyQNfPzK51Yl6SgeoENK8MUGTnbz0L1l5YT9vBYd5LxJdbf8/hwmhvY2Lzkq+iLeP9ClKIuirkwt2J3qhveuQR/tqylONAVxNccbT7e8n6j4pw85F8+4GAPDf60lbo9DuusRA=
Demo2:
Show encrypted text (點擊此處變身為火星人)

上方展現出來的效果是不是很炫呀 ^_^，超吸引人的吧，快來安裝一下吧，底下開始中文化原文..囧rz，方法如下:

首先在你的Blog中嵌入此Hack所需的Javascript，在Blogger的使用方法就是將底下的code加在Template中的</head>上面即可(其它Blog方法就是加在header裡頭就對了)<script language='JavaScript' src='http://vincentcheung.googlepages.com/blogjscrypt.js'></script>

完成上面動作之後，基本上就完成了，若要在新文章中新增「火星文時」的話，請透過底下兩個步驟:

產生加密過後的火星文:
透過此網站，輸入「Key」欄位以及「Plain Text」欄位，接著按Encrypt Button(加密鈕，在Plain Text欄的下方)，此時便會在「Cipher Text」欄位產生加密過後的火星文字啦(底下會用到..)!!
※千萬要記得上方你自行定義的Key，之後解密時要用的，若忘記了，恐怕沒有量子電腦(Quantum Computer)這般等級的高速電腦是解不出來的。
嵌入火星文片段至新文章中:
共有底下兩種顯示方式，依個人喜好選擇擇一
．方法一(如上頭Demo1，直接在文章中顯示火星文):<a href="javascript:Decrypt_text('unique_name');">Click to Decrypt text (點擊此處解開火星文)</a> <div id="unique_name">此段內容為由上面Step1.所產生出來的一整段火星文(例如:wRxSwskrWsmohc1...之類的文字)</div>

．方法二(如上頭Demo2，隱藏火星文，只顯示連結):<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即可，否則會造成判斷錯誤!!也就是在一個顯示頁面中，有用到兩個以上火星文片段的話，那麼此id的命名就必須是unique_name,unique_name1,unique_name2...之類的。

最後，作者很風趣的列舉了幾個常見問題(Faq)，很北爛的一個家伙...有興趣去看看...

．Tags: all blog blogger hack computer javascript programming security WTF

．Comment counts: 87 Comments

[+/-]

[Javascript] Add Digg vote button on Blogger Template

．Tags: all blog blogger hack computer Digg javascript

．Comment counts: 13 Comments

[+/-]

[AJAX] AJAX Labels Cloud Reloaded

繼之前的[AJAX] AJAX Labels Cloud之後，原作者Deepak又再度的補強了「AJAX Labels」的功能囉，趕緊來瞧一瞧吧...資料來源: Deepack -> AJAX Labels Reloaded
※新功能如下：

內建分頁導覽系統(Navigation-System)，之前的Hack只能將所有同一個類別的文章同時顯示在同一頁面，若文章很多時即會吃掉很多Memory...Browser也會整個被拖慢
支援在IE底下，使用以"繁體中文字"之類的 Unicode 來命名Label(標籤)!
安裝方式更加簡易

※至於所展現出來的效果，請直接點選我的Blog上方"AJAX Tags Cloud"，再隨便選個分類即可一目了然...
底下直接講解如何安裝此Hack到你的Blogger中，至於有使用之前舊版本 AJAX Labels的玩家，請自行至"原著網站"看，有詳細的解說，教你如何「升級」到新版本的AJAX Labels(本人就是從舊版升級到新版本的)，要不然直接"砍掉重練"也是可行啦.. :p

Step 1. 為了以防萬一，先備份一下你原來的template吧! 再就就是編輯你的template，找到</head>這個keyword，再將底下code貼到</head>上方。

<style type='text/css'>
#indicator {position:fixed;z-index:1000;padding:15px 0;top:40%;background-color:#FFFFFF;border:1px solid #AAAAAA;width:176px;left:50%;margin-left:-88px;text-align:center;}
#search-result {border:1px solid #AAAAAA;padding:10px;padding-bottom:30px;font-size:85%;}
.search-result-meta {background:#EFEFEF;padding:2px;}
.search-result-meta img {border-width:0;vertical-align:text-bottom;}
.search-title {font-size:1em;padding-bottom:3px;font-weight:bold;text-align:left;text-decoration:underline;}
.search-cat {display:block;padding:3px;font-size:1em;margin-top:5px;margin-bottom:5px;border-bottom:1px solid #C0C0C0;font-weight:bold;}
.search-close {color:silver;float:right;border:1px solid #F5F5F5;margin-top:10px;cursor:pointer;}
.search-result-nav {font-size:1.4em;font-weight:bold;padding:5px 0pt;text-align:center;}
</style>
<script type='text/javascript' src='http://bloggerhacked.googlepages.com/prototype.js' />
<script type='text/javascript'>
//<![CDATA[
// User customisable parameters
// ----------------------------
// maxresults - Number of results to show per page
// navFlag    - Set Navigation ON or OFF. Give 1 for ON and 0 for OFF.
// feedLabel  - Text to show for the label feed link.
// catLabel   - Label for categories.
// closeLabel - Label for Close button. You can use hypertext also.
var maxresults = 5; //一次顯示幾筆資料
var navFlag = 1;   //是否使用分頁(導灠)功能
var feedLabel = "Subscribe to"; //...該怎麼解釋呢..
var catLabel = "Sorted into:";  //...沒什麼好解釋的..
var closeLabel = "Click to close"; //...這也一樣.. XD
//]]>
</script>
<script type='text/javascript' src='http://bloggerhacked.googlepages.com/ajaxlabels.js' />

上面5個粗體字的變數，根據個人喜好，可以自行再客制化一下.. :D
Step 2. 找到底下code

<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

取代成下方

<b:loop values='data:post.labels' var='label'>
<a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' rel='tag'><data:label.name/></a>

Step 3. "假如" 你在sidebar有Label Widget的話，再作這一步驟，找到底下code

<b:if cond='data:blog.url == data:label.url'>
 <data:label.name/>
<b:else/>
 <a href='data:label.url'><data:label.name/></a>
</b:if>

取代成下方

<b:if cond='data:blog.url == data:label.url'>
 <data:label.name/>
<b:else/>
 <a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' ><data:label.name/></a>
</b:if>

Step 4. 按下此Button，再隨著說明步驟，一步一步完成...

新增此Widget的目的就是，當你點選分類標籤時，更新的內容所要顯示的地方.. ^_^，看你想放哪邊就放哪邊囉!!

Step 5. 儲存範本，結束啦...快去看看吧!! 多了..Navigation-System是不是很Cool呀!

．Tags: AJAX all blog blogger hack computer javascript JSON

．Comment counts: 18 Comments

[+/-]

[AJAX] AJAX Labels Cloud

今天在 Blogger Hacked 發現一個超棒的東西叫作AJAX Labels，也就是之前 [Blog] Peek-A-Boo view of posts in label pages 的改良版，利用 AJAX/JSON 的技術，大幅提升Blog的更新速度，效果就像此圖中所表現的(建議還是試著點圖中的"AJAX Tas Cloud"才能親身體驗「真的快、好厲害」)，感謝作者Deepak分享(very Awesome!)資料來源： Blogger Hacked: AJAX Labels接下來開始翻譯(...XD)安裝步驟：

Step1:若要此hack能夠正常運作的話，你必需在你的Blog裡使用"Prototype Javascript Library"，你可以到官網自行抓一份，放到你的空間中或者懶得話拿我的去用也無妨..^^(畢竟是Google提供的空費空間)，所以到必需在你的Template中新增底下code (放置於<head>...</head>裡頭)<script src='http://chenkaie.googlepages.com/prototype.js' type='text/javascript'> </script> <script src='http://chenkaie.googlepages.com/scriptaculous.js?load=effects' type='text/javascript'/>
Step2:接著新增核心部份程式碼，將底下連結中的程式碼仿Step1.同樣加到<head>...</head>裡頭，裡頭CSS請依照您個人喜好修改，細項說明，請參考原著解說!CSS Code & Javascript code: http://bloggerhacked.googlepages.com/ajaxlabelsscript
Step3:在你的Template中找到底下片段，有一樣的全都要修改(若不改的話，就是原本Blogger提供的效果)

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

將上面紅色部份，取代成底下：

<a expr:href='"javascript:getCat(\"" + data:label.name + "\")"' rel='tag'>

Step4:若你原先有裝Labels Cloud的話(沒有請跳到Step5.)

資料來源：
phydeaux3: Blogger Beta Label Cloud Update
phydeaux3: Code for Beta Blogger Label Cloud

若要將點擊Labesl Cloud所呈現出的效果也修改成AJAX Labels的樣式的話，請將底下：<a expr:href='data:label.url'><data:label.name/></a>修改成底下的樣子<a expr:href='"javascript:getCat(\"" + data:label.name + "\")"' rel='tag'><data:label.name/></a>
Step5:新增一個"HTML/Javascript" Page Element放置於"Blog Posts" Element的上面(可隨個人喜好修改)，裡頭的code如下(和原作不一樣，原作的似乎有些小Bug，我作了一點修改，若你作完不行的話，請參考原著)：

<div id="indicator" style="display: none;">
<img alt="Indicator" src="http://bloggerhacked.googlepages.com/indicator.gif" /> Loading...
</div>
<div id="search-result" style="display: none;"></div>

Step6. 存檔離開就好囉....^^ 快去試試看呈現出來的驚人效果吧!!

※此AJAX Labels Cloud是抓取Blogger提供的feed中summary類別(比較精簡，為了追求更佳的速度感^^)，作為文章預覽，所以呈現出來只有一小段!
※還有預設，點選每一個Label只有呈現5篇文章，若要增加的話，請將Step2裡頭程式碼"?max-results=5"中的5改為您想要的數字即可!

[Update 2007-03-14]
原作者，發表了新版本的AJAX Labels了，請參照此處

．Tags: AJAX all blog blogger hack computer javascript JSON WTF

．Comment counts: 20 Comments

[+/-]

[Javascript] Selectable Post Font Size for your best view!

之前有看到許多網站或討論區，有可以自行選擇顯示字型大小的功能，對於視力好的人來說或許字型小了些沒什麼影響，但有些老人家..(是我嗎..XD)，有時就會覺得看得有些吃力，若能迅速的讓字型放大，不用再花時間ReLoad頁面的話，將會是個很不賴的工具!!

※當然藉由按 Ctrl++/ Ctrl+- (for Firefox)，或者是Browser提供的放大縮小功能，不然就是通用的「Ctrl+滾輪上下滾」來達到放大縮小的功能，但我這個人比較龜毛，因為這兩種功能所表現出來的文字常常是破碎或是很醜，個人無法接受...時常因為這樣不逛那個站了…囧rz，並且透過上述的方式縮放頁面字型時，是所有版面的字型都會放大，也就連帶影響到Sibebar、Header...及其它非本文章內容的部份，整個網站當初設計好的版型都變了樣，喪失美感! 因此，我在此Blog中提供三種用於縮放文章內容的合適字型讓大家選擇(位於此處)!!

至於在Yahoo Taiwan的新聞裡點進每一篇新聞之後，也有提供類似這樣子的工具，But...他每次點換字級大小之後，都必需要 Reload 部份的頁面，明明可以不用Reload的，為啥他這麼作…後來發現，廣告部份也隨著Reload換新的了...囧rz，想必這是最主要的原因吧，那是他們吃飯的工具，就給他reload一下吧...XD!!

參考資料來源：懒人图库 LAYABOUT'S GALLERY我根據上面所提供的的簡易版本，再修改成較適合於New Blogger版本 ^_^(當然再作適當的修改之後，其它Blog也都是可以套用的)。

在修改的過程中，又遇到某個語法getElementsByName在IE中的話只對表單的物件有作用...OMG..IE sux again!!還好有底下這位大哥的教學，解救了我...感恩!!
參考資料來源： IE vs. FireFox 系列 - getElementsByName問題於是，最後完整版的Javascript code (IE & Firefox 都正常) 就變成底下：

[Updated 2006-12-26] 針對留言中Benjamin網友所遇到的問題，在這裡提醒大家，貼底下code時應注意的事項：

由於Blogger在parse template語法有無錯誤時，他會檢查是否存在相對應的左括: <及右括: >，若不存在便會跟你說你的template語法沒有正確的close，導致儲存失敗。不幸的是，你若將Javascript嵌入template檔中，並且又很巧的，用到compare operator，例如：「小於:<」，如此一來他便會產生上述所提的，少了相對應的右括: >，而導語法錯誤啦! 因此，大家若要將底下這段javascript嵌入template中的話，記得將裡頭的<置換成<

<script type='text/javascript'>
function getElementsByName_iefix(tag, name) {
var elem = document.getElementsByTagName(tag);
var arr = new Array();
for(i = 0,iarr = 0; i < elem.length; i++) {
 att = elem[i].getAttribute("name");
 if(att == name) {
    arr[iarr] = elem[i];
    iarr++;
 }
}
return arr;
}

function doZoom(size)
{
var zooms = getElementsByName_iefix("span", "zoom")
for (var i = 0; i < zooms.length; i++) {
  zooms[i].style.fontSize = size+'px';
}
}
</script>

之後，因為我只讓本文內容(Post.body)的字型大小可供縮放，因此編緝template內容，將裡頭找到的所有

<p><data:post.body/></p>

都置換成底下的樣子

<span name='zoom'><p><data:post.body/></p></span>

如此，就可以將被 name='zoom' 的span tag包住的那些內容，賦予字型縮放的功能!!

最後在將你要提供此項功能的界面，填入此段程式碼即可，裡頭的數字以px為單位：

<a href="javascript:doZoom(16)">大</a>
<a href="javascript:doZoom(14)">中</a>
<a href="javascript:doZoom(12)">小</a>

※展示出來的功能，請參照此圖，並加以操作看看…

．Tags: all blog blogger hack computer IE javascript WTF

．Comment counts: 58 Comments

[+/-]

[CSS] A Cool blockquote for "Code style" and some blogging tips

資料來源：
良人的大秘寶 -> [筆記]在文章裡顯示優質的程式碼區

個人覺得蠻有質感的 ^_^ a nice css design!! 感謝「良人的大秘寶」的分享!! 樣式就如同下面的code block所示。

code  {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 9pt;
overflow:auto;
background: #f0f0f0 url(http://chenkaie.googlepages.com/Code_BG.gif) left top     repeat-y;
border: 1px solid #ccc;
padding: 5px 5px 5px 20px;
max-height:200px;
line-height: 1.2em;
margin: 5px 5px 0 15px;
}

個人依樣畫葫蘆地新增一個比較常用的參考資料來源(Reference Block，記得若要用code .ref{}這個語法的話，上面的code{...}也是不可或缺的...必需有這個code{..}存在的前提，code .ref{...}才會生效)，如下：

[Updated 2006-11-29]IE sucks again..囧rz! 最近發現用IE開的話，用我自訂的<reference> tag的話，在IE會失效，後來又換了<citation>這個字，沒想到還是sux...真無言，IE幹麼鎖死這麼多Keyword呀，真不知微軟在惡搞啥，給user的自由度這麼低!!
於是參考了synnwang的作法(感恩^^)，將原本底下這段

reference {
display: block; /* fixes a strange ie margin bug */
overflow:auto;
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 5px 0 15px;
}

換成下面這段，在IE才能work!!

code.ref{
display: block; /* fixes a strange ie margin bug */
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.ref> tag，方法便如下：
<code class="ref"> 引用文字的部份 </code>

※因為常在Blog上post一些教學，把在Blog貼"html code"的一些tips記錄在底下：

將 < 以 < 取代
將 > 以 > 取代
將 & 以 & 取代

如此一來，所貼出來的html code便不會被Browser給解讀為掉，而造成貼出來的code都看不到..!!

[Updated 2006-12-26]若是自行一個一個取代的話，似乎也是有些麻煩，因此個人常用的方法是：透過Nopaste之類的站，像是：http://phpfi.com/ 使用的步驟如下：

將該填的欄位填完之後，(其實只要填source這個框框即可，其餘可以略過)
接下來，依照個人喜好(若選特定的某種語言，還會有美美的關鍵字highlighting唷!)，選擇位於右下角的"-auto detect"這個選單，選好後押save鈕!
然後便會產生你所貼的source coe於網頁上:
- 若此時你用的是Firefox的話，那恭喜你了，選對Browser，省事多了! 選取你要的source code部份，接著按右鍵->檢視選取範圍原始碼(View Selection Source)
- 若用IE的話(I am sorry...IE sucks)，無法觀看所選取的特定部份原始碼，只能直接檢示所有頁面中的原始碼，再自己找尋你剛剛貼的code!(或是是我對IE不熟，若有好的檢視原始碼方式，歡迎告知我，感謝!
接著再按右鍵->複製(Copy)，即可貼到你在Blogger中編緝文章的地方囉^^，很省事吧…這是我常用的方法! 請供大家參考....若有更棒的方式，懇求大家提供給我..XD

[Updated 2006-11-29]※有時Blogging時，因為後來有Update或是有寫錯筆誤之處，便會想要加上刪除線作為Highlight，而非直接在文章中刪除，同時也比較醒目，方便讀者閱覽..作法如下：<span style="text-decoration: line-through;"> deleted text part </span>

．Tags: all blog blogger hack computer css

．Comment counts: 25 Comments

[+/-]

[Blog] Peek-A-Boo Navbar and Google Ajax BlogSearch box

為了使整個版面好看，但又不失支持Blogger的原則，還是要幫Blogger打個廣告，而且發現升級到Blogger beta之後，那個navbar裡頭的"Search Blog"這個功能，相當的不賴，他的Search Result會直接show在原本Blog中的#content-wrapper裡頭，也就是MainPage中，一整個就很像是WordPress所提供的「站內的全文搜尋」功能，個人相當滿意 :)。
※範例：像是搜尋Keyword "blog"的話，所呈現出來的結果就像這樣。

因此，我想要的呈現方式便是：將原本固定在版面上頭的navbar的行為設成：「隱藏在上頭看不到，一旦滑鼠移過去的時候，就會出現(還是有幫Blogger作個廣告吧 XD)」，然後將"Search Blog"的功能直接顯示在Sidebar中，方便搜尋 ^_^參考資料來源： Basang Panaginip -> Setup a Blog: hide or remove the navbar and add blog search box．動態顯示Navbar的方式如下，只要在template中加入此段css code即可(IE不適用..對於IE的愛用者感到萬分抱歉，請儘速轉移到Firefox...XD)：

#navbar-iframe{
opacity:0.0;
filter:alpha(Opacity=0);
}

#navbar-iframe:hover{
opacity:1.0;
filter:alpha(Opacity=100, FinishedOpacity=100);
}

．在Sidebar中加入Search Blog的功能，只要新增一個Page Element(HTML/JavaScript)，然後加入底下的code:

<form id="searchthis" action="http://YourID.blogspot.com/search" style="display:inline;" method="get">
<input id="b-query" maxlength="255" name="q" size="15" type="text"/>
<input id="b-searchbtn" value="Search" class="blue" type="submit"/>
<br/>By Google (Show result in this Blog)
</form>

至於一些個人化語法的修改，就請參考原著，不再詳述，基本上改上面的size:"Search Box的大小"，value:"所要顯示的文字"。

※由於上面那個Blog Search「目前」對於中文字的搜尋似乎還不太準確(給Google一些時間，相信他一定會改善的)，於是便需借助"Technorati"這個站的幫忙囉，可是透過他的網站所產生的javascript code，所呈現出來的樣式，並非我想的，於是便作了一些修改，拿掉些我不想要的東西 ^^，source code如下：

<script type="text/javascript">
<!--
drawTREmbed( '<div id="technorati">' +
'<form id="te_s" method="post" action="http://www.technorati.com/search.php">' +
'<input id="te_search" type="text" size="15" name="s" maxlength="255" /> <label for="te_search"> </label> ' +
'<input type=\"submit\" class=\"btn\" value=\"Search\" /> <input type=\"hidden\" name=\"sub\" value=\"searchlet\" /> <input type=\"hidden\" name=\"from\" value=\"http://chenkaie.blogspot.com\" /> <input type=\"hidden\" name=\"cc\" value=\"8hq5ubtxcg\" /> </form>' +
'Powered by <a href="http://www.technorati.com/?cc=8hq5ubtxcg"><img border="0" src="http://static.technorati.com/pix/tn-tiny.gif" alt="Powered by Technorati" /></a>'+
'<br/><a href="http://www.technorati.com/search/http://chenkaie.blogspot.com?cc=8hq5ubtxcg" id="te_lh" target="_blank" >» Blogs that link here</a>' +
'</div>'
);

function drawTREmbed(s){ document.write(s); }
// -->

</script>

．Tags: AJAX all blog blogger hack computer css google javascript search

．Comment counts: 9 Comments

[+/-]

[Blog] Random Rotating Banner Hack

這個Hack相當的棒，可以隨機在你所指定的「圖片集」中，隨機Show一張圖，用在Blog的Banner上..那就更Cool啦 ^_^，所展現的效果就在我的Blog，直接多試幾次「重新整理 F5」，就清楚了!

此功能在WordPress中已經是預設的plug-in了，藉由這個簡易的javascript，可以達成很多其它功能，像是：產生「隨機Discription」、「隨機 Background」....等等...想到什麼，就自己加吧!
以隨機Banner來說明的話，主要的作法就是利用javascript修改css style，例如原來template裡面的#header-wrapper的style:

#header-wrapper{
   margin: 0;
   padding: 0;
   font: $pagetitlefont;
   background: #e0e0e0 url(http://www.blogblog.com/tictac/top_div.gif) no-repeat 0px 0px;
}

基本上，我們的主要作法就是在每次Browser要讀取你的Blog的HTML原碼時，先利用一段javascript code，產生一個同樣的background定義，用以覆寫<body>裡頭的wrapper-header的background定義，所以記得要把底下這段code「放置在<body>之後」，就行了：

<script type="text/javascript">
var banner= new Array()

banner[0]="http://photos1.blogger.com/blogger2/4171/1279/1600/kubrickheader.jpg"
banner[1]="http://chenkaie.googlepages.com/kubrickheader_1.png"
banner[2]="http://chenkaie.googlepages.com/kubrickheader_2.png"
banner[3]="http://chenkaie.googlepages.com/kubrickheader_3.png"
banner[4]="http://chenkaie.googlepages.com/kubrickheader_4.png"

var random=Math.round(4*Math.random());

document.write("<style>");
document.write("#header-wrapper {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");

</script>

※記得上頭的"4"要一致，因為他的random產生器，填4的話，就是產生0~4這5種值!假設你只有0,1,2三張圖的話，那麼Math.round()裡頭的4就要改成2...that's all!! 若你還要隨機變換字型產色之類的動作，就再加新的document.write(...)的語法進去就ok囉!!

重要參考文獻： Freeyasoul Adventure -> Random Rotating Banner Hack

．Tags: all blog blogger hack computer

．Comment counts: 34 Comments

[+/-]

[Blog] Peek-A-Boo view of posts in label/archive pages

很棒的 Blogger Hack，不僅具有和 [Blog] only show "Post Title" at Lable and Archive Page 這篇同樣的功能，更可以支援直接擴展(Expandable)，可以加速網頁的開啟的速度... Very Cool !!

例如：[Blog]所展現出來的行為。
實作方法如下：

Step1:將底下這行加到你的template的<head>裡頭(也就是在</head>之前就對了)。
[Updated 2007/07/14] 由於原作者hosting這個javascript file的空間，已經無法承受，請繼續看底下code框框中的更新作法

將原本這一行程式碼<script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' /> 
拿掉，置換成底下這一段程式碼
<script type="text/javascript">
function toggleIt(id) {
	post = document.getElementById(id);
	if (post.style.display != 'none') {
		post.style.display = 'none';
	} else {
		post.style.display = '';
	}
}

function showFullPost(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost")
                 spans[i].style.display = 'inline';
             if (spans[i].id == "readmore")
                 spans[i].style.display = 'none';
        }
}

var fade = false;
function showFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 if (fade) {
                    spans[i].style.background = peekaboo_bgcolor;
                    Effect.Appear(spans[i]);
                } else spans[i].style.display = 'inline';
             }
             if (spans[i].id == "showlink")
                 spans[i].style.display = 'none';
             if (spans[i].id == "hidelink")
                 spans[i].style.display = 'inline';
        }
}

function hideFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 if (fade) {
                   spans[i].style.background = peekaboo_bgcolor;
                   Effect.Fade(spans[i]);
                 } else spans[i].style.display = 'none';
             }
             if (spans[i].id == "showlink")
                 spans[i].style.display = 'inline';
             if (spans[i].id == "hidelink")
                 spans[i].style.display = 'none';
        }
        post.scrollIntoView(true);
}

function checkFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        var found = 0;
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 spans[i].style.display = 'none';
                 found = 1;
             }
             if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
                 spans[i].style.display = 'none';
        }
}
</script>

Step2:修改成如下，新增紅色字所顯示的部份 (記得把 Expand Widget Templates 選項打勾，才可以看到完整的code)

<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr>
<td width='40px'>
<a href='javascript:void(0)' title='Expand/collapse this post' style='text-decoration:none' expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"'>[+/-]</a>
</td>
<td>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
</td>
</tr></table>
<div class='post-body' expr:id='data:post.id' style='display:none'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
</b:includable>

<b:includable id='main' var='top'>
<!-- posts -->
<div id='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:include data='post' name='PeekABooPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
      <b:include data='post' name='post'/>
</b:if>

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</div>

※若要改變樣式，請自行更改上頭程式碼裡頭的"[+/-]"這個符號...

Step3: 沒有了，就這樣子而已...快去測試看看你的Label和Archive頁面吧...^^

．參考文獻：Hackosphere -> Peek-A-Boo view of posts in label/archive pages

．Tags: all blog blogger hack computer WTF

．Comment counts: 33 Comments

[+/-]

[Blog] Expandable posts with Peekaboo view (blogger beta)

這個功能，個人覺得比起之前的「"...Read More"篇」的更為實用，因為不需要重新載入新的頁面，直接就打開來...反應速度更快，閱讀完畢時，又可馬上縮起來，不占版面空間，相當的方便 ^_^

．實作方法如下：

Step1:將底下這行加到你的template的<head>裡頭(也就是在</head>之前就對了)。
[Updated 2007/07/14] 由於原作者hosting這個javascript file的空間，已經無法承受，請繼續看底下code框框中的更新作法

將原本這一行程式碼<script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' /> 
拿掉，置換成底下這一段程式碼，若你沒有加過以上那一行的，就略過，直接加以下這段code...
<script type="text/javascript">
function toggleIt(id) {
	post = document.getElementById(id);
	if (post.style.display != 'none') {
		post.style.display = 'none';
	} else {
		post.style.display = '';
	}
}

function showFullPost(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost")
                 spans[i].style.display = 'inline';
             if (spans[i].id == "readmore")
                 spans[i].style.display = 'none';
        }
}

var fade = false;
function showFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 if (fade) {
                    spans[i].style.background = peekaboo_bgcolor;
                    Effect.Appear(spans[i]);
                } else spans[i].style.display = 'inline';
             }
             if (spans[i].id == "showlink")
                 spans[i].style.display = 'none';
             if (spans[i].id == "hidelink")
                 spans[i].style.display = 'inline';
        }
}

function hideFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 if (fade) {
                   spans[i].style.background = peekaboo_bgcolor;
                   Effect.Fade(spans[i]);
                 } else spans[i].style.display = 'none';
             }
             if (spans[i].id == "showlink")
                 spans[i].style.display = 'inline';
             if (spans[i].id == "hidelink")
                 spans[i].style.display = 'none';
        }
        post.scrollIntoView(true);
}

function checkFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        var found = 0;
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 spans[i].style.display = 'none';
                 found = 1;
             }
             if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
                 spans[i].style.display = 'none';
        }
}
</script>

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>

※若要更改"顯示文字"，請自行更改上頭程式碼裡頭的"[+/-] Read More..."和"[+/-] Summary only..." 這兩個文字標籤...
Step4:基本上這樣就完成了! 最後，先登入Blogger，再到「Settings->Formatting」，將<span id="fullpost"> 想要隱藏的部分 </span>填入Formatting的框框裡即可，如此一來，每次編輯新文章時，即會自動填入所需的程式碼囉 ^_^ oh ya!!
※注意是span，並非如同之前這篇「"...Read More"篇」所提到的，是用div...請小心!!

※參考文獻：
．Hackosphere -> Expandable posts with Peekaboo view
．How can I make show/hide links for my posts?

．Tags: all blog blogger hack computer css WTF

．Comment counts: 108 Comments

[+/-]

[Blog] adding "...Read More" tag in Blogger beta

．參考資料來源：有關 Blogger in Beta-水瓶子 Hackosphere轉錄文章來源： Blogger Beta 繼續閱讀功能改良
一般在blogger上使用繼續閱讀功能的方式都是在想要隱藏的文章上放上tag，然後再利用css的display:none來隱藏該篇文章，由於display:none所隱藏的部份，不論是在IE或是Firefox下瀏覽，一樣都會把隱藏部份下載到cache，所以如果首頁的文章過長或是圖片過多，一樣會影響到首頁的瀏覽速度。

所以這篇利用Javascipt，把想要隱藏的文章直接remove掉，提高首頁的讀取效率，並且還具有Read More標籤適時才出現的功能。
首先進入編輯html，請記得把Expand Widget Templates打勾，然後在<head>間放入Javascript code
<script type="text/Javascript"> function hidePost(postUrl) { var label=document.getElementById("fullpost"); if(label!=null){ eA = document.createElement("a"); eA.setAttribute("href",postUrl); eA.setAttribute("title","Read More"); eA.appendChild(document.createTextNode("...Read More")); eB = document.createElement("p"); eB.setAttribute("id","read-more"); eB.appendChild(eA); label.parentNode.appendChild(eB); label.parentNode.removeChild(label);} } </script>

接下來找到
<p><data:post.body/></p>
用下面的code取代它
<p><data:post.body/></p> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.url'> <script type='text/javascript'>hidePost('<data:post.url/>');</script> </b:if> </b:if>
最後，把想要隱藏文章部份的tag中，加入id="fullpost"就完成了，即
<div id="fullpost"> //隱藏部分的文章 </div>
※註：Chagg says:「目前測試，在IE下確實有提升讀取效率，不過在Firefox下好像沒什麼用，照樣還是把隱藏部份下載到cache 囧rz，目前還在想有什麼方法可以對付Firefox」

．手動加id="fullpost"的動作如何自動化呢：