ezPOST: 技巧 Blogger

顯示具有 技巧 Blogger 標籤的文章。顯示所有文章

2007年12月18日星期二

Blogger 固定版面配置的寬度 760px

相信使用 Blogger 的部落客們應該都有這樣的經驗，就是在「修改版面配置」時，有時候會修改過 html/css 而導致「版面配置」的物件顯示超出範圍、或是對齊上有些異常；雖然只要 html/css 本身調整是正確的，就不會影響實在網頁呈現的效果，但在「版面配置」的畫面就是美中不足。

其實這個問題，我發現是 Blogger 本身的定義所造成的，因為 blogger 將「版面配置」的寬度訂在 760px，所以我們看到它所提供的範本都是寬度都是設為 760px，而一定寬度超出，就會造成「版面配置」顯示會有怪怪的樣子產生。以筆者而言，不喜歡寬度只有 760px 的版面，而不想因為放大寬度而導致在「版面配置」設定畫面中顯示的不完美。所以筆者是採用「比例」的方式來調整 html/css 中的設定。

另外，其於我是採用比例方式來顯示 blog 中的區塊，所以會需要使用「最小寬度」的設定，以便讓 blog 有過好的呈現效果，而不會因為視窗太小而影響內容的顯示；但問題來囉，因為最小寬度 min-width 的設定在 ie 中是無效的，筆者也試過許多變通的方式及網路上找到的方法，但結果通常都是無法讓 ie 有「最小寬度」的效果，不然就是讓另外寫一個很直的 js 來處理，實在是很麻煩而且不夠簡捷。

最後，筆者想到在 xuite css 中，有一行指令可以讓 xuite blog 在 ie 中也有最小寬度的限制效果，所以我就將那行敘述用到了 blogger html/css 之中，結果真的可以達到我要的效果，而且只要在 html/css 中加入一行敘述就可以了，真的是很簡捷有效。

以下為我在 blogger html/css 中「最小寬度」的設定方式：

body {
...
min-width: 760px;
behavior: expression(this.style.width=(document.documentElement.offsetWidth<760)?"760px":"100%");
}

其中 min-width 在 ie6 中無效，而 behavior 為 ie 專屬，對 fx 無效。

請參閱：讓 ie 也有「最小寬度」的效果

2007年12月11日星期二

文章內的區塊運用

在 Blogger 的文章內容中，我們要將某一段文字特別標示出來，通常最常用的就是「改變字體、顏色、底色」；或是像先前文章「與眾不同的程式碼區塊、與眾不同的程式碼區塊(補充)」中定義新的「標籤(tag)」；除此之外，我們還可以在編修文章時，利用 <table> </table> 來做到相同的效果。

其中 <tbody> 是個特別的表格標籤，它可以讓我們在文章的「撰寫模式」時，很容易的增刪表格欄位。

使用 <code> </code> 的優缺點：
缺點：變更新的「模版」時，必需記得將 code{} 置入。
優點：可以統一定義區塊的格式，而且能夠快速變更區塊樣式。

使用 <table> </table> 的優缺點：
缺點：每次要使用 table 時，就要重新定義一次(或是利用 blogger 所指供的「範本」功能)，無法整批修改不同文章中的區塊格式。
優點：直接寫入本文，不因外部定義而導致格式產生變化。

其實上述兩種方法的優點同時也是缺點，所以就要依個人使用上的習慣來決定哪一種才適合自己囉！

與眾不同的程式碼區塊(補充)

在之前一篇「與眾不同的程式碼區塊」提到經常在一些 Blogger 看到教學內容「程式碼」的特別區塊是如何做到的；它的原理就是定義一個全域的「標籤(tag)」來使用，所以我們可以發現 <code> </code> 並不只是在文章裡可以用，就連「側邊欄(Side)」也可以使用喔。

如果我們確認只要在文章內使用時，只要將 code{} 改成 .post code{} 就可以了。

.post code {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 9pt;
overflow:auto;
border: 1px solid #ccc;
padding: 5px 5px 5px 20px;
max-height:200px;
line-height: 1.2em;
margin: 5px 0 0 15px;
}

2007年12月6日星期四

改掉 Blogger Archive 在 IE 顯示的超大三角形

在 Blogger 內建的 archive 在 ie 下會顯示成超大的三角形，非常不美觀，而筆者原先花了一點時間都找不到調整方法而作罷；但這幾天，無意間卻讓我看到兩篇文章可以解決這個問題，真是了結了我一樁心事，雖說筆者自己是使用 Firefox，但有時在 ie 看到那極不協調的大三角，就覺得十份礙眼。

現在只要在加入 CSS 的 style sheet 部份加入以下代碼可解決輕鬆此問題，還 Archive 一個清爽的空間。

#ArchiveList .toggle-open {
_font-size: 80% !important;
}

font-size 前面的 "_" 不是打錯，別亂刪唷！
否則在正常瀏覽器下三角形會變超小。80% 的比例大家可以自己調整，而筆者測用之後，仍偏愛用原創者的 80% 比例。

參考資料：
改掉 IE 中 Archive 的超大三角形
New Blogger 升級之無用攻略

2007年12月4日星期二

快速移除或自動隱藏 blogger 頁首的導覽列(navbar)!

使用 Blogger 的網友應該都知道什麼是 blogger navbar，雖然可用來搜尋其他 blog，不過老實說沒有什麼用處，所以有不少 blogger 的網友都會將它加以處理。其實只要花幾秒鐘，加兩三行程式碼上去，就可以把那導覽列隱藏起來了。

1.完全隱藏
在 </head> 前，加入以下程式碼：

2.自動隱藏
另一個方法就是讓 navbar 具有自動隱藏的效果，可以用濾鏡的方式，不過目前自動隱藏的效果只適用在 Firefox，在 ie 下的效果是隱形並非移除，但滑鼠向右上角上移時，仍可以點到登入 blogger 的連結。
在 </head> 前，加入以下程式碼：

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

3.完全隱藏
這是我變通的另一個方法，完全不用修改到 navbar 的設定，在要在 body 中修改 margin 的值，讓 navbar 顯示在畫面之外就可以了。

body {
margin: -40px 0 0 0; /* 將 navbar 排除在畫面顯示外 (30+10) */
background: $bgcolor;
color: $textcolor;
font: x-small Georgia Serif;
...
}

補充：
後續又看到一些前輩提供了不同的方法，可以用更少的 Code 達到一樣的效果，筆者測試也都有效。
1.

#navbar-iframe {display: none;}

#navbar {display: none;}

Blogger 變化真多，對筆者這個不會寫程式的人而言，想要有新功能還真是麻煩了點。

與眾不同的程式碼區塊

經常在一些 Blogger 看到教學內容「程式碼」的區段，都是包在一個特別區塊中，可以清楚的分辦本文及程式碼；但這要怎麼做呢？其實真的很簡單，只要在 <head> </head> 之間的 CSS 區塊，如 <b:skin><![CDATA[ 的後面，加入下列程式碼即可。

其中紅字部分，可以修改為自己所想用使用的圖檔網址哦！

code {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 9pt;
overflow:auto;
background: #fff5ee url(圖片網址) left top repeat-y;
border: 1px solid #ccc;
padding: 5px 5px 5px 20px;
max-height:200px;
line-height: 1.2em;
margin: 5px 0 0 15px;
}

以上步驟完成後，只要在文章中，想把有「程式碼」的那一段區域，在「編輯html」用 <code> </code> 將程式碼包起來就可以囉。

效果就會像下圖所呈現的程式碼一樣。

本文參閱自：
在教學文章中，與眾不同的程式碼

網頁

2007年12月18日 星期二