v 如何美化模板元件的外觀配置 >> 0 與 1 謎詭世界
★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,
是網路的基本禮儀。


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

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

Related Posts Plugin for WordPress, Blogger...