2007年8月13日 星期一

黑米小按鈕 加強版

利用 HEMiDEMi 官方 javascript 改良了一下, 提供一個以 DOM 操作為主的版本.歡迎官方直接引用.

加強了以下三點:
1. 解決在各 Blog 平台上部份網誌會造成畫面一片白的問題.
2. 一顆/多顆 按鈕語法統一.
3. 支援 Blogger-ext2, 在 Blogger 系統中換頁, 小按鈕依然能生效.
##CONTINUE##
解決畫面一片白:
其實這個問題同 "推推王 推文按鈕貼紙" , 加了 黑米小按鈕 貼紙後, 有時畫面會一片白. [出現空白頁]
這在 Blogger 系統最為明顯, 因為 Blogger 系統的 Sidebar, 換頁都是使用 javascript 動態 產生, 所以只要在 onload 前, 黑米小按鈕的 javascript 執行到, 而黑米小按鈕的 javascript 僅利用 document.write 產生一個 iframe.這時的 document 就僅剩下一個 iframe , 所以您會得到一片白.
請大家忘了 document.write 這個 n 年前的遺產吧.. 以 DOM 來提供小工具.

按鈕語法統一:
使用此一加強版, 不再分一個按鈕或多個按鈕, 您只要使用單一的語法即可. 而語法中也看不到 javascript , 只是一個 div 的語法, 您可以輕輕鬆鬆放入 黑米小按鈕.

使用方式:
放在網頁 <head> 位置加入 或 加入 html/javascript 網頁元素:
程式碼:

<script src='http://blogger-ext2.googlecode.com/svn/trunk/3rd/hemidemi_bookmark_button2.js' ></script>


放在按鈕位置的
程式碼:

<div class="hemi_button" style="font-size:0px;">網址</div>

如果不打就直接用貼紙所在頁面的網址.

就是這麼容易, 不管幾顆都是一樣.


如何在 Blogger 系統中使用:
1.範本 => 版面配置 => 修改 HTML => 勾選「展開小裝置範本」 => 在 </head> 前加入

<script src='http://blogger-ext2.googlecode.com/svn/trunk/3rd/hemidemi_bookmark_button2.js' ></script>

2. 找到 <p><data:post.body/><p> 在 <p><data:post.body/><p> 前加入按鈕語法

<div style='float:right; margin-left:10px; font-size:0px;' class="hemi_button"><data:post.url/></div>


如何在天空(yam) 系統中使用:
1.管理者後台 => 功能設定 => 個人資料 => 部落格描述: 中填入

<script src='http://blogger-ext2.googlecode.com/svn/trunk/3rd/hemidemi_bookmark_button2.js' ></script>

2. 在發表網址時, 在 "追加內容" 加入按鈕語法

<div style='float:right; margin-left:10px; font-size:0px;' class="hemi_button"></div>

3. sample.

詳細參數及使用說明可參考 [功能] 黑米小按鈕

PS. 推推王推文按鈕也是存在相同的問題. 請看這裡.
張貼留言