<iframe name="you1" allowfullscreen="" frameborder="0" height="300" src="//www.youtube.com/embed/So7UczPCbnE?autoplay=0;playlist=So7UczPCbnE;loop=1;rel=0" width="500"></iframe>

autoplay=1 自動播放
rel=0 結尾標題刪除/移除
playlist=So7UczPCbnE + loop=1 重複播放






無影像播放
<iframe allowfullscreen="" frameborder="0"  height="25" src="//www.youtube.com/embed/UtCLlQp5r90?autoplay=0;playlist=UtCLlQp5r90;loop=1;rel=0" width="500">

height="25" 高度 數值定為 25

| Youtube 嵌入 | iframe | Youtube 重複播放 | Youtube 自動播放 | Youtube 結尾標題刪除/移除 |

水平分線

• align left / center / right 
• noshade 
• size 
• width

<hr align="left" size="10" width="50%" />

---

<hr align="center" noshade="" size="10" width="50% " />

---

<hr align="right" size="20" style="background: green;" width="100%" />

---

| 水平分線 | hr |

<a href = "URL" target = " _new ／ _top ／ _blank ／ name">

target
_new=在一個新視窗開啟，不過只會一直在同一個新視窗開啟，不會另外在開一個新視窗
_top=在同一個視窗出現，不過是整個大視窗，而不是所分割後的視窗
_blank=跟_new差不多，只是會一直出現新的視窗，而不會在同一個新視窗開啟 =''
name=視窗名稱
而在<a href="URL">的標籤中，可插入STYLE="text-decoration:none"
來消除連結的底線

<a href = "URL" target = " _new ／ _top ／ _blank ／ name">

table border cellpadding cellpadding

rowspan cellspacing tb tr

<td><table border="2" cellpadding="30"         cellspacing="3"  bgcolor=#FF8C00>        <caption>**標題**</caption>        <tbody>        <tr>        <td bgcolor="#FF0000">AAAAA</td>        <td bgcolor="#FF0000">BBBBB</td>        </tr>        <tr>        <td bgcolor="#FF0000">CCCCC</td>        <td bgcolor="#FF0000">DDDDD</td>        </tr>        <tr>        <td bgcolor="#FF0000" colspan=2>               EEEEEEE        </td>        </tr>        </tbody>        </table>

**標題** AAAAA BBBBB CCCCC DDDDD EEEEEEE

<td><table border="4" cellpadding="3"           cellspacing="30"  bgcolor=#FF8C00 >   <caption>**標題**</caption>      <tbody>          <tr><td rowspan="2" bgcolor="#FF0000">         000</td>         <td bgcolor="#FF0000">1111111</td>         <td bgcolor="#FF0000">2222222</td>         </tr>          <tr>          <td bgcolor="#FF0000">3333333</td>          <td bgcolor="#FF0000">4444444</td>    </tr>    </tbody>    </table>

**標題** 000 111 222 333 444

| table | li | ul | 表格及邊框 | border | caption | cellpadding | rowspan |

<script language="JavaScript">
 <!--
     function choice(my_form)
     {
      var str="選擇了 "
   
      if(my_form.check1.checked)
        str +="旅遊 "
      if(my_form.check2.checked)
        str +="音樂 "
      if(my_form.check3.checked)
        str +="美術 "
      if(my_form.check4.checked)
        str +="閱讀 "
      if(my_form.check5.checked)
        str +="計算機與網路 "
      if(str=="選擇了 ")
         str="沒有選擇任何一項"
check0.document.close();
check0.document.write("<font size='3' color='Blue' VALGIN='top' >" );
check0.document.write(str);  
str = ""; }
</script>  

請選擇您的業餘愛好
<form name="check15">
    <input name="check1" type="checkbox" />1.旅遊
    <input name="check2" type="checkbox" />2.音樂
    <input name="check3" type="radio" />3.美術
    <input name="check4" type="radio" />4.閱讀
    <input name="check5" type="radio" />5.計算機與網路
    <input name="B2" type="reset" value="重新輸入" />
 </form>
<input name="B1" onclick="choice(check15)" type="submit" value="送出" />
 <iframe align="top" height="30" name="check0" scrollbars="0" scrolling="no" src="" width="500"></iframe>


請選擇您的業餘愛好

1.旅遊 2.音樂 3.美術 4.閱讀 5.計算機與網路

控動相片<input type="image" onclick="image1()" src="https://lh3.googleusercontent.com/IRvVPQPYK9BLg5ZcOubYaJ-6NcYu22kilYZwwKLySVw=w299-h207-p-no" type="image" />

<iframe align="top" height="30" name="image2" scrollbars="0" scrolling="no" src="" width="100"></iframe>

<script>
var image3= 0;
function image1() {
if(image3 != 10){
image3 = 10;
image2.document.close();
image2.document.write("<font size='5' color='Blue' VALGIN='top' >" );
image2.document.write(image3 );}
else{
image3 =0;
image2.document.close();
image2.document.write("<font size='5' color='Blue' VALGIN='top' >" );
image2.document.write(image3 );
}
}
</script>


控動相片

請按下選擇檔案<input id="Str" type="file"  onchange="file1(this.value)" />
<iframe align="top" height="30" name="file2" scrollbars="0" scrolling="no" src="" width="500"></iframe>

<script>
function file1(X) {
file2.document.close();
file2.document.write("<font size='5' color='Blue' VALGIN='top' >" );
file2.document.write(X);
}
</script>


請按下選擇檔案：

document.onkeydown document.onkeypress document.onkeyup

<iframe align="top" height="30" name="KEY_1" scrollbars="0" scrolling="no" src="" width="100"></iframe><br /> <br /> document.onkeypress <iframe align="top" height="30" name="KEY_2" scrollbars="0" scrolling="no" src="" width="100"></iframe><br /> <br /> document.onkeyup <iframe align="top" height="30" name="KEY_3" scrollbars="0" scrolling="no" src="" width="100"></iframe><br /> <br /> <script> function Fkeydown() { KEY_1.document.close(); KEY_1.document.write("<font size='3' color='Blue' VALGIN='top' >" ); KEY_1.document.write(event.keyCode); } document.onkeydown=Fkeydown; function Fkeypress() { KEY_2.document.close(); KEY_2.document.write("<font size='3' color='Blue' VALGIN='top' >" ); KEY_2.document.write(event.keyCode); } document.onkeypress=Fkeypress; function Fkeyup() { KEY_3.document.close(); KEY_3.document.write("<font size='3' color='Blue' VALGIN='top' >" ); KEY_3.document.write(event.keyCode); } document.onkeyup=Fkeyup; </script>

| CSS | HTML | document.onkeyup | document.onkeypress | document.onkeydown | VALGIN | scrolling | scrollbars | align |

setTimeout()

setTimeout('FFF( )', 3000)
例子:

Blogger 嵌入 Facebook Comments 

在 Blogger 後台 → 新增小工具 →  HTML/JavaScript
加入下方 CSS


<style type='text/css'>
body {             /*全版背景圖案*/
background-image:url("https://lh3.googleusercontent.com/-eNDfdkO5YEA/U6tz9ceyZqI/AAAAAAAABXM/lmWdVlZ3HkM/w100-h71-no/1030178739_t.jpg");
background-repeat: repeat;}

body {min-width: 100%; /*全版寬度*/}

.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: 700px; /*文章寬度最小*/
max-width: 2500px;/*文章寬度最大*/
width:100%;       /*文章寬度*/}

.main-inner .column-left-outer {
width: 300px;         /*左邊欄位寬度*/
margin-left: -300px;  /*跟左邊欄位寬度*/}

.post {                 /*文章背景*/
border-radius: 50px;    /*文章背景圓角*/
background-color: rgba(238, 238, 238, 0.3);
border:5px solid peru;  /*文章背景邊界*/}


#navbar{display:none;  /*隱藏頂部Blogger 導覽列 */ }

#blog-pager{display:block;  /*呈現 新舊 文章選擇 */}

.feed-links{display:none;  /*隱藏底部訂閱：文章(Atom)*/}

.status-msg-wrap{display:none; /*隱藏 標籤 最新文章*/}

.Attribution {display:none;  /*最底下範本版權說明*/}

h1 {font-size:8px;
    font-weight:bold;
    text-align:left;
    color:gray;}

h3 {font-size:20px;
    font-weight:bold;
    text-align:center;
    color:blue;}

h4 {font-size:20px;
    font-weight:bold;
    text-align:left;
    color:black;}
</style>

將Blogger標籤(分類)變成下拉式選單
本網誌頂部有下拉拉式選單 例子。 


此時再『開啟小裝置翻本』中勾選，之後搜尋以下片段:
<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>


將以上內容替換為:
<select onchange='location=this.options [this.selectedIndex].value;' onmouseover='this.focus()' style='cursor: pointer;width:150px; background-color:#C0C0C0; color:#000;font-size:20px;border: 3px outset #d5d5d5;'>
<option>ALL</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
<optgroup style='font-size:5px;' label=""></optgroup>
</b:loop>
</select>

document.body.appendChild(oTag)//body-主體子對象
document.body //指定文檔主體的開始和結束等價於body>/body>
document.body.bgColor //設置或獲取對象後面的背景顏色
document.body.link //未點擊過的鏈接顏色
document.body.alink //激活鏈接(焦點在此鏈接上)的顏色
document.body.vlink //已點擊過的鏈接顏色
document.body.text //文本色
document.body.innerText //設置body>…/body>之間的文本
document.body.innerHTML //設置body>…/body>之間的HTML代碼
document.body.topMargin //頁面上邊距
document.body.leftMargin //頁面左邊距
document.body.rightMargin //頁面右邊距
document.body.bottomMargin //頁面下邊距
document.body.background //背景圖片

document.body.appendChild(oTag) //動態生成一個HTML對象

常用對象事件
document.body.onclick=」func()」 //鼠標指針單擊對象是觸發
document.body.onmouseover=」func()」 //鼠標指針移到對象時觸發
document.body.onmouseout=」func()」 //鼠標指針移出對象時觸發
———————————————————————
location-位置子對象

document.location.hash // #號後的部分
document.location.host // 域名+端口號
document.location.hostname // 域名
document.location.href // 完整URL
document.location.pathname // 目錄部分
document.location.port // 端口號
document.location.protocol // 網絡協議(http:)
document.location.search // ?號後的部分

documeny.location.reload() //刷新網頁
document.location.reload(URL) //打開新的網頁
document.location.assign(URL) //打開新的網頁
document.location.replace(URL) //打開新的網頁
———————————————————————
selection-選區子對象
document.selection
———————————————————————

images集合(頁面中的圖像)

a)通過集合引用
document.images //對應頁面上的img標籤
document.images.length //對應頁面上img標籤的個數
document.images[0] //第1個img標籤
document.images[i] //第i-1個img標籤

b)通過nane屬性直接引用
img name=」oImage」
document.images.oImage //document.images.name屬性

c)引用圖片的src屬性
document.images.oImage.src //document.images.name屬性.src

d)創建一個圖像
var oImage
oImage = new Image()
document.images.oImage.src=」1.jpg」
同時在頁面上建立一個img /標籤與之對應就可以顯示

———————————————————————-

forms集合(頁面中的表單)

a)通過集合引用
document.forms //對應頁面上的form標籤
document.forms.length //對應頁面上/formform標籤的個數
document.forms[0] //第1個/formform標籤
document.forms[i] //第i-1個/formform標籤
document.forms[i].length //第i-1個/formform中的控件數
document.forms[i].elements[j] //第i-1個/formform中第j-1個控件

b)通過標籤name屬性直接引用
/formform name=」Myform」>input name=」myctrl」/>/form
document.Myform.myctrl //document.表單名.控件名

c)訪問表單的屬性
document.forms[i].name //對應form name>屬性
document.forms[i].action //對應/formform action>屬性
document.forms[i].encoding //對應/formform enctype>屬性
document.forms[i].target //對應/formform target>屬性

document.forms[i].appendChild(oTag) //動態插入一個控件
document.all.oDiv //引用圖層oDiv
document.all.oDiv.style.display=」" //圖層設置為可視
document.all.oDiv.style.display=」none」 //圖層設置為隱藏
document.getElementId(」oDiv」) //通過getElementId引用對象
document.getElementId(」oDiv」).style=」"
document.getElementId(」oDiv」).display=」none」
/*document.all表示document中所有對象的集合
只有ie支持此屬性，因此也用來判斷瀏覽器的種類*/

圖層對象的4個屬性
document.getElementById(」ID」).innerText //動態輸出文本
document.getElementById(」ID」).innerHTML //動態輸出HTML
document.getElementById(」ID」).outerText //同innerText
document.getElementById(」ID」).outerHTML //同innerHTML

overflow:控制當內容超過顯示區域時捲軸的顯示

overflow-x:x捲軸的顯示
overflow-y:y捲軸的顯示
捲軸顯示有四種狀態
visible(預設):內容完全顯示不嵌入顯示區域
auto:內容嵌入顯示區域，並視情況顯示水平與垂直捲軸
scroll:內容嵌入顯示區域，水平捲軸會出現但視情況顯示可捲動或不可捲動

hidden:內容嵌入顯示區域，捲軸不會出現 取消 捲軸

| CSS | HTML | overflow | overflow-y | overflow-x | scroll | visible | auto | auto | 捲軸的顯示 | 控制 | 捲軸的顯示 |