Giới Thiệu

Thông Tin

- Như các bạn đã biết, hiện fm vừa mới cập nhật chatbox8. Lần cập nhật này gây ra rất nhiều lỗi. Hầu hết các chatbox tự làm đều không dùng được nữa.

- Ngay cả chatbox8 của fm cũng rất khó dùng. Do đó mình làm một chatbox mới sử dụng các dữ liệu của fm để lưu vào host.

- Tạm thời anh em nào cần gấp hoặc thích thì cài đặt và dùng. Cái này không ép. Do đó đừng vào ném đá lung tung là được.

Demo online: http://viethoagame.forumvi.com/

Tính Năng

1. Sử dụng dữ liệu của fm để lưu dữ liệu trực tiếp vào host. Gọn nhẹ dễ cài đặt dễ sử dụng.
2. Giao diện chatbox vô cùng đơn giản hình thức giống vbb. Xem tin từ trên xuống dưới.
3. Không cần đăng nhập. Cập nhật nhanh.
4. Hỗ trợ bbcode, chèn link, chèn ảnh, chèn video youtube và xem trực tiếp trên chatbox có ảnh minh họa video.
5. Hỗ trợ ảnh smile dễ thương, có thể thêm ảnh vào.
6. Có buzz và âm thanh khi có tin nhắn mới.
7. Chatbox nhúng trực tiếp vào skin không cần sử dụng iframe. Và được thiết kế hỗ trợ tốt cho mobile. Và các dòng điện thoại dòng java.
8. Khách có thể xem được nội dung chat, nhưng không thể chat được.

Hướng Dẫn

Copy đoạn code này vào index_body. Đặt ở đâu tùy ý. Nhưng tốt nhất là đặt ở trước {CHATBOX_TOP}.

Code:

<div id="Chatboxvhg">
   <form id="Cboxvhg" name="Cboxvhg" method="post">
      <input name="text" placeholder="Nhập nội dung chat vào đây" type="text" id="text" size="35"/>
      <input type="submit" name="do" id="do" value="Gửi Đi" />
      <input id="divsmilies" type="button" value="Hình Vui"/>
      <input value="BUZZ" type="button" id="chatbox-option-buzz" />
      <input value="Chèn Link" type="button" id="chen_link" />
       <div id="smiley_FB_frame">
            <div class="hinhsmile 0"></div><div class="hinhsmile 1"></div><div class="hinhsmile 2"></div><div class="hinhsmile 3"></div><div class="hinhsmile 4"></div>
            <div class="buttonsmile">Trang:
                <input class="active" type="button" value="0" /><input type="button" value="1" /><input type="button" value="2" /><input type="button" value="3" /><input type="button" value="4" />
            </div>
        </div>
      <div id="linkdechen">
         <p>
                <input type="text" class="inputText" id="link_chen" placeholder="Chèn Link Vào Đây" /><br />
                <input value="Chèn Link" class="nutchenlink" type="button" />
                <input value="Chèn Youtube" class="nutchenvideo" type="button" />
                <input value="Chèn Ảnh" class="nutchenanh" type="button" />
         </p>
      </div>
      <audio id="chatbox-buzz-audio"><source src="http://chatfm.fall.vn/buzz.ogg" type="audio/ogg" /><source src="http://chatfm.fall.vn/buzz.mp3" type="audio/mpeg" /></audio>
      <audio id="chatNotifSound"><source src="http://chatfm.fall.vn/newmess.mp3" type="audio/mpeg" /><source src="http://chatfm.fall.vn/newmess.ogg" type="audio/mpeg" /></audio>
   </form>
   <div id="result">
      <div class="thanhload">
         <span class="loadtext">Xin vui lòng chờ chút nhé</span>
      </div>
   </div>
   <script type="text/javascript" src="http://chatfm.fall.vn/cbvhg.js"></script>
</div>

Rồi chèn tiếp đoạn css này vào forum là được.

Code:

/* CBVHG */
#result img,#result iframe{max-width:100%}
#result .pad5 {padding: 5px;background: #E7E5E5;color: red;font-weight: bold;}
.autorf:hover {background: black;}
.autorf {display: inline-block;background: rgb(16, 107, 195);color: white;padding: 5px;width: 100%;text-align: center;font-size: 16px;cursor: pointer;}
.blockchat {padding:10px;display: block;line-height: 25px;}
.msg a[href*="embed/"]:before {content: "Bấm vào hình để xem video";position: relative;color: white;background: black;width: 240px;text-align: center;font-size: 14px;padding: 5px 0;margin-right: -240px;display: inline-block;}
.msg a[href*="embed/"] img {width: 240px;}
#smiley_FB_frame img {cursor: pointer;}
#Chatboxvhg:hover #result{overflow-y:scroll}
#result{max-width:100%;padding:5px;height:300px;overflow:hidden;background:white}
#result p{background:none}
#Cboxvhg{padding:5px;border-bottom:1px solid #ccc;text-align:center}
#text{padding:10px;display:inline-block;width:90%}
#do{padding:10px!important;margin-left:0;margin-top:10px;display:inline-block}
#divsmilies,#chatbox-option-buzz,#chen_link,#linkdechen input[type="button"],#do{padding:10px!important;border:0;background:rgb(16,107,195);display:inline-block;margin:10px 20px 5px 0px;color:white!important}
.buttonsmile input:hover,.buttonsmile .active,#divsmilies:hover,#chatbox-option-buzz:hover,#chen_link:hover,#upload_file:hover,#do:hover,div#linkdechen input[type="button"]:hover{background:black!important}
#smiley_FB_frame img{padding:5px}
#smiley_FB_frame{display:none;background:white;border:1px solid #ccc;text-align:center;margin-top:5px}
.buttonsmile input{margin:5px;background:rgb(16,107,195);color:white!important;border:0;padding:5px 8px 5px 8px!important}
.buttonsmile{border-top:1px solid #ccc;padding:5px}
#linkdechen{display:none;background:white;max-width:100%;border:1px solid #ccc;text-align:center;margin-top:5px;padding:5px}
#link_chen{display:inline-block;width:82%;padding:10px}
#link_chen,input#text{cursor:auto}
.thanhload{position:relative;top:40%;text-align:center;line-height:30px}
.loadtext{text-align:center;width:100%;display:block}
/* animate */
.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}
@-webkit-keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0)}
10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0); transform:translate3d(-10px,0,0)}
20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0); transform:translate3d(10px,0,0)}}
@keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0)}
10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0); transform:translate3d(-10px,0,0)}
20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0); transform:translate3d(10px,0,0)}}
.shake{-webkit-animation-name:shake;animation-name:shake}
/* jQuery Plugin boxes v0.3 by zzbaivong http://devs.forumvi.com/ */
.zzBoxes,.zzBoxes *{-moz-box-sizing:content-box;box-sizing:content-box;margin:0;padding:0}
.zzBoxes_overlay{position:fixed;width:100%;height:100%;left:0;top:0;background:none no-repeat center center #111;opacity:0.8}
.zzBoxes_inner{background-color:#FFF;color:#444;width:auto;border:3px solid #333;position:fixed;top:50%;left:50%;margin-left:-150px;margin-top:-100px;-webkit-transition:margin .3s;transition:margin .3s}
.zzBoxes.alert .zzBoxes_inner{border-color:#0D58CA}
.zzBoxes.alert .zzBoxes_title{color:#0D58CA}
.zzBoxes.confirm .zzBoxes_inner{border-color:#1B7C44}
.zzBoxes.confirm .zzBoxes_title{color:#1B7C44}
.zzBoxes.prompt .zzBoxes_inner{border-color:#BF7C17}
.zzBoxes.prompt .zzBoxes_title{color:#BF7C17}
.zzBoxes_title{font-size:1.4em;line-height:1.5em}
.zzBoxes_content{margin:0;padding:20px 15px}
.zzBoxes_mess{text-align: center;white-space:pre-line}
.zzBoxes_content img{max-width:100%}
.zzBoxes_input{width:100%;border:1px solid #DDD;-webkit-transition:all .3s;transition:all .3s;-moz-box-sizing:border-box;box-sizing:border-box;margin:10px 0 0;padding:7px}
.zzBoxes_input:focus{box-shadow:0 0 3px 1px #DF9711;outline:0 none;border-color:#DF9711}
.zzBoxes_button{text-align:right;background:#F4F4F4;position:absolute;left:0;bottom:0;right:0}
.zzBoxes_button > div{display:inline-block;min-width:70px;background-color:#1C6DD0;color:#FFF;text-align:center;-webkit-transition:background .3s;transition:background .3s;margin:10px 0 10px 10px;padding:5px 14px}
.zzBoxes_button > div:first-child{margin-left:0}
div.zzBoxes_cancel{background-color:#FF4F4F}
.zzBoxes_close{position:absolute;width:40px;height:40px;right:2px;top:2px;text-indent:-9999px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJZJREFUeNpi/P//PwMpgAlKywHxMSD2wKImCogPA7EEmAeyAYhP/oeAb0DsARUD4XAg/gOV2wV2DVTCA6oYWVMIkuLPQGyDrAGbJgzF6BrQNWEoBmEmNA/yADEbEp8ZKoYAODwIMvknlP0TOSBgiqOwuNkDTZM3soZjONzsjaRpC7IGCSDei+5BJE0gxUIgPiOpSQMgwAB/QVTYXhJ/ggAAAABJRU5ErkJggg==) no-repeat center center #FF4F4F;opacity:0;-webkit-transition:all .3s;transition:all .3s}
.zzBoxes_inner:hover .zzBoxes_close{opacity:1}
.zzBoxes_button > div:hover,.zzBoxes_close:hover{background-color:#333;cursor:pointer}

Xóa chatbox

- Hiện tại chỉ có admin mới có quyền xóa chatbox. Và lệnh xóa sẽ là /cls.
- Các bạn lưu ý dùm mình phần này.

Vậy là xong. Phần cài đặt hệ thống sẽ tự động phân tích. Bạn khỏi cần lo về vấn đề này. Mọi ý kiến và báo lỗi xin vui lòng liên hệ tại topic này. Mình sẽ hỗ trợ ngay khi có thể.

P/s: Chatbox này sử dụng host free, nhưng được cái host này không giới hạn băng thông và dung lượng nên có thể dùng thoải mái.

Nhưng cũng có thể die bất cứ lúc nào. Nhưng yên tâm đi, đợi tới nó die thì chắc chatbox của fm cũng đã hoàn thiện rồi. Khi đó tự khắc có những chatbox mới pro hơn nữa hehe.