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

這篇是有關模板結構每個元件定義的初淺說明，如何設計一個個獨特個性化的版面，這裡或許有些資訊你是可以參考的，但如果是剛加入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

期間限定的美女時計

美女時計最近好像很風行，接著還有型男時計，這是日本imagenavi.com公司實驗室推出的服務，不同於bijin-tokei的美人時計，imagenavi.com主要是以宣傳該公司高品質的寫真素材，還有利用寫真圖片創造出各種效果的服務為主。

幫自己設計個版權所有的小方塊單元

這小東西是綸太郎在Jacky的部落格上看到的，覺得不錯用，跟大家介紹，在你的文章後面放上一個版權所有或是作者的簡介，提醒閱讀者或是加強讀者印象的一個單元，如果有需要的朋友，也可以自己練習設計看看。

原始模板的語法來源：
Download WooThemes “The Gazette Edition” Converted for Blogger Free---Bloganol

我要利用的是裡面 .author_info，作者資訊的單元，
原始模板記得備份，進入後台，版面配置→修改Html→勾選"展開小裝置範本"
【第一步驟】
先在CSS程式區，新增author_info這區(只要放在]]></b:skin>之前即可)，加入下列定義：
/* Author_info
----------------------------------------------- */
.author_info {
float: left;
width: 90%;
margin: 10px;
padding: 10px;
font-size: 12px;
background: #eee;
border: 1px solid #ccc;
}
.author_info h3 {
margin-bottom: 10px;
}
.author_info p {
line-height:1.5em;
}
.author_photo {
float: left;
margin: 0 10px 0 10px;
background: #fff;
}
.author_photo img {
border: 1px solid #939393;
}
細項説明如下圖，


定義好外觀，接著就是要把他放到單篇文章裡面，這個可能就要比較深的技巧，因為每個人的版面不太一樣，要想放在哪裡，就要找到該位置。

由於我們不要在首頁出現，而是要出現在單篇文章最後面，所以前後一定要用
<b:if cond='data:blog.pageType == "item"'>
及
</b:if>
把語法包圍起來，這樣就不會顯示在首頁，而是在單篇文章呈現時才會跑出來。
所以找到該放的位置，通常是在
<div class='post-footer-line post-footer-line-3'/>之前，
有的模板是在post-footer-line-2或是post-footer-line-1，就看你頁尾單元的配置，自己找看看。

【第二步驟】
加入以下語法
<b:if cond='data:blog.pageType == "item"'>
<div class='author_info'>
<h3>本文作者:XXX</h3>
<p><span class='author_photo'><img src='大頭圖片網址'/></span>版權所有，請勿複製。</p>
</div>
<div style='clear: both;'/>
</b:if>
大頭的圖片，最好以60px*60px大小為宜，像我文章上這樣的大小。

當然如果你覺得每篇文章都加入的方式不喜歡，你也可以用新增小工具來加入，第二步驟就改為，在後台新增一個Html/JavaScript單元，然後放入
<div class="author_info">
<h3>本文作者:XXX</h3>
<p><span class="author_photo"><img src="圖片網址"/></span>版權所有，請勿任意轉載。</p>
</div>
顯示大概下圖這樣，


其實官方的小工具，裡面也有一個"簡介"，也是類似的功能，但是限於官方所提供的資料，而我介紹的這個是可以自定你想要告訴讀者的訊息，既然Blogger這麼自由好用，當然就自己來設計看看，也是不錯的。

當然背景也可以用圖案設計，就看個人的巧思了，以下是不同顏色的配置，可以參考看看。




這裡面的敘述文字完全你可以自己來寫，看想要告訴你的讀者什麼話，版權宣告或是歡迎訂閱，甚至來信加上email地址都可以，就看格主自己的需要了。

參考來源：
Empty - Jacky.C.J.Yeh

用FBML工具來製作你的Facebook粉絲歡迎頁面---撰寫篇

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

用FBML工具來製作你的Facebook粉絲歡迎頁面---安裝篇

2010.9.5更新，
Facebook以後將不會再支援FBML，而以IFRAME來支援，相關可以參考這篇
Facebook Markup Language (FBML)

FBML（Facebook Markup Language），直譯就是幫你的臉書化妝的語言，什麼意思呢?就是讓你的Facebook的頁面看起來更美、更吸引人的工具，不再素顏見人吧，幫自己的粉絲專頁設計一個宣傳歡迎頁面(Welcome Page)，我覺得很實用，如果你也想擁有一個，跟著綸太郎慢慢實作吧。