下拉式連結選單和標籤設置

如果你覺得連結太多有些佔版面。
就可以使用這種下拉式選單減少版面空間喔。
用法很簡單。

語法在此(開新視窗選單)
<select onchange="window.open(this.options[this.selectedIndex].value)">
<option value="">請填入方塊名字</option>
<option value="">===填入分類===</option>
<option value="連結網址">網站名稱</option>
<option value="">===範例===</option>
<option value="http://catherine98.blogspot.com/">The brilliance of night</option>
</select>
原視窗開啟
<select onchange="location.href=this.options[this.selectedIndex].value;">
<option value="">請填入方塊名字</option>
<option value="">===填入分類===</option>
<option value="連結網址">網站名稱</option>
<option value="">===範例===</option>
<option value="http://catherine98.blogspot.com/">The brilliance of night</option>
</select>


範例
好友們的網誌(開新視窗)

常用連結(原視窗開啟)

用這種方式就可以減少網頁或部落格的長度囉!
不然長長一串的不只會拖久瀏覽器開啟的速度,也會影響網站的美觀性呢。

當然,在BLOGGER中也可以對其小工具作一些小修改!

像是BLOGGER中預設的標籤工具,也可以選擇將它變成下拉式選單。

當將標籤小工具加入版面設置後,到修改HTML中,打開"展開小裝置範本",這時候搜尋(CTRL+F)一下HTML。

會看到多了一個這樣的裝置:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>


<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


將藍色的部分刪除掉,並用下拉式連結選單的語法蓋掉,就可以將標籤選單改成下拉式選單囉。


<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<select onchange='location=this.options [this.selectedIndex].value;'>
<option>下拉式選單的標題名稱</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'>
<data:label.name/> (<data:label.count/>)
</option>
</b:loop>
</select>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


不過BLOGGER部落格還是有個缺點。

那就是如果使用標籤觀看文章,會發現所有使用此標籤的文章會在一頁中全部顯示出來,開啟網頁的速度不僅是變慢了,有時候瀏覽器還會有一段時間沒有回應...

所以將這些標籤下的文章,改成只有顯示標題也會較為理想!


引用於日向(白花花):讓blogger在非首頁及非單篇文章的頁面只顯示文章標題

只要將<b:include data='post' name='post'/>。
改成
<b:if cond='data:blog.homepageUrl != data:blog.url'><!-- 不在首頁 -->
 <b:if cond='data:blog.pageType != "item"'><!-- 不在內頁 -->
 <!-- 只顯示文章的標題 -->
  <h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
  <b:else/>
  <b:include data='post' name='post'/>
  </b:if>
<b:else/>
 <b:include data='post' name='post'/>
</b:if>

就可以囉!



相關文章

好用網站連結

BLOGUPP

Google Friend Connect檢閱/評分小工具