兩欄式簡潔的模板Flashyweb ---改版分享

最近換了這組新的模板，大致上的反應還不錯，曾經使用過兩欄式的模板，但總覺得版面容易拖得太長，滑鼠要滾動好多次才能到底，對我這種懶人而言，能避免就避免，但是最近或許受到金融風暴的影響，很多事都趨向單純化，原始化，所以也想改個版面，配合一下自己回歸簡單生活的態度。

這次的模板來源為Blogger Templates，其實發現最近兩欄黑白模板還蠻流行的(這是WP的)，找到類似的，然後用我喜歡的深藍為背景，點綴一些紅黃綠的顏色，讓頁面不至於太嚴肅或是單調，當然文字大小也要調整，至少要自己看的舒服，不用瞇瞇眼看文章，Logo設計則以被光纖纏繞而發光的地球來代表"世界"這兩個字，而漂亮的訂閱RSS圖示則有畫龍點睛的作用，讓畫面一出現就能吸引住讀者的眼睛，（自己稱讚自己真是不害羞，哈），其實以上都是自已的審美標準，至少我自己很喜歡，看倌們就客隨主便吧。

哈拉廢話一堆，該進入重點了，模板的資訊，
作者頁面：New Blogger Template : Flashyweb
展示頁面：http://flashyblogger-btemplates.blogspot.com/
下載頁面：http://btemplates.com/download/813/


原先是淺黃色為底的背景，其實我覺得這個設計者好像模板設計到一半沒有完成，但也可以說他給使用者一個相當大改造的空間，很多元素定義都沒有內容，或是多了一些不必要的定義，應該是作者在測試版面時加進去的，沒有刪除，不過我還蠻喜歡這個版面的配置與一些顏色的應用，所以就把它改版成現在這個樣子，另一個重點是他可以使用內嵌的留言功能，而不用改程式碼。

這個模板面最大的問題就是回應區的第一則留言會跑到文章頁尾區，如下圖：


找到
.post-footer {
float: left;
color: #006EA6;
}
將裡面的float: left;給刪除即可，這個.post-footer {，要注意有兩個，下方那個才是要改的。


還有一個小地方，就是p, ul, ol {及.post {和.post-body ul {的定義裡，
text-align: justify;
這個會讓你的文字編排在某些情形下有分散對齊的功能，這在Firefox的瀏覽器會發生作用，IE6好像沒有影響，建議把它刪除，讓你的版面看起來會比較一致。

另外這個模版最上方及最下方都有提供功能表，找到
<div id='menu'>
<ul>
<li id='current'><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Posts RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/comments/default"'>Comments RSS</a></li>
<li><a href='#'>Edit</a></li>
</ul>
</div>

下方功能表
<div id='footer-menu'>
<ul>
<li id='current'><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Posts RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/comments/default"'>Comments RSS</a></li>
<li><a href='#'>Edit</a></li>
</ul>
</div>
將粗體文字及連結網址改成你自己的即可，而
a expr:href='data:blog.homepageUrl + "feeds/comments/default"'這種語法，可以直接改成a href='你要的網站網址'就可以，而最後的 a href='#'，井字就是放進你的網址，如果想新增連結就加入
<li><a href='網站網址'>網站標題</a></li>
這行即可，如下圖這樣


上方的連結如果太多，可以修改#menu {裡的寬度，width: 400px;，將寬度設更寬。

另外搜尋框，如果不想用，而想放上AdSense搜尋列，找到
<div id='search'>
<h2><b class='text1'>Search</b></h2>
<form action='' method='get'>
<fieldset>
<input id='s' name='s' type='text' value=''/>
<input id='x' type='submit' value='Search'/>
</fieldset>
</form>
</div>
把它刪除，然後在後台網頁元素新增Html/JavaScript的小工具將你的AdSense程式碼放上即可。

而目前加入的Blgger Hacks資源：
1、繼續閱讀（ReadMore）
2、社交書簽功能列（Social Bookmarks）
3、FunP推文鈕
4、單篇文章AdSense廣告
5、相關文章（Related posts）
6、頁尾訂閱提醒
7、回應編號（Comments numbering）
8、標籤分行
至於SEO版面優化部份，
‧ 部落格文章標題優化，加強SEO效果
‧ 為你的網站加個小圖示---Favicon（其實這個很重要，我常在書籤頁面裡，直接認icon來瀏覽網站）
‧ 如何控制文章網址的產生
‧ Meta的重要性，對搜尋引擎而言
‧ Blogger template模板教學課程---概說及基本結構，裡面的head宣告加入了部落格關鍵字（keyword）

所以說雖然整個版面看起來簡潔，但是實際上要利用到的東西還真不少，如果是初學者可以慢慢加上去，不用一次把它用光。

整個模板大致的改造情形就是這樣，這個模版還蠻簡單的，只是我自己放進去的東西很多，有興趣的朋友可以留言討論，其實還有想寫的東西，但是又把文章寫太長了，下次再分享了。