v 兩欄式簡潔的模板Flashyweb ---改版分享 >> 0 與 1 謎詭世界
★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,
是網路的基本禮儀。


>
2013 曬書節 - 萬種商品49元起!

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搜尋功能

Related Posts Plugin for WordPress, Blogger...