在 Blogger Blog 頁面建立一動態式網站小視窗

---

提 示 :
1. 本功能效果樣式 : 
1.1 請參考 D01小站 及 一元數位雜記 網站的應用效果樣式
1.2 此網站小視窗，包容你的 Blogger Blog 網站的內容，且可以在此小視窗內操作所有 Blogger Blog 網站的功能內容
1.3 示意圖

A. 建立本功能的方法 :

Step 1. 登入您的 Blogger Blog ;

Step 2. 在 Blogger Blog 後控制台，點選「版面配置」 > +新增小工具 > 點選(新增)「HTML/Javascript」(小工具)

Step 3. 在「HTML/Javascript」(小工具)的「標題」框格內輸入你意向的文字(例如: 網頁小視窗) ;

Step 4. 在「HTML/Javascript」(小工具)的「內容」框格內貼入如下的程式碼

<iframe src="在此填入你的 Blogger Blog 網站的網址" style="border:1px #666 solid;" name="OOiFrame" scrolling="yes" frameborder="1" marginheight="5px" marginwidth="1px" height="300px" width="300px" allowfullscreen></iframe>

Step 5. 點按「HTML/Javascript」(小工具)的「儲存」文字按鈕;

Step 6. 完成。

B. 應用說明 :

您可以自行編定所增加的網頁小視窗的外觀效果。

a. 將此「網頁小視窗」(小工具)版塊利用電腦滑鼠拖拉定位到你意向的網站版面位置 (適合安置在網頁的側邊欄位)。

b. 修改程式碼內容，獲取理想的效果 :

1. 程式碼 : border:1px #666 solid
此代碼為定義小視窗邊框線條的粗細和顏色 > 1px --> 更改此 1 數字為較大數(例如:2, 3, 4)，則網頁小視窗的邊框線條將愈粗 ; 數字 666 淡黑色 > 可將其更改為你意向的顏色(代碼)，例如 ff0000 為紅色。

2. 程式碼 : name="OOiFrame"
OOiFrame : 為此小視窗定義的標題名稱 > 可將其更改為你意向的小視窗標題名稱。

3. 程式碼 : scrolling="yes"
yes : 此代碼為定義小視窗畫面可以被上下滑動 > 如果你希望網頁小視窗為固定式(無法被上下滑動)，則將此 yes 更改為 no 。

4. 程式碼 : frameborder="1"
1 : 此代碼為定義小視窗會有邊框線效果 > 如果你希望網頁小視窗不要有邊框線，則將此 1 更改為 0 。

5. 程式碼 : height="300px"
此代碼為定義小視窗畫面高度的大小 > 更改此 300 數字(大小數)，可改變網頁小視窗的高度。

6. 程式碼 : width="300px"
此代碼為定義小視窗畫面寬度的大小 > 更改此 300 數字(大小數)，可改變網頁小視窗的寬度。
設定此小視窗畫面寬度值，你將需要檢視你的 Blogger Blog 網頁面以電腦及手機瀏覽的效果。


以上 / The End.

---