Internet Explorer 6 SUCK !!

What the fuck, ie6 問題真的有夠多, 都不照 W3C 的規範走, 用它來瀏覽常有莫名其妙的東西出現, 為了抓這些奇奇怪怪的蟲子, 浪費了我很多的生命, M$ 真是造孽. 列出幾個這幾天碰到的問題. 請大家務必愛用 firefox 啊 ...

1. 如果 div 同時設定 float 和 margin, pixel 會加倍, 10px 變成 20px. 必須透過加上 display:inline; 來修正.
   
#IamFloat{
float:left;
margin:10px;
display:inline;}

< #div id="imfloat">
2. 文字 or 圖片常度過寬未手動斷行, 整個 layout 爆炸, 於 main-wrapper 或是 sidebar-wrapper 的 css 加入 word-wrap 還有 overflow 的參數來修正.
   
width: 410px;
float: left;
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 */
....... }

#sidebar-wrapper {
width: 220px;
float: right;
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 */
........ }
3. 圖檔為 png 格式的透明背景在 ie6 無法正常顯示, 必須使用 gif ! 嘖嘖.

另外有一個可以用來確認 layout 的網站 Browsershots, 很方便.

What is Browsershots?

Browsershots makes screenshots of your web design in different browsers. It is a free open-source online service created by Johann C. Rocholl. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the central server here.

ref: this, this and this.

blogger post always show date

為了使用 update time 的 hack, 所以也得讓每篇文章都顯示日期, google 一下找到 hack 的方法, 用 java script 把日期存入變數再印出.

1. 將下方 script 放在 <head> 後, <b:skin> 前.
   
<script type='text/Javascript'>
var d;
function saveDate(c){
if(c!=&#39;&#39;) d=c;
document.write(d);
}
function showDate(a){
document.write(d);
}
</script>

2. 找到類似下方 data:post.dateHeader 的區段.
   
<b:if cond='data:post.dateHeader'>
<data:post.dateHeader/>
</b:if>
3. 參考成下方的 code 做修改, 依 teamplate 而異
   
<b:if cond='data:post.dateHeader'>
<script>saveDate(&#39;<data:post.dateHeader/>&#39;);</script>
<b:else/>
<script>showDate();</script>
</b:if>
4. weeeeeeeeeee ;D

ref: this

blogger hack list

已實裝的:

1. recent comments
2. recent posts 
3. page generation time
4. font size
5. blog peek boo view of posts in
6. page menu
7. search bar
   
8. blogger plus google code prettify code
9. always show post time
10. show post update time
11. bookmark icon feat post icon
12. related post
13. label cloud
14. archives default collapsed
15. sidebar element toggling

感興趣的:

1. author comment highlighting
2. javascript style sheet switcher
3. javascript encrypt your private blog
4. blogger hack auto read more
5. 繼續閱讀懶人加強版
   

p.s blogger 真是殺時間的玩具.

blogger hack resource

hack reference:

1. http://abintech.azhai.org/
2. http://chenkaie.blogspot.com/
3. http://www.xavierliu.com/
4. http://themelib.com/
5. http://www.techieblogger.com/
   

widgets:

1. http://widgetsforfree.blogspot.com/
   

teamplate:

1. http://btemplates.com/
2. http://quiterandom.com/
   
3. http://themelib.com/
4. http://www.bloggerstyles.com/
5. http://falconhive.com/
6. http://www.deluxetemplates.net/
   

resource:

1. http://bgpatterns.com/
2. http://www.lucazappa.com/
3. http://code.google.com/p/google-code-prettify/
4. http://browsershots.org/
5. http://www.addthis.com/
6. http://sharethis.com/
   

blogger plus google-code-prettify = code block hightlight

為了 blogger 的 code block hightlight 搞了好幾天, 先後試了 SyntaxHighlighter 和 google-code-prettify , 最後決定用後者, 因為 SyntaxHighlighter 的 js 實在太多了, blogger 打開的速度慢的嚇人, 雖然有很多方便的功能(toolbar), 且有不同的 theme 可以選擇, 不過為了效能, 還是算了吧 :( . 下列做一些安裝筆記.

1. 先下載 google-code-prettify , 將壓縮檔解開目錄下的 /src 都上傳到你的網頁空間(推薦 hostse.com).
2. 修改 blogger teamplate(版面配置 > 修改 HTML), 找到 <head> 於下方加入以下的 code.
<!-- google prettify -->
<link href='http://你的網頁空間網址/prettify.css' rel='stylesheet' type='text/css'/>
<script src='http://你的網頁空間網址/prettify.js' type='text/javascript'/>

3. 再找到 <body>, 將它修改成下方的 code.
<!-- load google prettify -->
<body onload='prettyPrint()'>

4. 自訂 css 給 <code> tag 用.
/* CSS for Code Block and Cmd Block in content */
code {
display: block; /* fixes a strange ie margin bug */
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
font: normal normal 100% Verdana, Arial, Sans-serif;
font-size: 10pt;
color:#000000;
overflow:auto;
background: #fbfaf7 url('http://你的網頁空間網址/Code_BG.gif') left top repeat-y;
border: 1px solid #000000;
padding: 10px 5px 10px 20px;
margin: 5px 15px 5px 15px;
max-height:250px;
height: expression(this.offsetHeight>205?205:''); /*fix for IE without max-height*/
line-height: 1.2em;
text-decoration: none;
}

code.cmd {
color:#ffffff;
background: #000000 url('http://你的網頁空間網址/BG_CMD.gif') left top repeat-y;
border: 1px solid #ffffff;
}

5. <code> tag 使用方式如下, 以後就有 hightlight 啦, ohya.
<code class="prettyprint">
你的 code.
</code>
<code class="cmd">
你的 command.
</code>


p.s 一些字元還是需要手動轉換的, like < > & " , 就用 Text -> HTML Entities Encoder 吧.
ref: this, this, this, and this.