網頁研習室
【HTML】教學網站
網頁研習室【電子報】教學網站
設定步驟：
首先，下載所需檔案 previewbubble.zip。
解壓後可獲得 install.txt (安裝說明)、previewbubble.js (JS程式碼) 及 bg.png (快照圖框) 三個檔案。
你也可以使用文字編輯軟體開啟 previewbubble.js，自己編輯圖檔存放目錄。
找到這壹段即可 var bubbleImagePath = '/images/bg.png';
然後將 <script type="text/javascript" src="previewbubble.js"></script> 安插在 <head> 與 </head>之間。
接下來，在你想要預覽的連結加上 class="previewlink" 即可。
注意事項：
01.使用這個自製網站連結預覽縮圖功能好處，你可隨心想設幾個都行，不需逐一去註冊與申請。
02.如果你是第一次使用本功能，因需要重新抓取網頁快照，所以出現的顯示畫面會比較慢些。
03.如果你想以新視窗開起網頁，請自行於連結標籤處加入 target="_blank" 或 target="_new"。
04.不是所有部落格都可以使用這個功能，你要自己測試看看。
發現問題：
01.原有程式顯示位置有點偏左不太正確，你必需調整 previewbubble.js JS 程式碼位置 Go 。
02.如果欲顯示的位置剛好位於最右側或最下方，會造成超出螢幕頁面問題 Go 。
原始碼查看