Embed Javascript in Blogger

在Blogger 裡面加入JavaScript 的想法
找了很多的方法，終於完成了

這邊主要分成兩個部分
1.將JavaScript找一個網路空間放置
2.將 JavaScript(html) 嵌入 Blogger

第一個部分花了點時間去尋找
主因是因為不想要花錢.....

後來找到Dropbox 跟Site44的結合
就可以顯示靜態網頁(也可以放入JavaScript)

教學網址:
Site44：讓你在 Dropbox 免費雲端空間上架設網頁

設定完成之後，在Dropbox裡面就初出現以下的路徑
這邊就可以放想放的網頁了

第二個部分比較簡單
只要使用 iframe 的標籤就可以將其他的網頁嵌到Blogger裡面了

frameborder -> 邊框
height -> 高度
width -> 寬度
src -> URL 來源

<iframe frameborder="0" height="380" src="//mrj.site44.com/LeafLet/leaflet.htm" width="570"></iframe>

將上面區塊程式碼的內容貼到Blogger的HTML模式中

在Blogger分享程式碼區塊(code block)

在上一篇的文章之中有貼上一些程式碼
但是只能貼上圖片....看起來很奇怪也不方便使用
同時也看到別人網誌上的程式碼都可以放得很漂亮
所以就來研究一下怎麼在Blogger 上加入程式碼區塊(code block)

首先登入Blogger
到管理者的頁面

範本 --> 自訂

選擇進階 -->新增 CSS --> 在右邊空白處填入下列的程式碼   --> 套用置網誌

CODE {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 8pt;
overflow:auto;
background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:200px;
line-height: 1.2em;
}

這樣算是設定完成了

在寫文章的過程中，遇到要插入程式碼區段的時候
要切換到 HTML 模式
再加入之前要用 HTML Eecode
將特殊字元轉換成HTML的格式
在程式碼的前後加上<code>程式碼</code>標籤

CODE { display: block; /* fixes a strange ie margin bug */ font-family: Courier New; font-size: 8pt; overflow:auto; background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y; border: 1px solid #ccc; padding: 10px 10px 10px 21px; max-height:200px; line-height: 1.2em; }
就會出現文字區塊了
但是好像不能排版換行
找了一些文章之後發現....
有個簡單的方式就可以做到程式碼區塊了......(寫到一半才發現)

其實是可以不用作上面圖片中去修改 CSS
只要連到這個網站  http://formatmysourcecode.blogspot.com/
將你的程式碼貼上去，他就會轉出HTML的語法
以及呈現的效果

 接著將轉出來的內容直接貼到 Blogger 的 HTML模式底下就可以了

切回去選寫模式就會長這樣

第二個方法真的是相當的方便
為了留下學習的紀錄還是將第一個方法(修改 CSS)記錄下來

CODE {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 8pt;
overflow:auto;
background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:200px;
line-height: 1.2em;
}