藝廊式的部落格模板(Blogger templates)

最近看到一個很不錯的模板(Blogger Templates)，結合雜誌型與圖片展覽型的模板型態，方便利用，有興趣的朋友可以試用看看。

網頁：Ferias Blogger Template - BTemplates
展示網頁
下載網頁

這個模版有幾項特色，
1、雜誌型的模板，首頁的文章圖片自動縮小

這是使用JavaScript Hacks製作出來的效果，因為都是針對英文字作設計，所以受限於中文字的字數，有些文章縮寫字數不一定符合要求。
如何設定字數，找到以下的語法，加以修改即可。
summary_noimg = 440; 沒有圖片的摘要字數
summary_img = 360; 有圖片的摘要字數
img_thumb_height = 140; 圖片的高度
img_thumb_width = 140; 圖片的寬度
如果有裝這個Hacks，你先前的繼續閱讀功能會失效，會以這個的設定為主，所以通常字數我都會設很小，例如設
summary_noimg = 100;
summary_img = 80;

2、標頭區可安裝廣告(468*60)

一開始安裝，你會發現版面上多了一個160*600的廣告，這是安裝在標題右側的廣告位置，你可已在後台小工具找到AdSense這個設定，將它改成468*60的格式即可配合整個版面的設計，或是移除，放置其他的小工具，這個區位的定義是#header-right。

3、標頭區下方有圖片展示空間，替換圖片容易


之前綸太郎有在在部落格下方加個雜誌版型的圖文導覽列這篇文章裡提到怎樣設定長條型圖片展示，增加部落格的吸引力，

而這個作者用了更方便的方式，我們只要編輯後台上方標題為"Lorem ipsum dolor"那四個小工具的設定，就可以隨時替換圖片與連結，而不用到html去修改。

後台設定小工具，



完成後的模樣，


4、意見回應區作者頭像的設定，無法正確顯示


由於這個模版製作時應該是沒有考慮到現在Blogger官方已經釋出頭像顯示的功能，所以你如果設定意見區頭像要顯示，格式上會有些錯亂，所以想使用這個模版，目前設定最好是設成不顯示大頭，算是這個模版最大的缺點，我有試著修正過，但是無法成功。

5、相關文章功能(Related Posts)


這個模版很貼心，已經設計好相關文章的列表顯示，會以相同標籤的文章為基準。

以上就是這個模版的介紹，算是多功能性的模板設計，熟悉模板配置的朋友，可以試用看看。

善用版面空間做AdSense廣告配置

網站的編排通常會以有限的空間作最有效的利用為原則，當然適當的留白也是很重要，但如果你的部落格不是以設計為主，而是一般的部落格而且有放Google AdSense時，這時留白的空間就可以利用網站CSS編排設計，來適當運用這些空間了。

通常我們會在本文的下方或是上方放入Google AdSense的廣告，這時你會發現右手邊空了一大塊，這時我們就可以妥善的運用這塊地方，放入你想配置的單元。

通常找到#main-wrapper { 就可以知道你的本文寬度為多少，以本站來說width: 600px;
而一般的AdSense通常我們會放大矩形336*280或中矩形300*250，當然還有小矩形250*250，在AdSense 支援中心裡有說明，我應該使用哪種廣告格式？

我們發現最有效的廣告格式為：336x280 大矩形、300x250 中矩形以及 160x600 寬幅摩天大廣告。

所以以綸太郎的部落格而言，最多可以擠到兩個300*250的廣告，不過並非放滿三個廣告收益就會越大，所以我選擇了放一個大矩形廣告搭配上隨機文章，作為單篇文章下方的廣告單元，不過一直以來都覺得樣式很醜，


今天研究了一下，也跟大家分享怎樣利用CSS編排，來設計一個適合你自己版面的廣告單元，當然不放廣告也可以，你可以放相關文章或是和社會書籤搭配都可以，就看你自己的運用。

先來說明概念，這個廣告單元就如以下面的圖片所示


將一個大單元裡面，劃分成兩個小單元，一個是廣告，一個是隨機文章
整個大單元我們以 .post-extra定義
廣告我們以.post-ads
隨機文章我們以 .post-random
這些定義名稱，你可以自行定義，看得懂即可。
以下是綸太郎定義的相關CSS語法，我的語法配置都是以我自己的模板做範本，如果你要設定，請修改成你自己要用的語法，因為每個人的模板大小、位置都不同。

/* Post-Extra廣告配置及隨機文章單元*/
.post-extra {
width:580px;
height:300px;
background: url(圖片網址) no-repeat 5px;
margin-top: 5px;
}
.post-ads {
float:left;
width:340px;
height:290px;
overflow:hidden;
padding-top: 5px;
}
.post-random {
float:right;
width:230px;
height:270px;
overflow:hidden;
}
.post-random a {
color: #B6EBEB;
}
.post-random ul{
padding:0 5px 0 0;
margin: 30px 0 0 0;
list-style:inside;
}

大單元(.post-extra)的背景圖我以580*300的背景圖為主，


因為我的背景顏色為白色，而且我不想要讓Google AdSense的背景有顏色，然後在隨機文章的背景區位有個藍色的背景圖，到時候我只要調整隨機文章出現的文字區域就能和背景圖相配合。

記得如果你有使用背景圖，相關的高度及寬度一定要標示出來，例如
.post-extra {
width:580px;
height:300px;
如果高度(height:300px;)沒有標示，圖片會顯示部份而已。

廣告(.post-ads) 和隨機文章(.post-random)，
這兩者很重要，一定要設定一邊在左 float:left; 一邊在右 float:left;
還有兩者加起來的寬度width:340px;+width:230px;要小於總寬度(.post-extra)width:580px;，記得有padding及margin都要算進去，然後超出的部分我們不顯示overflow:hidden;。

至於語法裡的
.post-random a {
這是設定隨機文章連結的顏色，因為原先是藍色，那搭配背景又是藍色，一定沒法明顯顯示，所以就多加了上面這個定義，將超連結的顏色設定為淺藍色，加強顯示。

另外.post-random ul{
這是項目單元(ul)的設定，因為如果沒有設定的話，在IE7和Firefox的顯示是不同的，在IE7看不到項目符號●
所以多加了這一個定義，每個人的模板不同，不一定你的不用加就可以顯示了，再則因為我設計的圖片已經有"隨機文章"的字樣，所以margin: 30px 0 0 0;要設定與上方相距30px。

當然Css設定完成就是要更改Html的配置了，先前我們都有提到要使某單元出現你要的css效果，就是以div將他圈住套用，當然這裡也是一樣的，我們找廣告單元，通常搜尋"pub-"這四個字即可，就能找到你的AdSense語法出現的地方，不過我想應該大家都會找，因為也是自己放進去的，但如果你是利用後台的網頁元素小工具新增廣告，這篇就不適用了。

原始模板記得備份，進入後台，版面配置→修改Html→勾選"展開小裝置範本" ，找到AdSense 單元
然後用div將相關語法給套住即可，
<b:if cond='data:blog.pageType == &quot;item&quot;'><br/>
<div class='post-extra'>
<div class='post-ads'>
336x280 Google AdSense廣告語法
</div>
<div class='post-random'>
隨機文章語法
</div>
</div>
</b:if>
<div style='clear:both;'/>
你可以看到紅色的div套住了綠色及深藍色的div區塊，這就是我們要達到的效果，前後再用
這個<b:if cond='data:blog.pageType == &quot;item&quot;'> 和</b:if>套住，之前我們已經在幫自己設計個版權所有的小方塊單元說明過，是讓這個單元在首頁不出現，單篇文章才出現的語法，所以記得你的div class是要放在這個語法下面，至於<div style='clear:both;'/>這是要清除格式的語法，這樣你就可以有個像綸太郎一樣的廣告單元配置了。


其實這個效果也是可以用表格(Table)做出來的，但較常利用在邊欄的小工具上，就是設計一個表格裡面放入兩個元件，如果想做的朋友也可以利用"Google文件"，自己設計也是可以的，簡單的也是可以利用，但還是建議用css作這樣類似表格配置的處理，一來變更較容易，再來程式碼也較少，網頁載入負擔較輕。

初學者建議還是了解相關的配置再來玩這一部份，有空可以看看"新手推薦閱讀"單元，不然你會有一堆問題等著解決，常有朋友說看了文章還是不了解，因為我想大家都看了自己想看的那一篇，但是前後的相關知識或是資訊還未學習完成，其實大部分我的文章都有提到，Google Blogger官方的說明---Blogger 說明，也很多參考資料，只要你有耐心慢慢看，善用Google搜尋來慢慢學習，我想總會融會貫通的，早晚可以打通你的任督二脈的，擁有一個你自己親手打造的部落格。

適用部落格模板的圖示組合

當我們使用了官方的模板或是其他網路設計者設計的模板時，有時也想換換裝，幫自己的部落格增添活潑的小圖示(Blog Icons)來替代文字說明或是襯托文字，讓主題更明顯時，圖案的設計相對來的重要，如果自己不會設計，以下有幾款是適合使用在部落格上的小圖示，跟大家分享。

張貼意見以其他文字或圖片代替

在Google Blogger的留言模式有整頁模式、彈出式視窗及最新的已內嵌下列文章三種，如果你不是使用內嵌留言的方式，而想以圖片或是其他文字替代官方的"張貼意見"按鈕，可以參考下列的作法。


原先模板記得備份，進入後台，版面配置→修改Html→勾選"展開小裝置範本"
找到這句語法，
<data:postCommentMsg/>
你會發現有兩個地方會出現，要修改的是比較下方的那一個，就是語法裡面沒有width寬度和height高度的內嵌式(comment-form)語法。


要找到比較下方這個才對。


【文字顯示】
把<data:postCommentMsg/>換成你想要顯示的文字，例如"請留下你的意見"

【圖片顯示】
將
<data:postCommentMsg/>換成
<img src='圖片網址'/>
記得在Blogger的html語法裡，<img src="圖片網址"/>後面一定要有斜線/，不然模板會顯示錯誤，而無法儲存。

用圖片替代的方式，讓讀者可以輕鬆的知道要按哪裡留下他的意見，也是不錯的模板的小改造，如果喜歡我製作的圖片，請在圖片上按右鍵另存新檔，放到你自己的圖片空間裡，或是自己做個小圖也是可以的。


注意到張貼意見下方有個連結，就是訂閱的網址
訂閱：張貼意見(Atom)
綸太郎加上圖片後覺得有點礙眼，想把它消掉，怎麼做呢
一樣在後台]]></b:skin>之前加上這句定義，
.feed-links{
display: none;
}
這樣這個連結就會隱藏了，如果你的模版本來就有這個定義，那就不用新增了，直接加上display: none;的敘述即可。

但是這個連結是提供讀者訂閱的功能，一定要確定你的部落格有其他的連結按鈕可以訂閱，不然如果有些人不太會使用RSS功能，或者不知道從網址那裡按下橘色的RSS圖示就能訂閱，就會少了一個讓讀者訂閱的管道，這是要注意的小細節。

所以模板改造不用急在一時，大原則搞定，然後再慢慢修飾小地方，你也是可以擁有一個與眾不同的部落格的。

如何美化模板元件的外觀配置

這篇是有關模板結構每個元件定義的初淺說明，如何設計一個個獨特個性化的版面，這裡或許有些資訊你是可以參考的，但如果是剛加入blogger的新手，對語法不甚了解的朋友，請斟酌使用。

其實在Blooger模版上的每個元件除了基本的css設定外，都有他的獨一無二的定義名稱，會用b:widget語法來顯示，例如最主要的部落格標題(Header1)及文章本文(Blog1)區，如下所示，在後台是一定要存在的項目，這是在html區可以看到的：
<b:widget id='Header1' locked='true' title='部落格標題(標頭)' type='Header'/>
<b:widget id='Blog1' locked='true' title='網誌文章' type='Blog'/>
而在官方的邊欄小工具裏，首先我們要知道不同的元件有不同的英文固定名稱，如下


常用的邊欄小工具：

<b:widget id='Profile1' locked='false' title='關於我自己' type='Profile'/>
<b:widget id='HTML1' locked='false' title='html/JavaScript元件' type='HTML'/>
<b:widget id='Label1' locked='false' title='文章分類(標籤)' type='Label'/>
<b:widget id='Feed1' locked='false' title='資訊提供' type='Feed'/>
<b:widget id='BlogArchive1' locked='false' title='網誌存檔' type='BlogArchive'/>
<b:widget id='CustomSearch1' locked='false' title='搜尋此網誌' type='CustomSearch'/>
<b:widget id='BlogList1' locked='false' title='我的網誌清單' type='BlogList>'/>
<b:widget id='AdSense1' locked='false' title='廣告' type='AdSense'/>
文字、圖片及網址連結
<b:widget id='Text1' locked='false' title='文字' type='Text'/>
<b:widget id='Image1' locked='false' title='圖片' type='Image'/>
<b:widget id='TextList1' locked='false' title='清單' type='TextList'/>
<b:widget id='LinkList1' locked='false' title='連結清單' type='LinkList'/>
社群功能的元件
<b:widget id='Followers1' locked='false' title='追蹤者' type='Followers'/>
<b:widget id='BlogList2' locked='false' title='我追蹤的網誌' type='BlogList'/>
多媒體元件
<b:widget id='Slideshow1' locked='false' title='投影片' type='Slideshow'/>
<b:widget id='NewsBar1' locked='false' title='新聞影片' type='NewsBar'/>
<b:widget id='VideoBar1' locked='false' title='視訊列' type='VideoBar'/>
其他
<b:widget id='Subscribe1' locked='false' title='訂閱連結' type='Subscribe'/>
<b:widget id='BloggerButton1' locked='false' title='Blogger按鈕' type='BloggerButton'/>
<b:widget id='Poll1' locked='false' title='意見調查' type='Poll'/>

這裡要注意的是在Blogger的模板裡，每一個widget id都是唯一的，不能夠重複，有時你定義模板的CSS時可能會發現，有的定義前面是 # ，有的定義前面是 ‧ ，這在HTML用法是不同的，
# 代表這是一個id定義，元素是唯一的
‧代表這是一個class定義，則是可以多種套用

要怎麼說比較容易讓大家瞭解，簡單的說明，就是把id看成是一個人，而class是他穿著的外表，所以這個人在世界上是獨一無二的，但是他的外表卻可以隨著天氣變化，或是環境不同有著不同的穿著。

而同一性質的id，在模版裡通常我們是用1.2.3數字來區別，譬如我們常用的Html/Java Script小工具，我們常會看到有HTML1、HTML2...甚至到HTML98，還記得上次BLOGGER套用模版發生的錯誤嗎?當時就是官方模板，在我們還沒有加入任何元件前，就把一些常用的定義加以設定，例如Label1、HTML1、Feed1、等都自動設定，所以當我們套用新的模板時，就會出現2個ID重複，所以沒法套用，所幸這個問題後來解決了，但有些元件id重複套用，如果是在外觀的處理上，並不會出現問題，但我們儘量還是用class來定義會比較好些。

而關於id和class有什麼不同，可以參考♣梅問題‧教學網【Minwt】♣的[CSS]id與class別再傻傻分不清楚，有更詳細的說明。

你可能會問要知道這些要做什麼用?
我所知道的是可以改變某些元件的屬性，或是個性化自己的版面，再深入的話，則是可以變化自己模版的配置，不過這要和b:section同時做變動，這個是較為深入的技巧，以後有機會再談。

譬如從這句
<b:widget id='Profile1' locked='false' title='關於我自己' type='Profile'/>
除了id，你可以看出什麼，這裡有個locked='false'敘述，這是表示這個元素是可以移除且可拖曳，點選這個widget你會發現後台有一個移除的按鈕，但如果你設定為locked='true'，則這個widget是無法移動，會被固定住，而且是無法移除的，這個元件沒有了可拖曳的框框，


而且原先有的移除按鈕，你會發現不見了，如下圖這樣，


所以我們套用一些網路上提供的模板，你會發現有的設計者把有些元素，設成ture，例如廣告或是有些商業連結，讓你無法移除，這時如果知道這個設定的方法，就可以移除一些你不想在模板上出現的東西，。

另外這也是一個可以個性化自己邊欄元件的方式，之前綸太郎寫過一篇如何利用捲軸讓邊欄（Sidebar）元件縮短的文章，就是利用這樣的設定來改變每個元件不同的面貌，只要對不同的元件加入一個新的定義也是可以達成不同的效果，譬如想讓設定的捲軸不一定要一樣的高度。

譬如原來的新手建議閱讀元件， 他的外觀就如隨機閱讀及最新迴響的樣子，


我想讓他有不同的外觀顯示，改成如下面這樣，


這時我們從後台的程式碼用新手推薦閱讀為關鍵字找到這行語法，
<b:widget id='HTML11' locked='false' title='新手推薦閱讀' type='HTML'&g;t
知道這個元件的定義名稱為HTML11，大小寫是不一樣的元件ID，這是要注意的。
所以我們就可以新增這個HTML11的相關連定義，如下圖這樣，這樣你的邊攔就會有不同的變化，例如有的人喜歡，紅橘黃各為單元背景顏色，或是一個有背景一個無背景的交錯顯示，都是可以自行運用的。

這裡可以發現blogger模板的每個內容定義都是用widget-content來設定，所以我們加入以下新的定義，就可以將你的個別widget來產生不同的顯示效果。


如果你有使用先前綸太郎介紹的縮短元件的方式，你可以發現用直接定義的方式，就可以不用去後台Html裡，找到該元素的widget-content，用<div class="scrolling2">去套用他，感覺會比較方便些。

其實以上的設定，綸太郎認為比較適合在不同的元件想有不同的捲軸高度來運用，例如先前談到的都是用一個class(.scrolling2)來定義所有的捲軸大小，這裡你就可以用自訂的方式來產生，另外不同性質的元件，例如多媒體及讀者Feedback的單元，都可另外設計較活潑的外觀顯示，或許比較麻煩，但想要有個獨特性的模板，我想從這裡來發展也是個可以利用的工具。

延伸閱讀：
如何利用捲軸讓邊欄（Sidebar）元件縮短
幫邊欄的網頁元素(widget)，自訂不同的漂亮圖示

用FBML工具來製作你的Facebook粉絲歡迎頁面---多媒體篇

2010.8.21更新，
未來Facebook已經不再支援FBML語法，所以此篇教學內容已沒有作用，未來是以iFrame語法為支援對象，等綸太郎研究過後再跟大家分享。

Blogger和WordPress兩相宜的模板資源---WP Blogger Themes

最近找到一個模版資源網站--WP Blogger Themes，同時提供Blogger及WordPress的模板，如果有同時使用兩者的朋友，可以兩相對照研究看看，模板是怎樣轉變套用的。

網站：WP Blogger Themes

WordPress給我的感覺就是很專業且功能完備的部落格系統，但鑑於每次改版時一些Plugin要放的語法是在php裡面，說真格的很多都看不懂，還是Blogger的html比較親切，所以就懶得更換，但是很喜歡的WP模板設計，所以這個網站大概就是為了我這種人產生的吧，真是感恩作者提供這些資源。

以下提供一些範本，有興趣的可以自己下載下來玩玩。

● Curtain
這個模版是透明漸層的，感覺很古典優雅，使用的小圖示，也很復古，背景波紋設計，感覺似乎有窗簾在後面微微飄動。


● Mystique


這個模版我最想學的就是他邊欄的Tabs分頁設計，滑鼠一點，頁面就滑出來了，很炫，也很節省空間，但是看過原始碼，要想學會我想還要很長的時間。


● SoulVision
牛皮紙撕裂的頁面，最近很常利用在模板上，非直線的毛邊設計感覺很有質感，這個模版幫你將Social Links (社會書籤)都設計好了，細微處的特殊設計我很喜歡。


他有個姐妹站，
Wordpress To Blogger
大多是雜誌型的專業模板，要使用的朋友可能要有相當的基礎，屬於高階模板的應用，目前我還沒練到那個階段，只能看看而已，跟大家分享，而且要下載，需贊助作者10元美金，所以大家看看原始程式碼，可以自己學到一些Css的技巧吧。

● WP New Mag