2008年8月18日 星期一

Blogger template模板教學課程---概說及基本結構

為何在Blogger架設自己的部落格一文,綸太郎說明為何選擇Blogger建立部落格,而在Blogger成立你的部落格最大的問題就是版面如何編排,功能怎麼啟用,由於原始介面簡單,雖說blogger是Google名下的服務,可結合各種資源,但很多人一聽到語法、html及css,就逃之夭夭,什麼自由度、主權掌握在我手,通通不重要,但如果你還是願意踏入這塊園地,而不懂語法及一些css的朋友,希望這系列的文章能對您有所幫助。

在Blogger經營網站一年多,雖然還有很多不足的地方,但是基本上程式碼大部分還看得懂,除了一些java script等的語法,經常改版也遇到很多版面上修改Css的難題,所以想寫下自己改版的過程,或許初入門的一級生們還是需要比較基本的認識,這是個系列文章,至於申請及後台基本設定,我想很簡單就不必再解說了。

Blogger開放模版程式碼讓網友修改是比其他家的BSP要強得多,大部分只有開放外觀修改,我以Blogger官方提供的模板Thisaway Blue來說明,



首先我們進入Blogger的後台,

在一般模版(template)中主要分兩大主體,
1、CSS,網頁的外觀,譬如字型大小、顏色、型態,外框、圖片設定等
2、HTML,網頁的結構與內容,注重版面編排位置設定,在Blogger的使用裡,是使用XHTML,比HTML更嚴謹且較簡潔也是最新的版本。

整個模板可以分成
網頁文件宣告(最上方到<head>之間)
外觀CSS設定及網站文件資訊( <head>到</head>)
內容結構HTML語法(<body>到</body>)
如下圖,

blogger template在模版最最上方就是這個網站的文件宣告,告訴瀏覽器你使用的XHTML版本及參考的文件來源。

接下來的head則是文件的標題,說明網站或是文件的相關訊息,有數種標籤可以運用,如title、meta、link,告訴瀏覽器你的網站名稱、文章標題、作者、使用的關鍵字、外部連結等等訊息,另外網址出現的小icon也是在此定義。

如果你是初學者上面這些可以不用去動他,如果想優化網站,做好SEO,這裡是有些小技巧可以運用的。

接著會列出這個模版的設計者的資訊,通常我們瀏覽到某個blogger網站,覺得版型不錯,也可透過檢視頁面原始碼,來得知模版設計者的來源,這部分建議不要刪除,尊重原創者。

/* Variable definitions,這部份就是字型及顏色、大小的設定,如果沒有這部份,那麼版面配置裡的字型與顏色也無法作用,常有人問為什麼我改了字型與顏色,都沒有產生變化,那就是因為該元素沒有定義。

從body{ 到 </head> ,這就是CSS外觀設計,這裡就是大家最頭痛的地方,怎樣讓你的版面更美,更賞心悅目,是要經過一次又一次的測試,調整顏色、距離、文字大小,設計特別的圖案顯示,都在這裡完成。

從<body>到</body>,則是HTML內容結構設計,讓每個網頁元素的排列組合符合你的要求,比如兩欄變三欄,除了多了邊欄(sidebar)的定義css,在html也是要加上相關的語法才能完成。

以下為初學者常會問的問題,整理如下,
Q&A:如果喜歡一個模版如何套用呢?
請參考Blogger 新手基本技巧問答(一)一文。
Q&A:我想要改變模版的大小?
請參考版面大小的調整一文。
Q&A:我想換標題圖片?
請參考換Banner圖片及文章標題加上圖示
Q&A:我不想全文呈現,想要文章摘要兩三行再進入全文,怎麼做呢?
建議上Google查詢”繼續閱讀”,就會有很多資料,綸太郎是使用羊男的繼續閱讀版本,每篇文章需加入語法,請參考繼續閱讀的設定
Q&A:沒有最新文章與最新回應,怎麼加上去?
請參考,新增最新文章&最新回應一文
Q&A:我想申請Blogger, 有什麼要注意的事嗎?
請參考,Blogger初入門教學彙集一文

其實如果你不那麼苛求版面設計、而以功能為主的話,以Blogger官方所提供的版面也是夠你利用的,就看看國內有名電腦玩物的部落格,就是使用基礎的版面設計,再配合功能性的修改,還是能擁有上萬戶的訂閱者,所以內容還是王道,但你以為寫的好,就隨便哪一家都行嗎?當然不行,因為在Google Blogger寫的文章,Google一定不會忘記你的,搜尋結果是比其他的Bsp效率成果要好,而要求版面設計者,現在Blogger Templates的資源真的是很多,選擇你喜歡的,再來修修改改,也是能擁有個與眾不同的版面的。
延伸閱讀:
Blogger template模板教學課程---CSS外觀解說
Blogger template模板教學課程---HTML內容架構
blogger模版CSS語法細部介紹(上)
Blogger模版CSS語法細部介紹(下)

31 則留言:

  1. 多謝指導。

    我是自己土法煉鋼,同時看網路上教學亂改的,但這樣解釋整體架構的文章還是第一次看到。

    也許是因為這問題太基本了,通常會改的人應該都懂這個吧!我是搞九了才慢慢自己注意到原來如此的,如果當初就有這篇文章會減少很多失敗的。

    謝啦!

    回覆刪除
  2. 你的也改得很好,經營的也很成功,我要向你學習的地方也很多,我是因為最近加入的人多了,很多人真的連基本的都很難上手,想當初我也是這樣,所以想還是寫出來,大家互相交流意見,很高興收到你的留言。

    回覆刪除
  3. 在網路上搜尋到你的文章,真是受益良多,但我想請教一個問題,為什麼用火狐改的網誌看沒有問題,而用ie連開都開不起來呢,是不是語法要更改一些設定,自己研究了兩三天還是看不出個所以然。

    還是很嫩的新手
    http://ohitisadreamstar.blogspot.com/

    回覆刪除
  4. 你要不要試著把Gadget移除看看,是否是這個原因。

    回覆刪除
  5. 您好,小女子我於年前幫朋友接手經營一個宗教機構的BLOG.不過因為完全是個新手,所以想在網路中搜尋高手來學習,就這樣逛到了您家.現在想徵求您的同意,可否允許我將blogger template模板教學課程這一系列的文章列印下來慢慢研究.因為我是幾乎時間都被兩個學齡前孩子佔據的家庭主婦,實在沒太多時間坐在電腦前慢慢看您的文章.期盼您的答應,謝謝!

    回覆刪除
  6. 如果只是單純列印下來自己要看,這當然沒有問題,不要在網路上散佈即可,當然也不要列印成冊拿去販售或是未經作者同意列印流傳,我想這是大部分創作者都希望得到的尊重。

    回覆刪除
  7. 可以列印下來,真是太好了,謝謝您囉! 也請您放心,這資料絕對只會出現在我家. 再次說聲謝謝!

    回覆刪除
  8. 不客氣,希望能幫到你就是了。

    回覆刪除
  9. 向綸太郎求救~
    拜讀您的BLOG,讓我有了好多改革想法,但門外漢的我,現在右欄背景"很不順",頁面的底端也是,但我想把底部那一條刪掉,另外標題背景不知要如何增加高度,節錄以下語法希望可以幫我解答,感謝!!
    #sidebar-wrap {
    width:250px;
    float:$endSide;
    margin:15px 0 0;
    font-size:97%;
    line-height:1.5em;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }

    回覆刪除
  10. To YvonnE,頁面的底端,就找到/* Footer這區,把裡面有背景圖案#footer-wrap2 {及#footer {的圖都刪掉,改成和你的底色相同即可。
    例如:#background:#bca;

    其實你要擴大寬度,可以把背景圖都去除,單純以顏色表示就好,不然版面看起來很怪,有個缺口三角。

    標題部份,你的圖是912*214,找到
    #header-wrapper {這一區
    新增
    width: 214px;
    height: 912px;
    即可,再修改你設的margin及padding看看。

    其實你改的不錯了,再加油。

    回覆刪除
  11. 謝謝你呀~~
    我也覺得擴大寬度造成的缺口三角很礙眼,後來乾脆換範本再修改,這次有小小問題,那就是標題的框線想取消掉,可是不知道是哪一個,如果大大有空,再幫我看一下吧,非常感謝呢!

    回覆刪除
  12. #header-wrapper {及#header {裡的border: 1px solid #ffffcc;整行刪除,或是改成0px也可以。

    回覆刪除
  13. 改好了~~真的超級感謝!!

    回覆刪除
  14. 那個...(笑),沒有人這樣刪的,你要把border:那行全刪除,不能留一半。

    雞婆一下,如果覺得圖片的框線很礙眼,找到
    .post img {
    padding:4px;
    border:1px solid #ffffcc;
    }
    也是把裡面的敘述
    border:1px solid #ffffcc;
    整行刪掉即可。

    回覆刪除
  15. 哈哈~~你怎麼知道我只刪一半,可是外觀我看不出破綻耶~~嘿嘿!圖片的礙眼框線我不好意思問你,誤打誤撞有先自己找到喔,不過聽你意見border:都刪掉了,沒想到改這個好好玩,我還在亂試當中,謝謝你喔~

    回覆刪除
  16. 到你的網站上看,檢視原始碼即可看出,亂測沒關係,記得要把好的備份起來,不然改壞了,又要從來。

    回覆刪除
  17. 感謝您的文章,寫得很詳盡
    我最近遇到一個問題一直無法解決
    要請教您

    就是我的連結顏色會跑回預設的藍色和紫色,無法按照/* variables中的定義來顯示。

    所以造成文章中出現的連結、文章發佈的時間、閱讀更多(用blogger內建的)、意見(在首頁時的連結)以及其他的blogger widgets (labels, archives等),顏色都不對。

    試著直接去改a:link {.....之顏色設定,不用呼叫函數;直接指定顏色也不行。

    所以需要高手相助,指引可能的解決之道。

    (窩檔然也裝了一些hacks,但這些hacks檢查起來沒去定義顏色;而且它們相關的顏色顯示也是正確的,所以覺得問題好像不是來自這邊)

    My blog: http://brain-doctor.blogspot.com/

    回覆刪除
  18. 在/* variables定義區上頭,你加了一行<meta name="msvalidate.01" content="D25FF3E0C236D482C322C0FD116EE270" />可能會影響到,這東西不能加在<style這段敘述裡的,你把他加到更上方有<link或是<meta那一區才對,看看是否可以正常顯示。

    回覆刪除
  19. 感謝您的協助,我嘗試過您所提的移到另一meta區域之後;也試著把兩者都刪除看看,但還是無法正常顯示〉。

    用blogger後台的字型與顏色來看是正確的,但在預覽時就已經是錯誤。

    因為原始的版型是ok的,所以我決定土法煉鋼;把那些hacks一個一個再加上去,看是哪一個可能相衝突。

    有結果會再回報!

    Thanks!

    回覆刪除
  20. 兇手抓到了,在一個意想不到的地方
    我把所有的widgets在新開的testing blogger一個一個再裝一次,發現都沒有問題!

    覺得乾脆把testing得版型裡面的元件改成和主blog完全一樣,再把testing的template移植到主blog上。

    才發現我有一個區塊(我的自介)是用blogger後台的小工具中的'文字'來做的,而且是打在word後才貼上去。

    沒錯,問題就是出在把內容從word直接轉貼;看了他的html是像癌細胞一樣,亂七八糟的亂長一大陀,難怪會干擾整個版型的連結顏色定義。

    事後檢討:對此問題的處理太亂槍打鳥了:一是之前提過裝的hacks其顏色都正確,二是這個問題在弄blog的很早期就有了。如果先靜下心來思考一下,應當可以提早發現問題所在。

    再次感謝您的幫忙!

    回覆刪除
  21. 有這種事,感謝您的分享,學到一招,我再想想看。

    回覆刪除
  22. 請問部落格版面外觀的側欄可以加寬嗎?請問有可參考的文章教學嗎?或者請告訴我可以怎麼修改語法?謝謝

    回覆刪除
  23. 都寫在延伸閱讀裡了,你可以參考看看。

    回覆刪除
  24. 綸太郎大大你好 小弟參考您多篇CSS&Html文章後
    自己動手修改了一個模版 但最後發現了問題 就是原作者沒定義文章時間&看不到所有的留言 又不知道如何去增加這些定義(小弟只在Html上刪掉我不要的版面 CSS完全沒刪只調整數字來控制版面大小) 請問該如何解決這些定義問題呢??

    回覆刪除
  25. 可否提供模版來源或是你的部落格網址,
    文章時間的定義應該是類似h2.date-header可能html沒有加入這部份語法或是css用隱藏語法,例如display:none;等等

    回覆刪除
  26. 小弟的Email是chynaroach@gmail.com 請綸太郎大大聯絡一下 以便寄送原型模版及小弟小修過的模版 以供參考

    回覆刪除
  27. 抱歉,不方便用email連絡,可告知套用的模板原型我再幫你看。

    回覆刪除
  28. 不好意思喔~請教一下綸太郎!!小弟想要在Blogger放上FB的粉絲框,應該怎麼做
    !

    回覆刪除
    回覆
    1. 在FB的個人頁面左下方有個"在你的網站上嵌入名片貼",裡面有"粉絲專頁名片貼",將語法在Blogger後台新增一個小工具"HTML/JavaScript 新增 ",放進去即可新增這個單元。

      刪除
  29. 我的文章字大小ok,但文章下標籤的字又太小我找不到去哪改,還有側邊欄咖啡色的字我想改大小,可以幫我看一下嗎? 謝謝.
    http://eum1.blogspot.com/

    回覆刪除

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