[ Blogger ] [ XML ] 如何在 Blogger 行動版網頁加入 Label 標籤

Laird Studio 行動版網頁

讀者們使用 Blogger 一段時間後，漸漸會對「網頁設計」這個領域越來越親近，除了電腦版的網頁之外，自然也會顧慮到行動版網頁的呈現效果。

有開啟自訂行動版網頁的讀者應該會發現， Blogger 行動版網頁「預設」是不會顯示 Label 標籤功能的！

因此這篇文章是提供 Label 標籤的語法給大家，只要在你想加入標籤的 " header-line " 或是 " footer-line " Class 裡面新增 Label 標籤的語法，就能夠像 Laird Studio 的行動版網頁一樣顯示 Label 標籤囉！




首先請到 Blogger 管理介面 -> 範本 -> 編輯 HTML


在程式碼視窗內按下鍵盤 " Ctrl  +  F " 搜尋字串 " mobile-post "

（使用 Mac OS X 的話，請按 " Command + F "）


會搜尋到以下語法：

再來就要看你想把 Label 標籤放在 " header-line " 還是 " footer-line " 了！

下圖是把 Label 標籤的語法放在 " footer-line " ，所以會顯示在文章結尾！

如果你是想把標籤放在文章頂端（像第一張圖一樣），那就把 Label 標籤的語法放在 " header-line " ！


以下提供 Label 標籤的語法：

<span class='post-labels'>   （可省略）
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
<b:if cond='not data:label.isLast'>
, 
</b:if>
</b:loop>
</b:if>
<span class='post-labels'>   （可省略）

如何在 Blogger 行動版網頁加入 Label 標籤的教學就到這邊~

我們下次見~



您可能會有興趣的文章：

[ Blogger ] [ XML ] 如何在行動版網頁加入文字版 Related Posts 相關文章功能