2009年2月13日 星期五

兩欄式簡潔的模板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)

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

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

20 則留言:

  1. 樣式滿清新的,的確是滿好看!!

    回覆刪除
  2. 謝謝,你的黑色佈景的配合攝影照片也很不錯。

    回覆刪除
  3. iNove最近真的很紅,一堆wp用戶用,我自己也很喜歡,還寫了一篇文章推薦,之後挑選模版也都挑選這種2欄的版型XD

    回覆刪除
  4. 原來他是第一名,難怪這麼多人使用。

    回覆刪除
  5. 您好
    我很喜歡這個版型
    因此決定拿來自己用
    但想請問一個問題
    就是我不想要部落格上的標頭
    我之前是加上一行
    #blogtitle{display: none;}
    就可以解決

    但是這版型我加上去還是弄不掉耶
    請問有什麼方法嗎?
    謝謝

    回覆刪除
  6. 這個模版的語法應該是加在這裡吧
    #header-inner h1 {
    display: none;
    }

    不是每個模版的定義都是#blogtitle,你要學著判斷,才能加在正確的地方。

    回覆刪除
  7. 成功了
    謝謝你
    剩下得等假日在延就好了XD

    回覆刪除
  8. 慢慢改,我改了將近兩天才完成。

    回覆刪除
  9. 您好, 非常喜歡你的設計, 不過我還是新手, 很多東西都要慢慢的去改.....暫時只用了最簡單的白色背景

    回覆刪除
  10. 謝謝,其實我只是修改了一些東西,最主要還是原始設計者的模板配置不錯。

    回覆刪除
  11. 綸太郎,
    之前我經常看你的方法去修改我自己的部落格,這次,我用了你介紹的模版與教學把我的部落格再改版了一遍.謝謝你.

    回覆刪除
  12. 改得很棒呢,有夏天清爽的感覺,謝謝你的分享。

    回覆刪除
  13. 這個Template裡面有兩個.post-body ul {
    兩個里面都有text-align: justify;是不是都刪掉啊?謝謝!

    回覆刪除
  14. 你可以自己試試看,有刪沒刪哪個比較適合你,我是都刪掉。

    回覆刪除
  15. 左下角那個Atom要怎麼隱藏?照你以前說的找到
    .feed-links {
    text-align: left;

    }
    這個模版好像沒有.feed-links {

    回覆刪除
  16. 沒有就自己加上去。

    回覆刪除
  17. 非常感謝你!模版就快要全部修改好了!
    你有沒有文章講說有關字體'font-family'的文章
    比如所文章的日期字體要到那修改,文章標題的字體要到那修改之類的等等。 。
    謝謝!

    回覆刪除
  18. 我想你可能不喜歡爬文,先前已告知要參考Blogger模版CSS語法細部介紹(下)及上篇,我想你可能還是沒看,多利用搜尋功能對你會有幫助的。

    回覆刪除
  19. 一些代碼沒法放上來
    http://i318.photobucket.com/albums/mm431/hskj127/other/1.jpg

    回覆刪除
  20. 我不是百科大全,也不是一開始就是高手,到現在我也不敢自稱高手,還在學習中而已,祇是分享我改模板的過程,很多模版我也是看不懂,試了再試,你太看得起我了,你的問題我沒法幫你解決,抱歉了。

    回覆刪除

設有留言驗證及核准,版主閱覽後,留言才會顯示,發問前請善用網站目錄Google搜尋功能