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, November 29, 2006

[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記錄在底下:
  • 將 < 以 &lt; 取代
  • 將 > 以 &gt; 取代
  • 將 & 以 &amp; 取代
如此一來,所貼出來的html code便不會被Browser給解讀為掉,而造成貼出來的code都看不到..!!

[Updated 2006-12-26]若是自行一個一個取代的話,似乎也是有些麻煩,因此個人常用的方法是:透過Nopaste之類的站,像是:http://phpfi.com/ 使用的步驟如下:
  1. 將該填的欄位填完之後,(其實只要填source這個框框即可,其餘可以略過)
  2. 接下來,依照個人喜好(若選特定的某種語言,還會有美美的關鍵字highlighting唷!),選擇位於右下角的"-auto detect"這個選單,選好後押save鈕!
  3. 然後便會產生你所貼的source coe於網頁上:
    • 若此時你用的是Firefox的話,那恭喜你了,選對Browser,省事多了! 選取你要的source code部份,接著按右鍵->檢視選取範圍原始碼(View Selection Source)
    • 若用IE的話(I am sorry...IE sucks),無法觀看所選取的特定部份原始碼,只能直接檢示所有頁面中的原始碼,再自己找尋你剛剛貼的code!(或是是我對IE不熟,若有好的檢視原始碼方式,歡迎告知我,感謝!
  4. 接著再按右鍵->複製(Copy),即可貼到你在Blogger中編緝文章的地方囉^^,很省事吧…這是我常用的方法! 請供大家參考....若有更棒的方式,懇求大家提供給我..XD
[Updated 2006-11-29]※有時Blogging時,因為後來有Update或是有寫錯筆誤之處,便會想要加上刪除線作為Highlight,而非直接在文章中刪除,同時也比較醒目,方便讀者閱覽..作法如下:<span style="text-decoration: line-through;"> deleted text part </span>

26 Comments:

Who: Cyril Class:
When: November 21, 2006 10:11 PM  

Hi,
我想和你一樣把參考資料框在框框裡,
我用的是:
REFERENCE {
display: block; /* fixes a strange ie margin bug */
font-family: Verdana;
font-size: 10pt;
overflow:auto;
background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:200px;
line-height: 1.2em;
}

加在Posts的地方,
我已經在標題寫REFERENCE了,
但顯示出來的區塊,
左上方都是CODE,
不知該如何改成REFERENCE?

謝謝!

Who: Cyril Class:
When: November 21, 2006 10:59 PM  

我知道爲什麼了,
是因為圖片連結網址就是Code的,
所以顯示出來的也會是Code,
即使我在語法中是寫Reference。

不知你願不願意提供
Reference的圖片網址?

謝謝!

Who: Tsung-Kai Chen Class:
When: November 23, 2006 9:12 PM  

To cyril:
當然可以提供囉!!
http://chenkaie.googlepages.com/Code_REF.gif
自由取用吧 ^_^

Who: Cyril Class:
When: November 24, 2006 7:35 AM  

謝謝!

Who: Winnie Class:
When: January 29, 2007 1:35 PM  

不會吧
為什麼大家的blogger都那麼有質感

一反我對它那陽春的形象呢!!

Who: Tsung-Kai Chen Class:
When: February 09, 2007 3:07 PM  

To winnie:
好說好說,Blogger自由度超高的,要怎麼搞就怎麼搞囉...我看過一堆超美的Blogger呢,實在是望塵莫及.. :)

Who: linuxk Class:
When: February 13, 2007 2:23 PM  

您好唷! 無意間找到您的這篇教學,覺得很棒~讓我學習了一項新技術,想轉貼您的文章在我的blog裡,希望徵得您的同意

Who: Tsung-Kai Chen Class:
When: February 16, 2007 11:44 PM  

To linuxk:
歡迎轉載呀…本站的文章授權是採用CC的方式,所以只要符合CC的受權條例即可,不需我本人再同意…直接轉載就ok囉..^^

Who: 戰地記者 Class:
When: April 14, 2007 10:06 PM  

Dear Kaie

很豐富的Blog,最近幾天常在你這偷學!

不過,不知道可否教我如何做出文章底下的 [Older POst] [HOME] [Newer Post] 這三個 Button.

感謝!

Br,
Anchi

Who: Tsung-Kai Chen Class:
When: April 16, 2007 7:59 AM  

To 戰地記者:
咦,我也不知該如何講起耶,不妨直接檢示我的原始碼,直接看比較快,若你是用FireFox的話,建議你安裝Firebug這個extension,超好用的..^_^,可以加速你完成這功能..

Who: 戰地記者 Class:
When: April 16, 2007 11:52 AM  

從網頁檢視你的原始碼
跟我自己的 修改 HTML的比較
差很多!

不知是否可以看看你的 Template HTML 中跟 class='blog-pager-older-link' 相關的那一段

Thanks!

Who: Tsung-Kai Chen Class:
When: April 17, 2007 8:10 AM  

To 戰地記者:
嗯…這樣子呀!!
我想應該是css部份的關系,記得我有改過,參考一下吧:

#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://chenkaie.googlepages.com/botton_bg.gif) repeat-x 0 bottom;*/
background: #c52a00 url(http://chenkaie.googlepages.com/buttonBG.gif) repeat-x 0 -1px;
border: 1px solid #555454;
color: #fff;
cursor: pointer;
height: auto;
padding: 0.2em 0.5em;
}

Who: 戰地記者 Class:
When: April 17, 2007 12:54 PM  

Dear Tsung-Kai

照抄了! 非常感謝!

br,
Anchi

Who: 城宮智 Class:
When: May 18, 2007 10:00 AM  

Kaie大您好

拜讀你的文章後, 我也將code和reference功能加入我的blogger

圖片我是直接使用http://chenkaie.googlepages.com/Code_BG.gif, 所以告知K大一聲, 希望K大不會介意

Who: Tsung-Kai Chen Class:
When: May 18, 2007 10:55 AM  

To 城宮智:
別客氣…我也是轉載的!! Google空間,free…盡量拿去用吧..

Who: Mei Class:
When: March 18, 2009 8:58 AM  

hi,Kaie,
謝謝!! 我也要借用一下你的Reference圖片啊!!
感謝!

Who: 小玉 Class:
When: May 16, 2009 12:55 PM  

您好,參考了其你blogger,撰寫筆記於自己的Blogger裡,怕日後要改版忘記自己到底用了什麼。

感謝你的教學。
不過code.ref{為什麼在使用時,卻只能顯示一段文字呢?如果要多段落文字是該修改哪裡?

再次謝謝你的教學

Who: Tsung-Kai Chen Class:
When: May 17, 2009 12:43 AM  

@小玉
你指的多段落是啥意思呢,有沒有範例,是用怎樣的HTML Tag

Who: 小玉 Class:
When: May 17, 2009 2:48 PM  

<code class="ref"> 引用文字的部份 引用文字的部份 引用文字的部份 引用文字的部份 引用文字的部份
引用文字的部份 引用文字的部份 引用文字的部份 引用文字的部份 引用文字的部份 引用文字的部份
引用文字的部份 引用文字的部份 引用文字的部份 引用文字的部份 引用文字的部份 引用文字的部份 </code>

我想顯示的是如同上面有段落的
可是卻顯示只有....
<code class="ref">引用文字的部</code>
這樣子一行...
不知道你看得懂我想表達其意嗎?

Who: Tsung-Kai Chen Class:
When: May 17, 2009 3:10 PM  

@小玉
嗯,我想我應該懂..XD
但這樣的語法看起來,是沒什麼問題的呀,不然你post一篇文給我開看看..比較容易解決問題!

Who: 小玉 Class:
When: May 19, 2009 2:33 PM  

於我另一個blog測試卻可以
http://capricornus1980.blogspot.com/2008/10/code.html
但另一blog卻不行
http://hsiaoyu1224.blogspot.com/2009/05/blogger.html
待您觀賞完還請告知怎麼改善,謝謝

Who: Tsung-Kai Chen Class:
When: May 19, 2009 4:17 PM  

@小玉
咦,第一個權限問題,無法看,第二個,我用Firefox3, IE7,8 看也都正常耶,是怎樣的不正常呢,不然就抓張圖來看一下吧

Who: 小玉 Class:
When: May 20, 2009 9:34 AM  

抱歉
後來我才發現那個第一個blogger是隱藏我自己測試用。
還請您上篇留言幫我砍掉。 XD

另圖片顯示
http://sites.google.com/site/hsiaoyu1224/file/img/2009-05-20_092507.jpg
我使用IE看也是正常,但FIREFOX 3.0.10好像就像圖一樣了
不知道哪裡有問題=_="

Who: Tsung-Kai Chen Class:
When: May 20, 2009 10:15 PM  

@小玉
咦,我也是用Fx 3.0.10開的耶,但沒這問題,真不知該如何幫上忙..XD,拍謝啦

Who: Orange Class:
When: June 08, 2009 12:47 AM  

感謝您的教學,受益良多!
另外想請教在左側隨畫面捲動的導航列,
在天空部落能不能實現呢?
(因為只能修改CSS...)

Who: Tsung-Kai Chen Class:
When: June 08, 2009 1:33 AM  

@Orange
OK的,純css就可以實現那導航列功能了!!