✍ 📁 🙈 🙉 🙊 : Blogger Label select

<h3> my Blogger 標籤</h3>
<div id="ID">
<style>
.ALLselect  {  padding:15;
                        background-color:gainsboro;
                       font-size:20px;
                       width:150px;
                       height:35px;
                       color: blue ;            
                       border:1px solid #000000;  
                       vertical-align:top; }

.ALLselect:hover {
font-style: italic; 
font-weight:bold; color:White;
background-color:gray;}

#cckDPaa {position: fixed; top:130px}
</style>

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

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

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

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

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(/</,"<");
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('var') > -1 && okok == 0){
var x = document.getElementById("ALLstring");
var option = document.createElement("option");
var value = document.createElement("value");
option.text = ALLlabel[i].replace(/var/,"");
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>

</div>

<h3>Blogger 標籤 改為 下拉選單 <<?>select><br>
讓文章更好檢索</h3>
<pre> 第一步 : 打開 Blogger 後台【範本】選擇【編輯HTML】,
          按下【ctrl】鍵 +【 F 】 搜尋關鍵字 標籤,
          修改 Blogger HTML 內標籤。
 第二步 : 打開 Blogger 後台 ,新增小工具,用 [HTML/JavaScript],
         新增 HTML 下拉式選單標籤顯示在你的網誌內。</pre>

<table border="1" style="width:100%">
<tbody><tr>
<td class="Td">Blogger的標籤</td>
<td class="Td">改成下拉選單標籤</td>
</tr><td>
<ul>
<li>管理員 本網誌 CSS
<li>管理員 免費程式
<li>管理員 網站管理員
<li>管理員 閱讀更多
<li>管理員 繁簡體轉換
<li>標簽 <<?>button> 按鈕
<li>標簽 <<?>div> 捲軸
<li>標簽 <<?>div> 對齊
<li>標簽 <<?>input>
<li>標簽 <<?>input> radio
<li>CSS Color code
<li>CSS content 插入內容
<li>CSS cursor 滑鼠游標
<li>CSS display flex flex-wrap
<li>CSS display 顯示類型
<li>CSS display flex
</td><td>
<select>
<option style="display:none;">管理員
<option>本網誌 CSS</option>本網誌 CSS
<option>免費程式</option>
<option>網站管理員</option>
<option>閱讀更多</option>
<option>繁簡體轉換</option>
</select>
<br>
<select>
<option style="display:none;">HTML
<option><<?>button> 按鈕
<option><<?>div> 捲軸
<option><<?>div> 對齊
<option><<?>input>
<option><<?>input> radio
</select>
<br>
<select>
<option style="display:none;">CSS
<option>Color code
<option>content 插入內容
<option>cursor 滑鼠游標
<option>display flex flex-wrap
<option>display 顯示類型
<option>display flex
</select>
</td></tr></tbody></table>

pre ,div ,ol { font-size: 20px ;}
 h3 { text-align: center;
     font-size: 30px;
     font-weight: bold;
     text-shadow: 10px 6px 10px grey;
     color: blue; }
</style>

<div style="border: 1px solid black; padding: 10px;">
第二步 : <br>
在後台 新增小工具 -><span class="njANJ"><br>
  <span class="ocsWod">HTML/JavaScript</span>
  <span class="Owr4ze">新增第三方功能或其他代碼到您的網誌 ,</span><br>
  <span class="Owr4ze">加入下列 HTML</span><br>
  </span><br>  
  
<pre><<?>style>
 .ALLselect  {  padding:15;
                background-color:gainsboro;
                font-size:20px;
                width:150px;
                height:35px;
                color: blue ;            
                border:1px solid #000000;  
                vertical-align:top; }

.ALLselect:hover { font-style: italic; 
                   font-weight:bold; 
                   color:White;
                   background-color:gray;}

#cckDPaa { position: fixed; top:130px}
<<?>style>

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

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

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

<<?>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("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;}
<<?>/script>
</pre>

Edit

#ccs #HTML #Blogger Label select #Blogger Label

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單