v Blogger template模板教學課程---概說及基本結構 >> 0 與 1 謎詭世界
★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,
是網路的基本禮儀。


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

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

Related Posts Plugin for WordPress, Blogger...