標籤分頁導覽
Blogger 標籤數字分頁導覽 小工具
當分類標籤文章，項目繁多時，Blogger 的標籤小工具，除了清單、標籤雲的顯示模式以外，是否可以使用數字分頁瀏覽 ?
現在我們就來改造 Blogger 標籤小工具，讓您可以從帶編號的導航欄切換瀏覽。
這就是下面的演示代碼所做的。
點按下面的 Code 複製 XML碼：
<b:widget id='Label17' locked='false' title='分類文章' type='Label'
version='2' visible='true'>
<b:includable id='main'>
<!-- 標籤分頁導覽 小工具
以下代碼 <b:with value='10'
var='nbr'> 為設定，要顯示的分頁數量 -->
<div class='widget-content'>
<ul>
<b:if cond='data:labels none (l => l.name ==
data:blog.searchLabel.escaped)'>
<b:include name='Start'/>
<b:else/>
<b:include name='Pagin'/>
</b:if>
</ul>
</div>
<b:include cond='data:widget.sectionId not in
["crosscol","crosscol-overflow"]'
name='style'/>
</b:includable>
<b:includable id='cloud'/>
<b:includable id='content'>
<div class='widget-content'>
<b:class expr:name='data:this.display +
"-label-widget-content"'/>
<b:include cond='data:this.display == "list"'
name='list'/>
<b:include cond='data:this.display == "cloud"'
name='cloud'/>
</div>
</b:includable>
<b:includable id='firstAndPreviousLabel'>
<b:if cond='data:prev gte (data:nbr / 2)'>
<li><a expr:href='data:labels.first.url'
title='第一個'>«</a></li>
</b:if>
<li><a expr:href='data:labels[prev].url'
title='向前一個'>‹</a></li>
</b:includable>
<b:includable id='lastAndNextLabel'>
<li><a expr:href='data:labels[next].url'
title='往後一個'>›</a></li>
<b:if cond='data:next lte ((data:labels.size - 1) - (data:nbr /
2))'>
<li><a expr:href='data:labels.last.url'
title='最後一個'>»</a></li>
</b:if>
</b:includable>
<b:includable id='list'/>
<b:includable id='numberedLabels'>
<b:with value='data:i lte (data:nbr / 2) ? data:nbr - data:i : (data:i
gte data:labels.size - 1 - (data:nbr / 2) ? data:nbr - ((data:labels.size -
1) - data:i) : data:nbr / 2)' var='AtoB'>
<b:loop values='data:i - data:AtoB to data:i + data:AtoB'
var='pager'>
<b:if cond='data:pager gte 0 and data:pager lte data:labels.size -
1'>
<li>
<b:class cond='data:labels[pager].name == data:blog.searchLabel.escaped'
name='selected'/>
<b:if cond='data:labels[pager].name ==
data:blog.searchLabel.escaped'>
<b:eval expr='data:pager + 1'/>
<b:else/>
<b:if cond='data:showFreqNumbers == "true"'>
<a expr:href='data:labels[pager].url'
expr:title='data:labels[pager].name.escaped+ " ( " +
data:labels[pager].count + " )"'><b:eval
expr='data:pager + 1'/></a>
<b:else/>
<a expr:href='data:labels[pager].url'
expr:title='data:labels[pager].name.escaped'><b:eval expr='data:pager
+ 1'/></a>
</b:if>
</b:if>
</li>
</b:if>
</b:loop>
</b:with>
</b:includable>
<b:includable id='Pagin'>
<b:with value='10' var='nbr'> <!-- 已選擇標籤後的搜索頁面顯示數量
-->
<b:loop index='i' values='data:labels' var='label'>
<b:if cond='data:label.name == data:view.search.label.escaped'>
<b:with value='data:i + 1' var='next'>
<b:with value='data:i - 1' var='prev'>
<b:include cond='data:prev gte 0' name='firstAndPreviousLabel'/>
<b:include name='numberedLabels'/>
<b:include cond='data:next gte 0 and data:labels.size - 1 != data:i'
name='lastAndNextLabel'/>
</b:with>
</b:with>
</b:if>
</b:loop>
</b:with>
</b:includable>
<b:includable id='Start'>
<b:with value='10' var='nbr'> <!-- 還沒有選擇標籤時的起始數量
-->
<b:loop index='i' values='data:labels' var='label'>
<b:if cond='data:i == 0'>
<b:with value='data:i + 1' var='next'>
<b:with value='data:i - 1' var='prev'>
<b:include cond='data:prev gte 0' name='firstAndPreviousLabel'/>
<b:include name='numberedLabels'/>
<b:include cond='data:next gte 0 and data:labels.size - 1 != data:i'
name='lastAndNextLabel'/>
</b:with>
</b:with>
</b:if>
</b:loop>
</b:with>
</b:includable>
<b:includable id='style'>
<style>
#<data:widget.instanceId/> ul,
#<data:widget.instanceId/> ul li { margin: 2px; padding: 0px;
list-style: none; }
#<data:widget.instanceId/> ul li { display:
inline-block; border: 1px solid #baf;}
#<data:widget.instanceId/>
ul li a { display: inline-block; padding: 5px 12px; }
#<data:widget.instanceId/>
ul li.selected { font-weight: bold; color: red; background-color:#ffd;
padding:5px 12px; border:1px solid #ea8010;}
</style>
</b:includable>
</b:widget>
每個人的版型和要置放的地方不同，所以 CSS 可能需要自行修改一下。
協助架設 Blogger / 網站 服務
舊 
張貼留言