Kaie's Blog: blog

Showing posts with label blog. Show all posts

[+/-]

[Blogger] OpenID Commenting / 已經支援OpenID留言囉!

．Tags: all blog OpenID

．Comment counts: 19 Comments

[+/-]

[Blog] 部落格觀察 (Blog Look) Top100, why?!

．Tags: blog statistics

．Comment counts: 3 Comments

[+/-]

[Blogger] Subscribe to Comments - by email! / 透過E-Mail來追踨你所留言的文章吧!

．Tags: all blog blogger

．Comment counts: 5 Comments

[+/-]

[Template] Semi-Transparent Layout in ThisbloG (半透明化模版)

．Tags: all blog css Design template theme

．Comment counts: 21 Comments

[+/-]

[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

[+/-]

[Template] Neo + Kubrick = Neobrick

．Tags: all blog computer Design template

．Comment counts: 2 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

[+/-]

[CSS] Magazine Style Drop Cap

　　來分享一下，我們時常在雜誌常見的一個首字放大（drop cap, dropped capital letter），是很受歡迎的設計元件，用來做為商業通訊、雜誌文章、書籍章節或其它公開文件的開頭…之前看到某個教學，於是也跟著玩了起來囉...底下來看幾個範例吧!參考資料來源： Mandarin Design -> Magazine Style CSS Drop Caps

．Example1:
<span style="margin:5px 7px 0 0; float:left; background: #fff; border:2px dashed #aaa; line-height:55px; font-family:華康POP2體W9,華康POP1體W9,標楷體,times;font-size:50px;color:white;">旅</span>
旅美投手王建民6日對西雅圖水手隊差一點完全比賽，投了7.1局無安打、無人上壘的比賽，鈴木一朗形容王建民「有著冷靜的外表，但內心卻是火熱的。」他說：「我喜歡他。」原本鈴木一朗想在七局上成為打出第1支安打的打者，不過左外野深遠飛球遭到松井秀喜美技接殺。

．Example2:
<span style="border: 1px solid darkkhaki; padding: 3px; background: khaki; margin-right: 6px; margin-top: 5px; float: left; line-height: 55px; font-family:華康POP2體W9,華康POP1體W9,標楷體,times;font-size:50px;color:white;" >鈴</span>
鈴木一朗在6日的比賽中，直到七局上才意識到王建民有可能會締造完全比賽，在該局第一位上場打擊之前，他詢問隊友城島健司：「現在是完全比賽嗎？」城島回答說：「是的。」鈴木一朗便告訴城島，他要擔任打破完全比賽打出第1支安打的打者。

．Example3:
<span style="float: left; line-height: 70px; padding-top: 2px;">S</span>
Sometimes all we need is a big first letter for a paragraph. No drop cap, just a big cap. It looks best when followed by way too much text. We used a font size of 56px for the first letter. If there is enough text an even bigger first-letter size looks good. The code can be adjusted for a slight overlap by adjusting the letter spacing. The color name chocolate tastes good today. There are more edible color names here.

．Example4:
<span style="border: 1px solid black; background: firebrick; margin-right: 6px; margin-top: 5px; float: left; line-height: 60px; padding-top: 2px; padding-right: 5px;">M</span>
Mike Golby might like the background color firebrick better than gold. Golby changes text colors for emphasis but if we don't specify the color for the text it will default to normal text color for that page. By the way, thanks for the Strunk and White Plumerias Mike. I noticed them when visiting your place to find an example of a color to use.

．Example5:
...
...
要如何有型，由你決定...

※以上Code中的CSS參數請自行客制化吧 >_^

．Tags: all blog computer css Design

．Comment counts: 7 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

[+/-]

[Blog] A not only Awesome but Lightning Fast Blog

．Tags: AJAX all blog computer Design JSON template

．Comment counts: 0 Comments

[+/-]

[WordPress] Theme : Vistered Little 1.6

．Tags: all blog computer Design theme WordPress

．Comment counts: 4 Comments

[+/-]

[Browser] Browser Compatibility Notes

．Tags: all blog computer css firefox IE javascript

．Comment counts: 0 Comments

[+/-]

[Template] Kubrick style for Blogger beta

由於個人很喜歡Kubrick這個源自於WordPress裡預設的"簡單中又不失美感"的一個版型 ^_^，於是將他移植到Blogger Beta的平台上 ^_^，並且加上了一些個人自認為還還不錯的功能...，只不過對於IE的親和力可能要說聲抱歉了...XD，IE實在很討人厭..囧rz，可能有一些些小bug就是了，但不會有什麼太大的影響!!

．底下為預覽圖：

這裡有示範網站 Demo / Example
以按右鍵->另存新檔的方式下載此 Template 或 Template (二選一)
(※注意事項：請把原先的作好備份，以備不時之需!!套用時，要先把沒用的widget清空，再小心將你原本的widget搬到此新 template，不然到時不見了，你會愈哭無淚的!)

．額外附加功能：

Expandable posts with Peekaboo view(Blogger Beta 摘要/全文切換之"繼續閱讀功能) [Figure]
Peek-A-Boo view of posts in label/archive pages (在Label/Archive頁面加入擴展功能 ) [Figure]
Author comment highlighting and notification (特別標示出，原Blog作者註解，用於和非Blog作者作區別) [Figure]
Comments with profile photos (顯示註解者的個人圖像) [Figure]

若你想換成自己的Banner的話，底下有一個簡單又快速的方法...really Awesome!!

Website: http://redalt.com/Tools/Kubrickr
此Kubrickr就是利用強大的 Flickr 所提供的超大圖庫，然後由裡頭的圖片產生你所想要的Banner，實在是個非常棒的應用!! 真是造福了不少人群..

所以說，你若看煩了Kubrick預設的Banner，或想要多點變化，你可以隨時輕鬆的從Kubrickr產生你所喜歡的 ^_^

若有問題，歡迎隨時留言討論...

[Updated 2006/12/13]
修正背景色的色差，與原始的Kubrick不太一樣，導致用Kubrickr所產生出來的Banner和舊版本的不一樣!! < 感謝 Orion 提供 >

[Updated 2007/07/14] 由於原作者hosting的javascript file(hackosphere.js)空間，已經無法承受愈來愈多人的存取，請繼續看底下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>

．Tags: all blog Design template WTF

．Comment counts: 108 Comments

Kaie's Blog

My Secret Notebook (我的火星文記事本)

My Flickr

[Blogger] OpenID Commenting / 已經支援OpenID留言囉!

[Blog] 部落格觀察 (Blog Look) Top100, why?!

[Blogger] Subscribe to Comments - by email! / 透過E-Mail來追踨你所留言的文章吧!

[Template] Semi-Transparent Layout in ThisbloG (半透明化模版)

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

[Template] Neo + Kubrick = Neobrick

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

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

[CSS] Magazine Style Drop Cap

[Template] Neo for everyone

[Javascript] Style Sheet Switcher

[Javascript] Encrypt your private blog post

[Javascript] Add Digg vote button on Blogger Template

[AJAX] AJAX Labels Cloud Reloaded

[AJAX] AJAX Labels Cloud

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

[Blog] A not only Awesome but Lightning Fast Blog

[WordPress] Theme : Vistered Little 1.6

[Browser] Browser Compatibility Notes

[Template] Kubrick style for Blogger beta

Themes & Fonts

Search

Author

Categories & Toc

Blog Archive

Recent Comments

Loading...

Hot Posts

Loading...

Followers

Meta & Statistics

Error! Javascript not supported here! Please enable Javascript! Kaie's Blog

Tags Cloud

My Secret Notebook (我的火星文記事本)

My Flickr

Loading...

Loading...

Followers

Kaie's Blog