有時候朋友逛到自己家blog時，其實只是純粹想和格主哈啦，沒有特別針對某一篇文章作迴響，但格主又不常晃到自己的留言板，那麼，在自己的blog內安裝一個訪客專用的留言板，是很不錯的選擇唷！hana推薦大家可以安裝一個免費又很實用的留言板－－Cbox，也有人稱之簽到簿，總之這個小小套件就是便利來逛你家網誌的朋友們留言和你打聲招呼用的！除了免費、容易申請之外，最重要的是它能讓你自訂顏色符合網誌上的版面，或是自行設計底圖來讓留言板變得更活潑，這讓hana覺得很棒，它不是一個被設計成死的套件。

這個套件也許已經廣為人知了，不過hana會寫這篇文章是想留作套件使用說明書，日後如果改版時，才不會兵荒馬亂地去追朔這個套件要怎麼修改。

步驟一，我們先到Cbox網站申請帳號。


輸入註冊資訊。


步驟二，回到電子信箱中收信，再回Cbox網站使用新申請的帳／密登入。點擊『Publish!』，將程式碼反白複製回網誌後台貼上，基本型的留言板就可以使用了！


　　
如果想改變留言板的板面顏色，請繼續看下去～^_^

步驟三，點擊『Look & Feel』，再選擇『Edit style』－－自訂版面配色。
　　

在下面這張圖中，我用基本色碼（像白ffffff／黑000000／紅ff0000／藍0000ff／綠00ff00／青00ffff）來標明顏色的位置，設定完成後再按下『Apply』就可以套用完成了！而且不需要再複製一次HTML code回後台貼上去，在Cbox網站上做的設定就會反應回安裝在Blog上的留言板套件上。

若是顏色改得亂七八糟時，還能從『Look & Feel』，再選擇『Style gallery』－－選擇版面顏色（可預覽）中恢復成Cbox提供的基本版的配色，一點都不用擔心惡搞後無法恢復的問題。


接下來，hana要另外教大家如何給Cbox留言板換上漂亮的底圖！這兒我提供兩張現成設計好的底圖，歡迎套用～^_^　

兩種留言板的Dome，如下所示：

留言板一號：
（寬180X長305，適合英文介面的小板型）
留言板二號：
（寬200X長315，適合中文介面的大板型）
不論套用一號還是二號，請先回到Cbox網站，點擊『Look & Feel』，再選擇『Style gallery』－－選擇版面顏色（可預覽），選擇套用＂Transparent＂（透明版配色）。
　　
接著，再從『Look & Feel』，再選擇『Edit style』－－自訂版面配色，將輸入文字的欄位底色設成白色（FFFFFF）。


版面配色設定完後，接下來是程式碼的部份！點擊『Publish!』，將程式碼複製後貼在記事本，找到src="..."，有兩行，在" "包住的字尾寫著『sec=main』的這行是顯示留言內容的Main，寫著『sec=form』的這行是顯示輸入打字的Form。（NOTE：要分清楚唷！）

　　
留言板一號的程式碼如下：
<!-- BEGIN CBOX - www.cbox.ws --> <div align="center" id="cboxdiv" style="background:url(http://p6.p.pixnet.net/albums/userpics/6/1/633661/48eb30230bb67.jpg) no-repeat left top; width:180px; height:305px; padding-top:0px; padding-left:0px;"> <iframe frameborder="0" width="170" height="72" src="請貼上您自己的Form那一行程式碼" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style=" filter:alpha(opacity=60) ; opacity:0.5; -moz-opacity:0.5; display:block;" id="cboxform"></iframe> <iframe frameborder="0" width="170" height="220" src="請貼上您自己的Main那一行程式碼" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:0px solid #000000; filter:alpha(opacity=60) ; opacity:0.5;-moz-opacity:0.5; background:#fff;" id="cboxmain"></iframe> </div> <!-- END CBOX -->

留言板二號的程式碼如下：
<!-- BEGIN CBOX - www.cbox.ws --> <div align="center" id="cboxdiv" style="background:url(http://p6.p.pixnet.net/albums/userpics/6/1/633661/48ebbf1f825d8.jpg) no-repeat left top; width:200px; height:315px; padding-top:6px; padding-left:0px;"> <iframe frameborder="0" width="190" height="225" src="請貼上您自己的Main那一行程式碼" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:0px solid #000000; filter:alpha(opacity=60) ; opacity:0.5;-moz-opacity:0.5; background:#fff;" id="cboxmain"></iframe> <iframe frameborder="0" width="190" height="75" src="請貼上您自己的Form那一行程式碼" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style=" filter:alpha(opacity=60) ; opacity:0.5; -moz-opacity:0.5; display:block;" id="cboxform"></iframe> </div> <!-- END CBOX -->

請仔細看上面那段程式碼裏註明的紅色中文字，這就是上一步驟裏，請您將『Publish!』裏的程式碼暫時複製貼上在記事本的原因，因為我們只要『Publish!』裏那兩行Main和Form的scr="..."裏" "包住的一行程式碼而已，再將這兩行程式碼貼到留言板一號或二號的程式碼中，最後，再貼回自己網誌後台裏，就能看到有漂亮底圖的Cbox留言板了！

因為我的程式碼已經配合所設計好的底圖大小，所以請套用留言板一號的人帶走一號的程式碼，套用留言板二號的人帶走二號的程式碼，另外，使用一號小板型（適用英文介面）的人要記得將介面上顯示的文字改成English，這樣文字才不會卡版，可以到以下圖中所示去做設定！



以上設定或程式碼部份有問題，歡迎留言給我～：）但若是奇怪的問題就請不用花時間留言了，像是留下您的網誌帳／密給我，請我到您的後台幫忙設定...之類的問題=.=|||

再補充：如何將留言的文字訊息做變化，像是變大／變顏色／加粗／或是跑馬燈，可以用語法來做變化唷！
文字左右跑的跑馬燈：[scroll]內容[/scroll]
文字超連結：[url=連結網址]描述[/url]
e-mail連結：[email=信箱地址]描述[/email]
字體變粗：[b]文字[/b]
文字加底線：[u]文字[/u]
文字變斜體：[i]文字[/i]
文字變色：[color=#色碼]文字[/color]
文字變大小：[size]文字[/size]

以上[ ]...[/ ]，可以輸入在想要留言的欄位內，...就是您想留言的內容，而[ ] [/ ]則是改變文字的程式碼！記住，每一則留言，只能套用一組[ ]...[/ ]，若要有第二種作用就請送出第一則留言後再輸入到留言欄位裏！

延伸閱讀：Cbox簡易迷你留言版＠情意


文章標籤
全站熱搜
創作者介紹
創作者 Hana 的頭像
Hana

花千絮 ☆ hanaの書格子

Hana 發表在 痞客邦 留言(37) 人氣(9,959)