最近Blogger的文章越來越多，開始做一些調校。
把從剛開始套用template到目前修改/新增的功能
記錄一下參考資料及改過的地方：
DarkRed Template
最吸引人的是 Related Post 功能，
但他的缺點是不能吃有 / 的標籤
所以用比較暴力的作法，就是將每篇文章分成兩種標籤
一種是 多層樹狀標籤 的 AAA-BBB-CCC 格式
另一種是給 Related Post 的 標籤
兩種分類是分開的
把Template的xml稍微修改一些色碼 (範本>編輯HTML)：
依照自己的需求，刪掉以下部分：
<nav id='navtopx'>
<div id='navtop'>
<ul id='navtopnya'>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Archive</a></li>
<li><a href='#'>Comments</a></li>
</ul>
</div>
<div id='mobinavtop'>
<a class='gtonavtop'>Go to...</a>
</div>
<div id='search-form-feed'>
<form action='/search' onsubmit='return updateScript();'>
<input id='feed-q-input' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = "";}' onkeyup='resetField();' type='text' value='Search...'/>
<input class='search-button' type='submit' value='Search'/>
</form>
<div id='search-result-container'/>
<div id='search-result-loader'>Searching...</div>
</div>
</nav>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<div id='socialme'>
<ul>
<li><a class='fb' href='#'><span>Facebook</span></a></li>
<li><a class='tw' href='#'><span>Twitter</span></a></li>
<li><a class='go' href='#'><span>Google+</span></a></li>
</ul>
<div id='navixnya'>
<ul id='navnya'>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li class='dgnsub'><a href='#'>Archive</a>
<ul class='subnya hidden'>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
</ul>
</li>
<li><a href='#'>Comments</a></li>
</ul>
</div>
<div id='mobinav'>
<a class='gtonav'>Go to...</a>
</div>
<ul>
<li><a class='rpost'><span>Recent Posts</span></a>
<ul class='rpostx hidden'>
<script src='/feeds/posts/default/?alt=json-in-script&callback=dropdownposts'>
</script></ul>
</li>
<li><a class='rkmtr'><span>Recent Comments</span></a>
<ul class='rcommentsx hidden'>
<script src='/feeds/comments/default?alt=json-in-script&callback=dropdowncomment'>
</script></ul>
</li>
</ul>
</div>
<div class='rss'>
<a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Post RSS'>Posts RSS</a>
</div>
同時發覺Blogger的限制：單頁網頁只能呈現1MB，
所以有時候明明在 最多顯示 那邊修改了文章數量，
但Blogger文章總是會少於該數量，而且每頁還不同數量@@
最好的解決辦法是在文章裡面加入 繼續閱讀標示
但因為本身Template就有呈現將文章摘要的功能(但實際上文章size未改)，
插入閱讀標示後，就會出現 閱讀更多 的按鈕
所以把Template的以下部分拿掉
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
多層樹狀標籤
參考 Wayne Fu 的 Blog 來實做
裡面有每個工具非常詳細的說明，站長也很熱心回覆
新增自訂功能
最後就是利用
版面配置>新增小工具>HTML/JavaScript將第三方功能或其他程式
來增加各種Widget
- ex: FB、Plurk、Twitter、Footprints、創用cc
當然如果熟悉一點html語法(google有很多參考資料)，
在網路上看到不錯的設計樣式，配合瀏覽器(Chrome)的檢查元素的功能
就可以設定成自己想要的樣子
- ex:社群連結
今天在某個網站上看到不錯的社群連結樣式
在社群連結的位置，按滑鼠右鍵>檢查元素
就可以看到該社團連結的程式碼
在對著該行程式碼按滑鼠右鍵>Edit as HTML
就利用Ctrl系列將程式碼複製下來，修改成自己想要的樣子
<div class="widget-content">
<a href="https://facebook.com/DapperLoucom" target="_blank"><img src="http://i49.tinypic.com/169n7ns.png" border="0" alt="Dapper Lou Fan Page"></a>
<a href="https://twitter.com/DapperLou" target="_blank"><img src="http://i47.tinypic.com/1zx5xer.png" border="0" alt="Dapper Lou Twitter"></a>
<a href="http://pinterest.com/DapperLou" target="_blank"><img src="http://i50.tinypic.com/2niba79.png" border="0" alt="Dapper Lou Pintrest"></a>
<a href="http://instagram.com/dapperlou" target="_blank"><img src="http://i48.tinypic.com/2n14xvc.png" border="0" alt="Dapper Loi Instagram"></a>
</div>
每一個 href後面跟的就是 "各種服務網址"
而每一個 xxx.png就是icon圖案的網址，
可以到IconArchive找自己喜歡的圖案
把這些服務網址、圖片網址替換掉
就可以是自己想要的社群連結了
當然如果不希望某個社群連結出現
就把 整段 <a ...... 到 </a> 的地方刪掉
同理如果想要新增新的連結圖案，
就把整段 <a ...... 到 </a> 的地方複製貼上
改成自己想要的圖案、社群連結
