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

這篇是有關模板結構每個元件定義的初淺說明，如何設計一個個獨特個性化的版面，這裡或許有些資訊你是可以參考的，但如果是剛加入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)，我覺得很實用，如果你也想擁有一個，跟著綸太郎慢慢實作吧。

回應編號與留言者大頭無法並存解決之道

2010.8.24更新，
這個Hacks在IE底下，無法正常顯示。

今天Steven來詢問我重新安裝模版後，原先的讀者的回應編號無法出現，看了一下原始碼，發現應該是最近blogger官方釋出大頭圖像的影響，原先的方式請參考設定留言回應編號，讓部落格互動更活潑，因為單獨回應的話也要寫上一大篇，乾脆寫成文章，不一定自己換模版時也用得到。

如果你在blogger最新改版後，有換模版且碰到這個問題，請利用下列方式，讓你的留言也有編號功能。

我以自己寫的這篇設定留言回應編號，讓部落格互動更活潑，來做比對說明，安裝更簡單了，如果你是新換的模板，記得原先的安裝要拿掉，用以下的方式即可，如果是舊的，應該Blogger會自行調整，不會有問題，因為我自己的是沒問題，也沒人來跟我反應過。

原先模板記得備份，進入後台，版面配置→修改Html→勾選"展開小裝置範本"
先在CSS程式區，找到Comment這區(將它放在]]></b:skin>之前即可)，加入下列定義：
.comment-number {
float: right;
display: block;
width: 50px;
margin-right: 5px;
margin-top: 0px; /*comments-counter position*/
text-align: right;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 24px;
line-height:26px;
font-weight: bold;
}
/*since the numbers are actually links, we need to force the color properties*/
.comment-number a:link, .comment-number a:visited {color: #445566 !important; text-decoration: none !important;text-decoration: none;}
.comment-number a:hover, .comment-number a:active {color: #FF9933 !important; text-decoration: none !important;}
然後找到'comments-block'這個關鍵字，你會發現變成有兩段語法，一個是原先的意見區位的設定，另一個就是後來新增留言者大頭的區位，我們要修改的是第二段的'comments-block'，類似以下這樣，。
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
你在這中間(第二行)加上
<script type='text/javascript'>var CommentsCounter=0;</script>
就會變成，如下圖這樣，


然後再下方一點，找到
<data:commentPostedByMsg/>在下方加入以下語法即可，
<span class='comment-number'>
<a expr:href='&quot;#comment-&quot; + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>
如下圖這樣，


這樣你的回應編號應該就能正常顯示了，但我想當初設計者設計時還沒有大頭的出現，所以綸太郎提供這方法，是我自己研究出來的，可能有些模板不適合，大家可以互相討論看看。

延伸閱讀：
設定留言回應編號，讓部落格互動更活潑

終於申請超火的Facebook‧粉絲募集中

昨天終於申請Facebook，其實發現把FB當作個人媒體也是不錯的，彌補部落格互動性較少的缺點，有時想囉唆幾句又怕佔版面，也沒什麼營養，目前台灣申請Facebook帳號的人也急遽增加，我想應該會是個很好的平台，來宣傳行銷自己的部落格，作為與網友互動的園地。

在本文區上方加個導覽列(BreadCrumbs on top)有更新

BreadCrumbs是麵包屑的意思，也就是文章的導引列，可以詳細的列出此篇文章的上源結構的一種導覽方式，也是方便讀者想讀取同一分類文章的作法，有需要的人可以參考看看。

但這個導覽列有個缺點，就是如果一篇文章有多個分類，這個工具只會選擇一個分類顯示，目前已解決多種分類的問題，和標題出現兩次(可自行選擇導欄列要不要出現標題)的問題，在第三步驟的語法上修改，謝謝disorder網友熱心的提醒與教導，如下圖這樣。


設定方法有些複雜，但我想依照步驟慢慢做，應該就沒問題，呈現的方式類似這樣，裡面的關鍵字或是呈現出來的形式，則是可以自己再行設計，


切記，一定要先備份原始模版，因為放了這些語法，會導致整個主文區的html整個都不一樣，不是刪減就能挽回的，
進入後台→版面配置→修改Html→勾選"展開小裝置範本"，
第一步驟，
先加入導覽列的外觀型式css語法，放在]]></b:skin>之前即可，

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
border-bottom:3px double #e6e4e3;這是在導覽列下方有個雙線條的設計，這裡你可以改成你要的線條或是加上背景也是可以的。

第二步驟，
找到<b:includable id='main' var='top'>這段主文區最上方語法，原始的語法是
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>
在中間加入三行紅色的語法，變成如下列這樣，
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<!-- disable default status message
<b:include data='top' name='status-message'/>
default status message disabled -->
<b:include data='posts' name='breadcrumb'/>
<data:adStart/>

第三步驟，
在<b:includable id='main' var='top'>之前加入以下這段語法，所以他呈現的地方是在主文區的上方，
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on front page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>»
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
»<span><data:post.title/></span>
</b:if>
</b:loop>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
上面的紅色的Browse及Home是預設的文字，你可以改成你要的文字，一共有四組，例如瀏覽或首頁都是可以的，綠色的部份則是相關敘述，也可以改成中文，如下圖這樣，按下儲存，你的文章導覽列就出現了。


目前這項功能是將導覽列放在文章標題上方，如果你想放在文章末或是文章標題下方，目前我自己測試過，沒法達成，或許有高手再分享。

另外Abin也有介紹以年月份做分類的導覽連結列 (Year & Month Breadcrumbs)，因為有的人的分類標籤不只一種，喜歡這種方式的人也可以使用看看。

2009.11.3.10:00pm更新，
有網友提到標題重複兩次的部份，可以將第三步驟裡面的(紫色)
<span><data:post.title/></span>這部分刪除就可以不會有兩次標題的情形。

參考來源：
Make breadcrumb on top of post

如何讓文章無法反白選取，避免文章被抄襲

上次在如何防止他人複製文章的方法(鎖右鍵)，提到用鎖右鍵方式讓他人無法使用Ctrl+C來複製你的文章和圖片，破解方式比較簡單，而今天要介紹的則是讓人無法選取你的文章(Disable highlight text)，當然也就無所謂的複製貼上的問題，更多了一層保護自己文章心血的利器。

這個對以文字為主題的部落格比較有利，文字部分因為有牽涉到顏色大小、字型及相關聯結等等，就算是看原始碼(如下圖)，也常常被切的亂七八糟，而且中文的標點符號會變成編碼，如下圖這樣，我想抄襲的人也懶得去擷取其中他要的文字吧，自然被抄襲的機會就大大降低，但當然他如果要套用你的文字設定，整篇抄走也是有可能的。


如何設定呢? 方式也很簡單，

進入後台→版面配置→網頁元素→新增小工具→新增HTML/JavaScript ，然後輸入下列程式碼即可。
<script type="text/javascript">

/***********************************************
* Disable select-text script- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//form tags to omit in NS6+:
var omitformtags=["input", "textarea", "select"]

omitformtags=omitformtags.join("|")

function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
return false
}

function reEnable(){
return true
}

if (typeof document.onselectstart!="undefined")
document.onselectstart=new Function ("return false")
else{
document.onmousedown=disableselect
document.onmouseup=reEnable
}

</script>
按下儲存即可，建議這個元件的位置可以放前面些，讓他一載入網頁就發揮效用，因為他的程式碼是不會出現在網頁上的，所以擺在哪裡比較不會影響畫面的美觀。

其他部落格系統應該也可以使用，只要有支援Java Script語言的自由欄位，放入這些程式碼即可，有需要的朋友可以試看看。

P.S.綸太郎的教學文章目前是不會採用這個功能的，不然讀者就無法拷貝那些程式碼了。

2009.11.2更新，有網友提到，封鎖"這樣等同於「封鎖 Firefox」、「封鎖 Google 功能」"，我想利用的朋友也不是很樂意這樣用的，譬如推文網站，想推文的人可能因為沒法複製你的片段文字，就放棄推文，但我想以創作文章的人而言，被盜用文章是很ooxx的事情，還要花時間跟對方溝通，對方還不一定要將文章拿下，或許還不甩你，這是一種預防功能，要不要用我想每個格主心中都會自我衡量。

至於封鎖firefox的google功能，這就是對讀者有些不便的地方，因為在Firefox瀏覽器下，可以選取一段文字，然後按右鍵，會出現以Google搜尋「被選取文字」的功能，當然使用了這個無法選取的工具，這作用也就失效了，但其實這功能我自己也很少利用。

一方面想讓你的網頁或是部落格有可親性，但另一方面也要維持自己的心血不被別人抄襲利用，我想是創作者自己要衡量拿捏的，雖說破解方式還是有，但總是聊勝於無，減少一些枝枝節節的麻煩產生罷了，要不要放就看格主自己決定了，我只是想分享有這樣的功能的工具，稍微解決一些存在中的問題。
參考來源：
Disable highlight text on blogger