Kaie"s Blog 2.0 beta!
Back to "Top"

My Secret Notebook
 Show "Table of Contents"
Contact Me
Subscribe to my Posts feed
Subscribe to my Comments feed
My Flickr
Back to "Top"
My Secret Notebook
 Show "Table of Contents"
Contact Me
Subscribe to my Posts feed
Subscribe to my Comments feed
My Flickr

Wednesday, December 13, 2006

[Template] Kubrick style for Blogger beta

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

.底下為預覽圖:

  • 這裡有示範網站 Demo / Example
  • 以按右鍵->另存新檔的方式下載此 TemplateTemplate (二選一)
    (※注意事項:請把原先的作好備份,以備不時之需!!套用時,要先把沒用的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>

108 Comments:

Who: 維克 Class:
When: December 14, 2006 4:48 PM  

Kaie大大,謝謝你的template。
可否給我Search那個欄位的語法,因為我套用之後並沒有出現...謝謝。

Who: Tsung-Kai Chen Class:
When: December 14, 2006 5:02 PM  

To 維克:
不客氣,有bug的話,再煩請回報一下...感謝
請參考我Blog中的底下這篇的作法即可!!!
[Blog] Peek-A-Boo Navbar and Google Ajax BlogSearch box

Who: 維克 Class:
When: December 14, 2006 5:42 PM  

感謝Kaie大,Search Bar已經OK了。不好意思又有其他問題,我想換Banner,我去了Kubricker的網站,依照步驟,最後會可以下載自己選的圖片。之後是不是要自己上傳到網路空間?之後得到的網址是不是貼到 #header-wrapper { 的 background
url那邊? 我貼了之後沒有反應..請大大指點一下,謝謝。

Who: Tsung-Kai Chen Class:
When: December 14, 2006 5:49 PM  

To 維克:
你說的步驟感覺都沒錯...再詳細檢查看看,語法那邊,還是網址搞錯...不然應該是要正常的才對!!

還有你有限制Blog的Reader權限的樣子,所以我無法幫你看是怎樣....

Who: 阿霈 Class:
When: January 05, 2007 2:41 AM  

Kaie大大 你好
你的 read more的那個功能實在是太棒了
可是無論我是用你提供template
還是我自己按照你blog上的方法
都不成功

如果我用你提供的template 就會連read more的標籤都看不到~但我套用官方的template 就會出現"read more"但是沒有效果

如果是用其他template 加入那段語法 就會出現:"你的語法未正確關閉....balabala的

困擾了許久....

因為申請了blogger 讓我對這些語法產生了興趣~不知有無推薦的入門書籍呢
當然希望是中文的最好 XD

一堆問題 真是不好意思 ^^
麻煩你了 謝謝

Who: Tsung-Kai Chen Class:
When: January 05, 2007 3:19 AM  

To 阿霈:
用我提供的template還會連read more都看見,這還真的頗奇怪,應該不致這樣子呀..XD
你有確定以底下的寫法:
<span id="fullpost"> 想要隱藏的部分 </span>寫你的Blog嗎? ...試著這麼作看看..^^

恭喜你對Blogger的語法產生興趣,我也是這麼樣子一步一步學來的...一開始也是完全的門外漢..囧rz..

書的話,倒是沒有看過半本...因為我習慣利用網路上的資源,不介意的話,我之前寫的一篇給你參考.. http://0rz.tw/dd2im 謝謝你支持我的template,感激^^

Who: 阿霈 Class:
When: January 05, 2007 6:28 AM  

Kaie大大
我似乎是找到原因了
只要我在輸入以下:<script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' />

就不能顯示 read more

如果沒輸入 就會顯示但無效果

請阿凱大指點一下

Who: Tsung-Kai Chen Class:
When: January 06, 2007 3:19 AM  

To 阿霈:
真是奇怪,沒道理呀..XD
不然你把那行換成這個試試:
<script src='http://www.anniyalogam.com/widgets/hackosphere.js' type='text/javascript'> </script>

Who: viprr Class:
When: January 08, 2007 3:11 AM  

請問一下喔,在這個Template最底端有個"訂閱:文章(Atom)" ,我不想要的話要改哪裡??

Who: Tsung-Kai Chen Class:
When: January 08, 2007 3:33 AM  

To viprr:
找到底下程式碼,並刪除之...即可
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>

Who: viprr Class:
When: January 08, 2007 3:06 PM  

3Q

Who: angus Class:
When: January 13, 2007 12:25 PM  

http://nofancyname.blogspot.com/

這種版面是怎樣設計??
可否幫我呀?

Who: Anonymous Class:
When: January 21, 2007 3:08 AM  

不好意思,想跟您請教幾個問題!!
如果想像您這樣在Serarch、Author上
加上圖片的話,我該從哪邊下手改呢?

若我想把背景改為圖片的話,
又該搜尋哪段來更改呢?!

實在很不好意思麻煩您,
倘若可以的話,請幫幫我!!

Who: Pinocchio Class:
When: February 02, 2007 12:15 PM  

Hi kite,

我試過換banner但不成功, 請指教. 謝!

Who: Ryan Xie Class:
When: February 07, 2007 8:24 PM  

請問
我使用了你的template後, 我原本連接了flickr的相冊. 但是現在卻在sidebar顯示. 我希望能把flickr放在blog1的下面. 應該如何調整呢?

Who: Tsung-Kai Chen Class:
When: February 09, 2007 5:38 PM  

To Anonymous:
要加圖片的方式有很多種,我是利用css,方法的話,請直接檢示我的css原碼即可!背景改成圖片的話,也是藉由改css就可以輕易達成囉,主要就是改底下
body {
background:#333 url(http://Your Image);
}

To Pinocchio:
後來我看到你的Blog,應該是換成功囉…對吧!! 若還是有問題,請你再留個言囉,我再幫你解答..^^

To Ryan Xie:
關於這點的話,你只要將你原相放flickr相冊的那段語法的那個"Page Element"拉放Blog1這個"Page Element"的上方即可... :)

Who: 白狐 Class:
When: February 13, 2007 2:39 PM  

你好!
我想利用這個模版改建成具有自我風格的模板
在此先謝謝你
只是我還有一個問題:
如何把繼續閱讀的[+/-]Read More改成中文的(繼續閱讀)?
另外旁邊的sidebar的標題可以放圖嗎?(例如我想在search左邊放一個小放大鏡)

Who: Tsung-Kai Chen Class:
When: February 17, 2007 2:42 AM  

To 小狐:
很簡單,只要…搜尋template原始檔中的關鍵字"[+/-]Read More",然改成"繼續閱讀"就行囉...
至於第二個問題,放圖檔當然可是辦得到的囉…作法如下:
將template檔裡css中的
.sidebar h2{..略..} 改成底下樣子
.sidebar h2 {
background:url(http://你的圖檔位置) no-repeat 0px 0px;
font: normal bold 110% 'Lucida Grande';
margin:5px 0 5px 0;
padding-left:15px;
}
即可達到你要的目的囉 ^_^

Who: alex Class:
When: March 11, 2007 8:57 PM  

你好,這的確是非常棒的範本,矩形圓角是最吸引我的,想請問一下,因為我文章裡都放flickr的相片,解析度正幾乎都是500*375,套用這個範本之後,側邊攔就會被擠到最下方去,如果說我想加寬文章的寬度,那該改哪個地方好呢?

Who: Anonymous Class:
When: March 11, 2007 11:39 PM  

kaie你好:
顯示註解者的個人圖像,
如果想把圖像換位址該怎麼作?
例如擺到 comment-body p 右上角。

Who: Tsung-Kai Chen Class:
When: March 12, 2007 8:19 AM  

To Alex:
記得你提到的問題,我之前有遇到過..我也已經修正過了,在這篇文章裡頭有提到(雖然是針對classic版本的template,但新的template也是通用的) [Blog] Overflow problems in IE (sidebar appears at bottom of blog),所以應該是沒問題才對...不知是哪裡疏忽了,若方便的話,借我看看你的Blog會比較了解問題所在.. :d

Who: Tsung-Kai Chen Class:
When: March 13, 2007 8:37 AM  

To Anonymous:
修改底下部份就可以達到你的要求了.. :D
.commentphoto img{
float: left; /*將left改為right就是置右囉*/
padding: 2px;
border: 1px solid #333;
margin: -25px 10px 0px 40px;
}
* html .commentphoto img { /*IE only 針對IE的用戶,記得改這一段*/
float:right;
margin: -25px 0 0 0;
}

Who: Cristiano A. Class:
When: April 28, 2007 2:40 AM  

Hi, Kaie.

I'm using your template in my blog, but had a problem: in PC's Firefox, the sidebar title text doesn't appear with the font Trebuchet MS or Lucida Grande, but with a font with serif like Times New Roman. I tried to edit the code, but don't find nothing wrong:


Variable name="sidebarheaderfont" description="Sidebar Title Font"
type="font" default="normal bold 100% 'Trebuchet MS','Lucida Grande'" value="normal bold 100% 'Trebuchet MS','Lucida Grande'"

What can I do to fix this?

Sorry for my poor english (I'm brazilian) and thanks a lot!

Who: Tsung-Kai Chen Class:
When: April 30, 2007 1:39 AM  

To cristiano a. :
I seen your sibebar title in the font of 'Lucida Grande'... so it doesn't goes wrong , maybe u have setting the browser's default font type.. just guessing!!
Btw, sorry for my poor English too..I came from Taiwan

Who: Eric Class:
When: May 17, 2007 2:02 AM  

Hi, Kaie

我和alex有一樣的困擾
不過我想要的是把文章部份的寬度增大
比如說改成550 px
(因為Flickr的圖大多為500x375)
我自己有先嘗試修改
像是Outer-wrapper、Content-wrapper、Main裡面的Width
但是版面反而變得很醜很多東西都跑掉
自己對於CSS又不是很熟悉
請問能不能教我如何把文章的寬度增大
又不會讓整個版面跑掉?

感謝

Who: Tsung-Kai Chen Class:
When: May 17, 2007 8:12 AM  

To Eric:
大概把以下我有提到的部份修改成你要的
#outer-wrapper {
width: 900px;
margin: -5px auto 20px;
}

#content-wrapper {
width: 900px;
}

#main {
width: 550px;
border-right: 1px inset #fff;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /*fix for long non-text content breaking IE sidebar float */
}

接下來就是將你的header圖片,及footer圖片改成大符合你blog寬度的的size!!

Who: Eric Class:
When: May 17, 2007 1:30 PM  

Hi, Kaie

我以改成功了
謝謝你的幫忙!

另外我也改好了圖片
若有網友需要可自行下載
Header
Footer
BG

Who: Anonymous Class:
When: May 23, 2007 2:31 PM  

想要自己來設計blogger的樣式
可是不知道從何下手
不是很了html和css
如果要學的話
是該從哪邊著手呢??

Who: Tsung-Kai Chen Class:
When: May 23, 2007 2:42 PM  

To Anonymous:
若要自行設計blogger樣式的話,我想了解基本的HTML跟CSS是必備的,我之前有整理過,在這篇文章中 [CSS] Good Articles & Sites about CSS 介紹了蠻多不錯的站,你可以參考看看…接下來請務必使用Firefox,再裝上Firebug這個extension,超好用的,而且能夠幫助你快速學習HTML/CSS...

Who: Anonymous Class:
When: June 18, 2007 1:12 AM  

您好~我套用您的template之後,結果blogger上面那個bar不見了,現在不知道該如何進控制台修改耶...

Who: Tsung-Kai Chen Class:
When: June 18, 2007 11:37 AM  

To Anonymous:
找到template中的底下部份
------------------------------------
#navbar-iframe
{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover
{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
------------------------------------
通通刪掉即可..

Who: Rex Class:
When: June 19, 2007 1:59 AM  

凱哥你好:
感謝你的template,真的很棒耶~
不過我有個地方想請教您!
我想把readmore改成展開/收合的模式,但是我不知道怎麼該...於是我把template內建的刪掉,然後再到josh's note那兒安裝懶人版的繼續閱讀,結果變成完全不能打開!按了都沒反應!
唉 怎麼會這樣呢

不好意思,感覺好像問了蠢問題><

Who: Tsung-Kai Chen Class:
When: June 19, 2007 9:18 AM  

To Rex:
咦…這個template原本就具有展開/收合的模式了,只是不知您是否清楚知道,使用的方法…不然你可以參考一下這篇 [Blog] Expandable posts with Peekaboo view (blogger beta) ,重點在step4.,若你照著作的話,就能夠成功使用"展開/收合"的功能了.. :)

Who: Rex Class:
When: June 19, 2007 11:26 AM  

原來如此,是我漏掉了,果然可以了!謝謝 : )

不過有沒有辦法改成自動設定只顯示x行摘要呢?再次感謝 m(_ _)m

Who: Tsung-Kai Chen Class:
When: June 19, 2007 11:51 AM  

To Rex:
這個的話,就要套用別的Hack才行了!!我這個template並無加入此一功能唷...

Who: C Class:
When: June 22, 2007 11:51 AM  

Hi~您好:

我想請問個問題,下載這篇的模版上傳後出現了以下的訊息:

我們無法儲存您的模版
請修正下列錯誤,再重新提交您的模版。
我們無法剖析您的範本,因為它的結構不完整。 請確定所有的 XML 元素均已正確關閉。
XML 錯誤訊息: Content is not allowed in prolog.

由於是剛重新建的beta版,也沒有套用其他東西,不知道是哪裡出了問題呢?

Who: Tsung-Kai Chen Class:
When: June 22, 2007 4:15 PM  

To C:
咦...是沒貼好嗎..應該是沒這個問題才是,除非你是用classic(傳統的)的tempalte..我這個template是適用於後來新版本的template :)

Who: Ping Class:
When: July 04, 2007 12:18 PM  

嗨,想請問一下...我想要換這個新模版前想要把我的widget複製起來然後貼到你提供的template上,可是我不知道該複製哪裡到哪裡噎?可以指點一下嗎?謝謝!!

Who: Tsung-Kai Chen Class:
When: July 04, 2007 2:01 PM  

To Ping:
關於這個問題,我也不知有什麼比較好的解法..就我使用的暴力法,就是將你原本的template code裡頭的底下這些code
<b:widget id='XXX' locked='false' type='OOO'>
...
</b:widget>
通通複製起來,貼到我的這個template裡頭,看你原本有幾個widget,大概就有幾個這種widget...
如此一來舊widget,便會正常的出現在新template中..

Who: Ping Class:
When: July 04, 2007 8:09 PM  

謝謝你的快速回應:D
我把舊的貼過去以後系統告訴我有語法的錯誤…試了挺久,看來肯定是貼錯了地方或多貼了某部分…不想再卡在widget這邊那麼久,於是我把你另外一個國外做的讀取速度超快模組Neo來改……哈!真剛好它是我的菜,好喜歡呢。

Anyway,謝謝你提供那麼好的部落格資源還有耐心的教學(我後來才看到你留言版外掛有人問類似的問題,= =真不好意思~你真有耐心還再打一次暴力處置法,3Q!)

Who: Tsung-Kai Chen Class:
When: July 04, 2007 11:59 PM  

To Ping:
好說好說....您客氣了!! Neo 真的是個很不賴的東西...裡頭有很多東西可以學 ^_^
我也已經看過不少外國人,將Neo再美化加工了....really cool!!

Who: hguei Class:
When: July 07, 2007 8:49 PM  

我來問問題了(舉手)
data:post.link
data:post.url

這2個好像都是指文章連結,請問差在哪呢??

Who: Tsung-Kai Chen Class:
When: July 08, 2007 11:22 PM  

To hguei:
其實這兩個並不太一樣,當你在 控制主頁->設定->顯示連結欄位 設定為"是"的時候,你在張貼新文章時,你可以在"連結"這個欄位給定值(某個網頁的url),當有人click你這篇文章的Title時,他會連結到你剛所指定的那個url,若此時你沒有填入值的話,他預設就是此篇文章的連結,也就是等於post.url這個值。
若你那個選項設定為"否"的話,那麼你的template中post.link的這個值並不存在...
不知我這麼解釋你懂不懂..XD!!

Who: hguei Class:
When: July 08, 2007 11:36 PM  

原來如此,之前一直都是關著的難怪搞不懂,thx^n

Who: 失控棒棒糖 Class:
When: July 09, 2007 3:46 AM  

hi Kaie:
我前幾天拿此樣板作加工,可是舊文之前隱藏的文章卻不來,我有嘗試把之前的固定語法刪掉,但文章底下卻還是出現繼續閱讀...點繼續閱讀也沒有反應!
可以請問你此模板的繼續閱讀語法是哪些嗎?我刪掉在重新加入好了!感恩!
這樣不能看舊文..有點恐怖:Q

Who: Tsung-Kai Chen Class:
When: July 09, 2007 8:35 AM  

To 失控棒棒糖:
語法的話,在這篇 [Blog] Expandable posts with Peekaboo view (blogger beta)
別害怕 ^_^ 文章內容不會不見的...

Who: littletrip Class:
When: July 09, 2007 9:10 AM  

Kaie你好,我最近使用了這個template
也遇到了跟之前的人同樣的問題
就是在文章後面完全沒出現+/-read more
但假如把程式碼套用在其他template上就會出現
不知道該怎麼解決呢?

Who: littletrip Class:
When: July 09, 2007 9:55 AM  

不好意思又是我,想順便問一下,navigation bar的框框要怎麼做呢?我也想把他弄成那你那樣背景是白色的,這樣看起來比較明顯,麻煩你教教我了,謝謝!

Who: Tsung-Kai Chen Class:
When: July 09, 2007 11:11 AM  

To littletrip:
若要出現read more的話,在張貼新文章時,必需要有底下這行html語法,在你的文章中
<span id="fullpost"> 想要隱藏的部分 </span>
,也就是在這篇文章([Blog] Expandable posts with Peekaboo view (blogger beta))中Step4.的動作才行唷,不加的話,就是在此篇文章中,不使用read more的功能。
關於第二個問題,其實那個框框不是額外加的,是那個小圖示,原本就有底框了..XD!! 瞧瞧 http://chenkaie.googlepages.com/ArchiveIcon_BG_G.png

Who: Chris Class:
When: July 13, 2007 5:15 AM  

Hi 您好
我想跟您請教一下,我再套用您的模板時
出現了跟C一樣的錯誤訊息..

不知道要怎麼才能夠知道自己所用的template是classic template還是新的template?

又,如果是classic,要怎麼轉換為新的呢?

感謝:)

Who: littletrip Class:
When: July 13, 2007 6:34 PM  

Kaie你好!上次繼續閱讀的部份我已經成功弄好了,一切正常,只是今天突然出了點問題,用safari跟ie按下“繼續閱讀“之後都沒反應,但是用firefox卻又可以,這是什麼問題呢?

Who: Tsung-Kai Chen Class:
When: July 14, 2007 2:30 AM  

To Chris:
檢查你的template原始碼是否含有<b:widget這個型式的code,若沒有的話,代表你的就是classic的template..
To littletrip:
因為原作者的hackosphere.js這個javascript library 換空間了,所以這功能就失效了,在Fx下應該也是不行的,可能當時你的cache還在,怪怪的而已.. 請再參照這一篇 [Blog] Expandable posts with Peekaboo view (blogger beta) 的step1有說明....若怕那個空間又掛掉,可以將那個檔抓下來...放到你常用的空間!!

Who: 阿倫 Class:
When: July 30, 2007 3:26 AM  

Kaie

為了向您跟Ramani致敬

我將Neo跟Kubrick合體了

http://neokubrick.blogspot.com/2007/07/blog-post.html

您可以去看看~

Who: Tsung-Kai Chen Class:
When: July 30, 2007 8:29 AM  

To 阿倫兄:
您太客氣了..還致敬勒..XD

看了你的將他們合體後的作品,很棒捏...果然變成光速Kubrick了...鐵定可以造福很多人...有空的話,我來將你這篇貼在我的文章裡...最近實在是忙呀....囧rz!

玩歸玩(通常會走火入魔,沒辦法Blogger太Free了..想怎搞都可以),書還是要讀呀,研究所還是要畢業低...

Who: borejr Class:
When: August 02, 2007 12:58 PM  

我也遇到跟C以及chris相同問題,載入template卻出現錯誤,我搜尋你說的字串,有是有啊,但是問題是該怎麼解決

Who: Tsung-Kai Chen Class:
When: August 02, 2007 1:56 PM  

To borejr:
有的話,就代表你的Blog可以適用,直接將我提供的template的code,複製貼上即可...別用上傳的試看看!!

Who: borejr Class:
When: August 03, 2007 4:26 PM  

恩,有成功,但我方法比較怪且我是用neobrick,利用它的樣版跟我原本的對照,然後原本的< div id='sidebar-wrapper' >之下的通通不動,把neobrcik的上述的之上全部複製到原本的,然後有點意外居然套用成功了,但當我要加寬整個文章版面寬度卻發生了如圖[url=http://imageshack.us][img=http://img66.imageshack.us/img66/3746/neobrickuc7.jpg][/url]右邊的出現異樣
可否幫幫忙^^"

Who: Tsung-Kai Chen Class:
When: August 03, 2007 4:52 PM  

To borejr:
將你的CSS部份,修改成如底下粗體字值..

#content-wrapper {
width: 752ppx;
}
#main {
width: 450px;
}
#outer-wrapper {
width: 752px;
}

Who: borejr Class:
When: August 03, 2007 6:54 PM  

噗~我的意思是如何整個樣版加寬而不會產生那種變形反而你還幫我修飾大小XD真抱歉,因為兩邊的空白挺大的,如同像右上角的那種版型跟字體大小切換的變形就非常體貼閱讀者

Who: Tsung-Kai Chen Class:
When: August 03, 2007 7:22 PM  

To borejr:
若要加寬的話,你所要作的就是修改這三張圖片的寬度
http://chenkaie.googlepages.com/kubrickfooter.jpg
http://chenkaie.googlepages.com/kubrickheader.jpg
http://chenkaie.googlepages.com/kubrickbg.jpg
使得它們適合你的blog寬度...

Who: borejr Class:
When: August 03, 2007 9:05 PM  

thx ^^ 搞定了

Who: 阿倫校長 Class:
When: August 09, 2007 6:17 AM  

剛突然發現kubrick的圖...

是不是bandwidth又超過了啊...

又消失了....

變成清純版的kubrick了-_-

改天把它傳到googlecode好了...

另外還有個問題

http://chenkaie.blog.googlepages.com/scriptaculous.js?load=effects

您的這個檔案...傳到我自己的googlepage或是googlecode就是沒有用...他會認主人嗎???

-_-

Who: Tsung-Kai Chen Class:
When: August 09, 2007 8:16 AM  

To 阿倫校長:
跟校長講話,好緊張呀,都不能開玩笑的 =.=
報告校長,我那個 http://chenkaie.googlepages.com的空間,常常掛點說,不知是否有方法可以查出,到底是哪個檔案吃掉太大的寬頻,記得googlepages是沒提到這功能,而且好像也不夠free讓你亂搞,不然搞個MRTG+Awstats的進去,應該就比較ok了...殘念呀!
那個檔案肯定不會認主人的,跟為他不是狗,狗才會...囧rz,校長我錯了,不該嘻笑打鬧的,你再try看看,就傳上去而已,應該沒什麼特別的方法...

Who: 阿倫校長 Class:
When: August 09, 2007 9:23 AM  

一勞永逸的方法就是傳到googlecode吧

阿土伯的hack就從來沒掛點過

你的話,可能是因為太多人用你的hack跟template了吧。。。


(打一打CANO又打出全壘打了-_-雙響炮也。。。)

Who: 阿倫校長 Class:
When: August 09, 2007 9:26 AM  

http://nautica716.googlepages.com/scriptaculous.js

你try看看。。。完全沒反應啊。。。

Who: Tsung-Kai Chen Class:
When: August 09, 2007 2:50 PM  

To 阿倫校長:
我想到為什麼了..他後面不是有參數是"?load=effects",代表是load他那整包library裡頭的effect.js,所以你不只要上傳scriptaculous.js這個檔,還缺effect.js這個..你抓這一包下來就會懂鳥http://script.aculo.us/dist/scriptaculous-js-1.7.0.zip

的確你說的傳到googlecode是比較好的方法,googlecode好像沒聽說有限流量..

Cool CANO

Who: 阿倫校長 Class:
When: August 09, 2007 7:08 PM  

呼成功了(我還把effect從scrollto後面的js全刪了,沒想到還可以跑...瘦身一半成功)

另外我把js檔全傳到google code了
不知道是不是心理作用...覺得快很多

證據會說話

http://racklin.blogspot.com/2007/02/bloggerext2js-racklingooglepagescom.html

http://ggpi.blogspot.com/2007/04/googlecodeflash.html

Who: Tsung-Kai Chen Class:
When: August 09, 2007 9:25 PM  

To 阿倫校長:
太棒了,謝謝你的意見,那我也要來跟著時代的潮流走...該不會最後googlecode太hot,用的人也愈來愈多,也被拖慢了吧...XD,那我還是低調些…口桀口桀

Who: 嘎抓 Class:
When: September 10, 2007 10:22 PM  

站長您好,這個template的回應非常奇怪,最上面是最新的,然後最早的回應反而在最下面?!我問過阿倫校長,他說他不知道如何修正...但我看其他人的blogger的回應都是從最早的到最新的....

可以請問該從哪改嗎?

非常感謝

Who: Tsung-Kai Chen Class:
When: September 11, 2007 12:10 AM  

To 嘎抓:
咦…有這個情況嗎..我看你的這篇文章 http://0rz.tw/5e32A 中的留言,第一則是「2007年6月16日 上午 8:27」,第二則是「2007年6月16日 上午 8:28」,所以第二則比較新囉..最下面的是最新沒錯呀

Who: xo Class:
When: September 19, 2007 5:34 AM  

站長您好,我上傳(直接貼上也試了)此模板時,亦出現錯誤訊息"我們無法剖析您的範本,因為它的結構不完整。 請確定所有的 XML 元素均已正確關閉。"

XML 錯誤訊息: The document type declaration for root element type "html" must end with '>'.

可以由什麼地方修正嗎?
又,我是遵照內文說明直接按右鍵存取您的模板,應不至於下載到classic版本。
感謝站長

Who: Tsung-Kai Chen Class:
When: September 19, 2007 8:32 AM  

To xo:
那麼的奇怪呀,我是習慣用貼的,我剛才才試貼了一下,是可以的,是不是你不小心沒有複製完整呀,畢竟這也沒什麼技巧,只要完整複製貼上就可以了!! 我想你再試一次吧,照你說的那個XML 錯誤訊息,意思就是你少了一個'>' 漏掉了

Who: xo Class:
When: September 19, 2007 3:09 PM  

站長您好
我的問題已經解決了,我直接去GeckoandFly網站下載了你的模板,竟然就可以用了.

真是太奇怪了呀@_@

總之謝謝站長囉

Who: Tsung-Kai Chen Class:
When: September 19, 2007 9:56 PM  

To xo:
那還真的是很怪了,我再來試看看是怎樣好了...^^",anyway 可以用就好囉..

Who: Nidoussy Class:
When: November 16, 2007 12:31 AM  

站長您好,想向您請教如何將wordpress的版型移到blogger? 那是不是很大的工程呢?我喜歡的版型是wordpress中和您取用的版本很像,可是比較窄的版本!期待您的答覆,先說謝謝了^^

Who: Tsung-Kai Chen Class:
When: November 16, 2007 8:25 AM  

To Nidoussy:
其實並不會很麻煩,只要搞懂HTML/CSS,就可以了,若你是想要比較窄的版本的話,你也可以拿這個版型去調width(寬度),調成你要的的大小即可!! 慢慢調就好,反正大致ok時,即可先用一陣子,使用的過程發現不太合適的地方,再慢慢微調,最終即可達到你心中理想的樣子了!!

Who: Nidoussy Class:
When: November 16, 2007 4:15 PM  

謝謝站長的回答!我說的較窄版本是像這樣http://nidoussy.wordpress.com/ 就是...側欄位置在底部,請問這個也能靠調整寬度達成嗎?另想進一步請問若想搬動這個版型大約要如何著手?我是自學的初學者啦 >_< 所以也只能一直在網路上查資料,您是少數有提到將wordpress版型轉移到blogger而且如此成功的案子!

Who: Tsung-Kai Chen Class:
When: November 16, 2007 5:16 PM  

To Nidoussy:
喔喔,像這樣子的呀,那不只改寬度而已,還得加入其它的html才行。建議著手方向為:
1.一定要學會點HTML/CSS,不然亂增亂減亂改,也是浪費時間,不容易改成功。
2.使用Firefox,裝個Firefox的外掛,叫"Firebug",學一下如何使用,絕對能讓你如虎添翼,這外掛超棒。
3.建議你找一個template為底下也切成三個區塊的,也就是版面配置跟你要的差不多的(網路上有很多,找一下就有了),然後將那個template的Banner圖、背景圖換成如此站的 http://nidoussy.wordpress.com/ ,我想這是比較快的方法,只要改改圖和寬度即可..^_^

我一開始也是初學者,自己多上網看看HTML/CSS的教學,慢慢就會有概念了,要上手並不難,加油吧!!

Who: Tulia Class:
When: November 29, 2007 2:09 PM  

非常謝謝你的教學及相關文章,學到很多喔~
套用你的回應樣式,不過不知為何作者回應高亮度無法呈現,我確定comment-body-author和comment-body的background的顏色碼不一樣。
還有回應計數方法終於套用成功了,謝謝,不過不知道為何沒有辦法用你的漂亮的淡紅色浮動樣式。因為我不是很懂CSS,所以不確定你說的“Step1.在CSS的部份加上底下code“是要加在哪裡。
總之,雖然有些地方不成功,但是已經非常開心。

Who: Tsung-Kai Chen Class:
When: November 30, 2007 10:53 AM  

To tulia:
先說明一下,因為你的Blog有限定某些User,所以我只能猜(無法直接Debug),你的第一個問題(回應高亮度無法呈現)可能是,你的tempalte的HTML結構和我的可能不太一樣導致。和之前這個人提問的問題(http://0rz.tw/2e3lu)很像。
以Blogger template來說,css的部份就是在<b:skin>....<b:/skin>這兩個tag之間。

Who: Tulia Class:
When: December 04, 2007 4:57 PM  

謝謝你的回應喔~
不好意思,我之前顯示的部落格是我的測試用部落格,所以我有限定我自己才能讀。
我現在已經改好了。
目前我的回應是套用你的回應區的模式,我很喜歡,回應內容有框起來,滑鼠移過去時,底色會變白。不過因為不是套的很成功,所以沒有你的這麼漂亮啦~
再次感謝~~~

Who: Tsung-Kai Chen Class:
When: December 04, 2007 9:47 PM  

To Tulia:
嗯,看了之後,效果還挺不賴的呀...跟你的Template蠻搭的..^_^
不客氣,歡迎取用..

Who: 木白柏 Class:
When: December 05, 2007 1:25 AM  

不好意思請問一下..在哪裡可以改變標題中文字的位置大小..
就是你標題的
Kaie's Blog
To leave the army on 2008/4/11
這個東西...謝謝!!

Who: Tsung-Kai Chen Class:
When: December 05, 2007 1:50 PM  

To 木白柏:
你好,標題也就是我的Kaie's Blog這行,請依喜好修改這個底下這個class,若你的template裡沒有的話,請自己加入
.titlewrapper{
font-size:32px;
margin-left:100px
}
至於底下那行To leave the army on 2008/4/11,如上,請自行修改底下的這個class
.description{...}

Who: 木白柏 Class:
When: December 06, 2007 7:48 PM  

感謝!!
我成功了...
謝謝你熱心的答覆..

Who: 原上草 Class:
When: December 07, 2007 11:42 PM  

凯哥啊,谢谢你那么热心的教学,一再的麻烦你,我想问你一下,是否可以把最佳的HACK压缩成一个包提供给我们下载一下啊,或者是把你现在的模板给我们提供一下,真的太羡慕你的模板啦!!!!要是不方便的话,是否可以发到我的邮箱来给我哦?:gspysc@gmail.com

Who: Tsung-Kai Chen Class:
When: December 09, 2007 10:41 AM  

To 原上草:
我想這個Blog所有用到的外掛,我都已經寫在這篇文章裡頭了。這應該是無法全部壓在一個懶人包提供下載使用,有興趣的話,就前往[HowToDo]的連結吧。若你要懶人包的話,推薦你一個,台灣阿土伯自行開發供免費下載使用的超強Blogger懶人包,這個對初學者超好用的。

Who: Jeremy Class:
When: June 23, 2008 6:02 PM  

哪裡可以改變標題的顏色
原本是白色,但是我的背景是白色所以看不到.
example :
Kaie's Blog
 I am working for .....

想要轉去別的顏色要怎改

Who: Tsung-Kai Chen Class:
When: June 23, 2008 10:50 PM  

To Jeremy:
在css中加入底下這行吧
#header h1{color:#000}

Who: Lisa Class:
When: August 07, 2008 2:24 PM  
This comment has been removed by the author.
Who: Lisa Class:
When: August 07, 2008 6:23 PM  

nevermind lol

:D

Thanks for great job!
keepup good work


xie xie

Who: Tsung-Kai Chen Class:
When: August 09, 2008 2:36 AM  

To Lisa:
..^_^ nevermind what?!

thanks your admiration!

Who: The real Class:
When: August 11, 2008 1:51 PM  

Hi i have this layout ,
how do i make the Older posts , Home, and New posts into image buttons just like yours?

if u can not help me with that,
can u at least tell me how to
move the 3 links close together to be like
"<< Older Post | Home | Newer Post>>"
Thankyou so much

Who: Lisa Class:
When: August 11, 2008 3:02 PM  

:D

Who: Tsung-Kai Chen Class:
When: August 14, 2008 2:06 AM  

To the real:
try to add these code

#blog-pager-newer-link,
#blog-pager-older-link,
#blog-pager{
text-align: center;
font-family: 'Lucida Grande', Helvetica;
}
#blog-pager-newer-link a,
#blog-pager-older-link a,
#blog-pager a{
font-weight:bold;
color: #fff;
/*background: #c52a00 url(http://bloggerhacks.googlecode.com/files/botton_bg.gif) repeat-x 0 bottom;*/
background: #c52a00 url(http://bloggerhacks.googlecode.com/files/buttonBG.gif) repeat-x 0 -1px;
border: 1px solid #555454;
color: #fff;
cursor: pointer;
height: auto;
padding: 0.2em 0.5em;
}

Who: Anonymous Class:
When: August 24, 2008 5:41 PM  

how do you add a red number in the right corner of each comments? thanks

Who: Tsung-Kai Chen Class:
When: August 25, 2008 1:03 AM  

To Anonymous:
view my blog source code, and find this keyword:「title='Just Comment Index'」, you would understand how it works.

Who: Anonymous Class:
When: August 26, 2008 2:42 PM  

Tsung-Kai, i looked at the source code and found a script.

sorry, i still dont understand.
:(
lol

i have your kubrick layout...i just want to add the red number to corner of the comment bubble like yours. If it is complicated, then i only want the red number. (No need it to grow big and small on hover.)

Sorry to bother you, thanks.

Who: Tsung-Kai Chen Class:
When: August 26, 2008 11:41 PM  

To Anonymous:
find this line
---
<b:loop values='data:post.comments' var='comment'>
---
and replace it with below
---
<script type='text/javascript'>Index = 1;</script>
<b:loop values='data:post.comments' var='comment'>
<span class='CommentIndex' title='Just Comment Index'><script type='text/javascript'>document.write(Index); Index= Index+1 ;</script></span>
---

then add below to your css
---
.CommentIndex{
float:right;
position:relative;top:25px;left:3px;
margin-left:-200px;
font: italic bold 30pt 'Century Gothic','Trebuchet MS';
color:red;
opacity:0.3;
-moz-opacity:0.3;
filter:alpha(Opacity=30);
}

.CommentIndex:hover{font-size:80px;}
---

Who: XX Class:
When: October 07, 2008 7:51 PM  

kaie版大 非常謝謝您提供的樣版!

我加一些聯播的圖片以後 使用ie開啟網頁,

右邊的欄位就通通不見了。

顯示第382行發生錯誤,想請您指教一下!

Who: Tsung-Kai Chen Class:
When: October 11, 2008 12:00 PM  

To XX:
咦…我目前手邊也沒有IE耶,我用Mac..Xd....我用Firefox 開的確正常,看來非得要IE才看得出錯誤了..呵

Who: Anonymous Class:
When: April 14, 2009 1:03 PM  

我想把它改成宽屏
根据你26楼的方法,成功的。
但是我的header,自动更换的,你提供的这Website: http://redalt.com/Tools/Kubrickr,图片是小的。咋办?

Who: Tsung-Kai Chen Class:
When: April 14, 2009 11:46 PM  

To Anonymous:
那原本就是產生小圖的,改寬的kubrcik所需要的banner當然不適用囉..自己生一個吧..

Who: Anonymous Class:
When: April 15, 2009 9:53 AM  

有什么 生的嘛?提供个,嘻嘻。

Who: LGKE Class:
When: April 16, 2009 12:47 AM  

請問這個temp的回應圖像功能是否失效了,要怎麼修正他才好呢?

Who: Tsung-Kai Chen Class:
When: April 21, 2009 2:18 AM  

To LGKE:
參考一下這篇的第76樓留言囉

Who: 歐蒐雷米歐 Class:
When: April 24, 2009 12:38 AM  

這篇的76樓?那就是現在這篇呀?我沒有看到解決這個問題的方式耶?

Who: Tsung-Kai Chen Class:
When: April 24, 2009 10:55 PM  

To 歐蒐雷米歐:
這篇才對,拍謝
http://chenkaie.blogspot.com/2007/07/blogger-hack-comment-photo-hack-comment.html