Search

㊗ 新的一年,祝福讀者們 2020 新年新希望!! ◆ Welcome to Laird Studio! 歡迎蒞臨萊爾德工作室! ◎ Android Studio 基礎教學籌備中,敬請期待! ☏ 對網站有任何問題或建議,都非常歡迎使用留言板或至 Facebook 粉絲團發訊息,讓我們知道您的想法 (੭ु´ ᐜ `)੭ु

2015年8月26日 星期三

[ 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 相關文章功能