2009年11月25日 星期三

如何美化模板元件的外觀配置


這篇是有關模板結構每個元件定義的初淺說明,如何設計一個個獨特個性化的版面,這裡或許有些資訊你是可以參考的,但如果是剛加入blogger的新手,對語法不甚了解的朋友,請斟酌使用。

其實在Blooger模版上的每個元件除了基本的css設定外,都有他的獨一無二的定義名稱,會用b:widget語法來顯示,例如最主要的部落格標題(Header1)及文章本文(Blog1)區,如下所示,在後台是一定要存在的項目,這是在html區可以看到的:
<b:widget id='Header1' locked='true' title='部落格標題(標頭)' type='Header'/>
<b:widget id='Blog1' locked='true' title='網誌文章' type='Blog'/>

而在官方的邊欄小工具裏,首先我們要知道不同的元件有不同的英文固定名稱,如下


常用的邊欄小工具:

<b:widget id='Profile1' locked='false' title='關於我自己' type='Profile'/>
<b:widget id='HTML1' locked='false' title='html
/JavaScript元件' type='HTML'/>
<b:widget id='Label1' locked='false' title='文章分類(標籤)' type='Label'/>
<b:widget id='Feed1' locked='false' title='資訊提供' type='Feed'/>
<b:widget id='BlogArchive1' locked='false' title='網誌存檔' type='BlogArchive'/>
<b:widget id='CustomSearch1' locked='false' title='搜尋此網誌' type='CustomSearch'/>
<b:widget id='BlogList1' locked='false' title='我的網誌清單' type='BlogList>'/>
<b:widget id='AdSense1' locked='false' title='廣告' type='AdSense'/>
文字、圖片及網址連結
<b:widget id='Text1' locked='false' title='文字' type='Text'/>
<b:widget id='Image1' locked='false' title='圖片' type='Image'/>
<b:widget id='TextList1' locked='false' title='清單' type='TextList'/>
<b:widget id='LinkList1' locked='false' title='連結清單' type='LinkList'/>
社群功能的元件
<b:widget id='Followers1' locked='false' title='追蹤者' type='Followers'/>
<b:widget id='BlogList2' locked='false' title='我追蹤的網誌' type='BlogList'/>
多媒體元件
<b:widget id='Slideshow1' locked='false' title='投影片' type='Slideshow'/>
<b:widget id='NewsBar1' locked='false' title='新聞影片' type='NewsBar'/>
<b:widget id='VideoBar1' locked='false' title='視訊列' type='VideoBar'/>
其他
<b:widget id='Subscribe1' locked='false' title='訂閱連結' type='Subscribe'/>
<b:widget id='BloggerButton1' locked='false' title='Blogger按鈕' type='BloggerButton'/>
<b:widget id='Poll1' locked='false' title='意見調查' type='Poll'/>

這裡要注意的是在Blogger的模板裡,每一個widget id都是唯一的,不能夠重複,有時你定義模板的CSS時可能會發現,有的定義前面是 # ,有的定義前面是 ‧ ,這在HTML用法是不同的,
# 代表這是一個id定義,元素是唯一的
代表這是一個class定義,則是可以多種套用

要怎麼說比較容易讓大家瞭解,簡單的說明,就是把id看成是一個人,而class是他穿著的外表,所以這個人在世界上是獨一無二的,但是他的外表卻可以隨著天氣變化,或是環境不同有著不同的穿著。

而同一性質的id,在模版裡通常我們是用1.2.3數字來區別,譬如我們常用的Html/Java Script小工具,我們常會看到有HTML1、HTML2...甚至到HTML98,還記得上次BLOGGER套用模版發生的錯誤嗎?當時就是官方模板,在我們還沒有加入任何元件前,就把一些常用的定義加以設定,例如Label1、HTML1、Feed1、等都自動設定,所以當我們套用新的模板時,就會出現2個ID重複,所以沒法套用,所幸這個問題後來解決了,但有些元件id重複套用,如果是在外觀的處理上,並不會出現問題,但我們儘量還是用class來定義會比較好些。

而關於id和class有什麼不同,可以參考♣梅問題‧教學網【Minwt】♣的[CSS]id與class別再傻傻分不清楚,有更詳細的說明。

你可能會問要知道這些要做什麼用?
我所知道的是可以改變某些元件的屬性,或是個性化自己的版面,再深入的話,則是可以變化自己模版的配置,不過這要和b:section同時做變動,這個是較為深入的技巧,以後有機會再談。

譬如從這句
<b:widget id='Profile1' locked='false' title='關於我自己' type='Profile'/>
除了id,你可以看出什麼,這裡有個locked='false'敘述,這是表示這個元素是可以移除且可拖曳,點選這個widget你會發現後台有一個移除的按鈕,但如果你設定為locked='true',則這個widget是無法移動,會被固定住,而且是無法移除的,這個元件沒有了可拖曳的框框,


而且原先有的移除按鈕,你會發現不見了,如下圖這樣,


所以我們套用一些網路上提供的模板,你會發現有的設計者把有些元素,設成ture,例如廣告或是有些商業連結,讓你無法移除,這時如果知道這個設定的方法,就可以移除一些你不想在模板上出現的東西,。

另外這也是一個可以個性化自己邊欄元件的方式,之前綸太郎寫過一篇如何利用捲軸讓邊欄(Sidebar)元件縮短的文章,就是利用這樣的設定來改變每個元件不同的面貌,只要對不同的元件加入一個新的定義也是可以達成不同的效果,譬如想讓設定的捲軸不一定要一樣的高度。

譬如原來的新手建議閱讀元件, 他的外觀就如隨機閱讀及最新迴響的樣子,


我想讓他有不同的外觀顯示,改成如下面這樣,


這時我們從後台的程式碼用新手推薦閱讀為關鍵字找到這行語法,
<b:widget id='HTML11' locked='false' title='新手推薦閱讀' type='HTML'&g;t
知道這個元件的定義名稱為HTML11,大小寫是不一樣的元件ID,這是要注意的。
所以我們就可以新增這個HTML11的相關連定義,如下圖這樣,這樣你的邊攔就會有不同的變化,例如有的人喜歡,紅橘黃各為單元背景顏色,或是一個有背景一個無背景的交錯顯示,都是可以自行運用的。

這裡可以發現blogger模板的每個內容定義都是用widget-content來設定,所以我們加入以下新的定義,就可以將你的個別widget來產生不同的顯示效果。


如果你有使用先前綸太郎介紹的縮短元件的方式,你可以發現用直接定義的方式,就可以不用去後台Html裡,找到該元素的widget-content,用<div class="scrolling2">去套用他,感覺會比較方便些。

其實以上的設定,綸太郎認為比較適合在不同的元件想有不同的捲軸高度來運用,例如先前談到的都是用一個class(.scrolling2)來定義所有的捲軸大小,這裡你就可以用自訂的方式來產生,另外不同性質的元件,例如多媒體及讀者Feedback的單元,都可另外設計較活潑的外觀顯示,或許比較麻煩,但想要有個獨特性的模板,我想從這裡來發展也是個可以利用的工具。

延伸閱讀:
如何利用捲軸讓邊欄(Sidebar)元件縮短
幫邊欄的網頁元素(widget),自訂不同的漂亮圖示

9 則留言:

  1. 哈...我又來發問啦~
    請問如何將文章發表日期→【10/19/2009 10:25:00 下午】月/日/年 時:分:秒 上下午,
    變成【2009/10/19 22:25】年/月/日 24小時制的時:分:不要秒 呢?
    以及留言回覆區該如何將在最下面的留言時間那一行,移到留言者的姓名之下,留言內容之上呢?
    謝謝你~

    回覆刪除
  2. 時間的型態,在後台的設定裏可以看到,就是那幾種,至於你說的位置問題,找到
    <b:if cond='data:comment.authorUrl'>
    <a expr:href='data:comment.authorUrl'><data:comment.author/></a>
    <b:else/>
    <data:comment.author/>
    </b:if>
    然後將
    <dd class='comment-footer'>
    <span class='comment-timestamp'>
    <a expr:href='data:comment.url' title='comment permalink'>
    <data:comment.timestamp/>
    </a>
    <b:include data='comment' name='commentDeleteIcon'/>
    </span>
    </dd>
    移到他的下面,我的模板是這樣,你就看你的模板的相關是什麼語法,每個模版都不太一樣,移動前記得要先備份。

    回覆刪除
  3. 您好~謝謝您的教學~
    不過如果是希望日期是在名字後面呢?
    如這邊的留言→http://blogger-templates.blogspot.com/2008/10/dfire.html
    我自己移來移去都失敗了~ˊ"ˋ
    謝謝喔~

    回覆刪除
  4. 你把上面第二段的
    <dd class='comment-footer'>
    漢最後的</dd>拿掉就可以了。

    回覆刪除
  5. 感謝您~果然懂得人就是懂~~~好厲害!
    不過移到後面之後好像就不能改顏色大小之類的了~~所以我又放棄了哈哈...

    回覆刪除
  6. 如果要改顏色,那就不要刪除,把dd用span代替也是可以的
    那.commetent-footer就可以定義顏色了
    <span class='comment-footer'>
    ....
    </span>

    回覆刪除
  7. 作者已經移除這則留言。

    回覆刪除
  8. 你可以參考這篇http://01mistery.blogspot.com/2009/06/social-bookmarks.html

    回覆刪除

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