html 測試 左單右單

html 測試 單入單出

html 測試 上入下出

html 測試 左入右出

2020年10月4日 星期日

Blogger Label select

標籤變成下拉式選單 HTML

第一步 :
將Blogger標籤(分類)變成下拉式選單 本網誌頂部有下拉拉式選單 例子。
先在後台 新增小工具 -> 選安裝 標籤 ,
再在後台 範本 -> 編輯HTML , 搜尋 這 標籤 以下片段:

<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>

將以上內容替換為下列紅字:
<script>
        var ALLlabel = [];
         <b:loop values='data:labels' var='label'>
              ALLx1 = &quot;<data:label.name/>&quot;;
              ALLx2 = &quot;<data:label.url/>&quot;;
              ALLlabel.push(ALLx1);
              ALLlabel.push(ALLx2);
</b:loop>
</script>
第二步 :
在後台 新增小工具 ->
HTML/JavaScript 新增第三方功能或其他代碼到您的網誌 ,
加入下列 HTML


<!  all 標籤 script  />
<style>

#ALL管理員   {width:150px;height:35px;position: fixed; top:165px;left:10px}
#ALLBlogger {width:150px;height:35px;position: fixed; top:200px;left:10px}
#ALLhtml    {width:150px;height:35px;position: fixed; top:235px;left:10px}
#ALLscript  {width:150px;height:35px;position: fixed; top:270px;left:10px}
#ALLcss     {width:150px;height:35px;position: fixed; top:305px;left:10px}
#ALLjquery  {width:150px;height:35px;position: fixed; top:340px;left:10px}
#ALLother   {width:150px;height:35px;position: fixed; top:375px;left:10px}
</style>

<div id="cckDPaa">
<select class='ALLselect' id='ALL管理員' 
onchange='location=this.options [this.selectedIndex].value;'  
onmouseover='this.focus()'>
<option style="display:none;" />管理員
</select>


<select class='ALLselect' id='ALLBlogger' 
onchange='location=this.options [this.selectedIndex].value;'  
onmouseover='this.focus()'>
<option style="display:none;" />Blogger
</select>

<select class='ALLselect' id='ALLhtml' 
onchange='location=this.options [this.selectedIndex].value;'  
onmouseover='this.focus()'>
<option style="display:none;" />HTML
</select>

<select class='ALLselect' id='ALLscript' 
onchange='location=this.options [this.selectedIndex].value;'  
onmouseover='this.focus()'>
<option style="display:none;" />Script
</select>

<select class='ALLselect' id='ALLcss' 
onchange='location=this.options [this.selectedIndex].value;' 
onblur  onmouseover='this.focus()'>
<option style="display:none;" />CSS
</select>

<select class='ALLselect' id='ALLjquery' 
onchange='location=this.options [this.selectedIndex].value;'  
onmouseover='this.focus()'>
<option style="display:none;" /> jquery
</select>

<select class='ALLselect' id='ALLother' 
onchange='location=this.options [this.selectedIndex].value;'  
onmouseover='this.focus()'>
<option style="display:none;" />other
</select>
</div>

<script type="text/javascript">
var Alllength =  ALLlabel.length;
var i;
for (i = 0 ;i < Alllength; i=i+2 ){
var okok = 0 ;

if(ALLlabel[i].indexOf('管理員') > -1 && okok == 0){
var x = document.getElementById("ALL管理員");
var option = document.createElement("option");
var value = document.createElement("value");
option.text = ALLlabel[i].replace(/管理員/,"");
option.value =ALLlabel[i+1];
x.add(option);okok=1;}

if(ALLlabel[i].indexOf('Blogger') > -1 && okok == 0){
var x = document.getElementById("ALLBlogger");
var option = document.createElement("option");
var value = document.createElement("value");
option.text = ALLlabel[i].replace(/Blogger/,"");
option.value =ALLlabel[i+1];
x.add(option);okok=1;}

if(ALLlabel[i].indexOf('標簽') > -1 && okok == 0){
var x = document.getElementById("ALLhtml");
var option = document.createElement("option");
var value = document.createElement("value");
ALLlabel[i] = ALLlabel[i].replace(/標簽/,"");
option.text =  "<" + ALLlabel[i].replace(/@/,">") ;
option.value =ALLlabel[i+1];
x.add(option);okok=1;}

if(ALLlabel[i].indexOf('script') > -1 && okok == 0){
var x = document.getElementById("ALLscript");
var option = document.createElement("option");
var value = document.createElement("value");
option.text = ALLlabel[i].replace(/script/,"");
option.value =ALLlabel[i+1];
x.add(option);okok=1;}

if(ALLlabel[i].indexOf('CSS') > -1 && okok == 0){
var x = document.getElementById("ALLcss");
var option = document.createElement("option");
var value = document.createElement("value");
option.text = ALLlabel[i].replace(/CSS/,"");
option.value =ALLlabel[i+1];
x.add(option);okok=1;}

if(ALLlabel[i].indexOf('jquery') > -1 && okok == 0){
var x = document.getElementById("ALLjquery");
var option = document.createElement("option");
var value = document.createElement("value");
option.text = ALLlabel[i].replace(/jquery/,"");
option.value =ALLlabel[i+1];
x.add(option);okok=1;}

if(okok == 0){
var x = document.getElementById("ALLother");
var option = document.createElement("option");
var value = document.createElement("value");
option.text = ALLlabel[i];
option.value =ALLlabel[i+1];
x.add(option);okok=1;}

}
</script></!>




沒有留言:

張貼留言