有時候朋友逛到自己家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 發表在 痞客邦 PIXNET 留言(29) 人氣()


留言列表 (29)

發表留言
  • kellen688
  • 剛剛改了顏色。感謝分享,說明的很仔細。
  • 你慘了,我正在煩惱連鎖文,就是你啦!第八個人!

    不客氣,呵呵~^_^

    Hana 於 2008/02/02 01:49 回覆

  • 8 8
  • 123

    ^^
  • ^_^

    Hana 於 2008/06/12 19:10 回覆

  • frank6008
  • 迷你留言版

    您好:
    想請問一下 迷你留言版

    我已經把留言版 弄出來ㄌ
    但很難留言ㄟ(框框ㄉ部分 ) 是什麼問題 阿 (新手)
    網誌
    http://www.wretch.cc/blog/frank60308
  • 嗨~

    我去過你家了,我猜是那樣的問題,你把留言板的code檢查一下,或乾脆重新去官網copy再貼回來。

    p.s.留言板上方有一個橫條,那個是圖片嗎?還沒檢查出bug,最好簡單點,那個box裏別加其它的code會比較好debug,等正常了你再加回去,試試吧!^_^

    Hana 於 2008/07/02 06:15 回覆

  • frank60308
  • 簡易迷你留言版

    你好 : 我流言到你ㄉ流言版ㄌ

    我晚上才會開 有事情 流到我ㄉ流言版ㄌ 謝謝你喔

    我ㄉ流言版
    http://www.wretch.cc/guestbook/frank60308
  • 嗨~我回覆給你了!

    Hana 於 2008/07/02 15:05 回覆

  • frank6008
  • 迷你留言板

    謝謝你喔 我已經弄好ㄌ 前面多加</a> 留言ㄉ框框 有出現游標ㄌ
    謝謝你們喔 謝謝 喔
    真ㄉ打擾ㄌ
    3Q~~
  • 不會,我覺得我也沒做什麼,是你自己聰明找到小bug,有時候code太長難免會少一個多一個,我也常這樣,哈哈!

    祝你暑假愉快唷!^_^

    Hana 於 2008/07/03 02:16 回覆

  • Elvis
  • 很棒的教學...
    CBOX還真的蠻不錯用的
  • 謝謝~:)

    Hana 於 2008/10/09 07:59 回覆

  • 中等女子
  • 這迷你留言板不錯耶
    很詳細的教學
    Grace改天也來試試
    謝謝分享....
  • 不會,妳教我這麼多PS的技巧,這只是小套件而已,Grace喜歡就好~^^

    Hana 於 2008/10/09 08:01 回覆

  • tiffwu
  • 這留言版我去別人家常看到,不過都沒這麼漂亮只是簡單型的,想當初痞客在修理時真的很需要這個東西呢。再來想想要不要裝
  • 如果是妳想裝,我可以幫妳弄好程式碼給妳直接帶回去用,妳就挑個幾張喜歡的風景照片丟我MSN,長寬妳想好,我就能做好了給妳~

    好朋友嘛~妳要,我一定會幫妳弄得漂漂亮亮的!Trust me!:)

    Hana 於 2008/10/09 08:05 回覆

  • 悄悄話
  • 悄悄話
  • 小咪
  • CBox可以
    小咪家用的那個
    就不行改了吧??~
  • 對耶!小咪家的留言版應該是不行,我好像還是第一次看到這個牌子的,呵~

    Hana 於 2008/10/16 11:21 回覆

  • 悄悄話
  • dearkay
  • 謝謝你的分享喔^^我才剛剛裝好!感謝你><
  • 不客氣:)

    Hana 於 2012/07/14 22:30 回覆

  • dean
  • hi

    hi~你好~我弄了这个之后,留言时,他说locked着了,我要怎样弄了???
  • Sorry~這個套件我很久沒用了。

    改天再來測試看看^^"

    Hana 於 2012/07/14 22:44 回覆

  • rartake268
  • 請問我的CBOX 怎麼會變成這樣??
    http://www.wretch.cc/blog/cici1346

    我想要你那個留言版一號

    可以給我語法嗎 = ]
    拜託了 =目
  • 不好意思,太晚回覆了~很高興妳的問題解決了:)

    Hana 於 2012/07/14 22:32 回覆

  • 洨糖
  • 謝謝分享喔 =目

    我會用了

    我的問題都解決了
    3Q ︿︿
  • 花蓮民宿
  • CBOX還不錯用~~即時聊天室
  • 謝謝:)

    Hana 於 2012/07/14 22:34 回覆

  • jcfjcf1218
  • 哇!!好厲害唷!!

    哈哈!!看到您詳細解說!!學到好多唷!!感謝大大教學哩!!
  • 謝謝:)

    Hana 於 2012/07/14 22:38 回覆

  • angelqi
  • 我在關鍵的>>貼上自己的程式碼 <<那里停著了……

    我是電腦白癡,不明白要去哪里找程式碼來貼…T.T
  • Sorry~我回覆晚了。

    因為妳沒有文章,所以回覆到妳的留言板囉:)

    Hana 於 2012/07/14 22:40 回覆

  • myee
  • thx ~ post了一个在自己空间
  • 謝謝:)

    Hana 於 2012/07/14 22:41 回覆

  • 寒寒
  • HALO^^

    这个...要钱的么?
  • Hi~這個不用收費唷!

    Hana 於 2012/07/14 22:42 回覆

  • jingnee520
  • 请问复制程式码贴回后台....后台在哪里??????
  • Hi~我回e-mail給妳囉:)

    Hana 於 2012/07/14 22:36 回覆

  • wewe2800
  • 想要 留言板一號呢~ 但 怎麼都複製 不了丫 ?
  • Hi~因為妳blog沒文章,所以我回覆在妳的留言板囉:)

    Hana 於 2012/07/14 22:20 回覆

  • 苹果
  • 是呀 怎么复制不了程式码....难道要自己打吗~.~
  • Hi~我將一號程式碼回覆在妳文章中唷:)

    Hana 於 2012/07/14 22:19 回覆

  • 米雪儿
  • 请问一号程序吗怎么复制呢 ?谢谢
  • Hi~我回覆在妳的文章留言中囉:)

    Hana 於 2012/07/14 22:16 回覆

  • 123
  • Good
  • Jim Yuan
  • 貼在後台的哪裡?
  • shyi
  • 大大愛死妳了!!xd