[Đóng góp] Chatbox VHG 2.0

  Bài viết hay nhất1

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: [You must be registered and logged in to see this link.]


[You must be registered and logged in to see this image.]



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.
  Bài viết hay nhất2
Test cái đã. vote+
  Bài viết hay nhất3
[You must be registered and logged in to see this link.]
Trong js, đoạn cuối bị lỗi nội dung kìa......
  Bài viết hay nhất4
[You must be registered and logged in to see this link.]
nghiahungdn2000 wrote:[You must be registered and logged in to see this link.]
Trong js, đoạn cuối bị lỗi nội dung kìa......

Đoạn nào mới được. Thấy ổn mà có bị gì đâu.
  Bài viết hay nhất5
Không thể dùng khi tạo trang HTML mới?
  Bài viết hay nhất6
Chatbox sử dụng các biến _userdata sẵn có của fm để tạo dữ liệu người dùng vì thế chatbox phải dc nhúng trực tiếp vào skin. Hoặc phải để chatbox ở trang html và giữ lại overall_header của forum để lấy dữ liệu.

Nếu bạn muốn dùng 1 trang html riêng biệt thì phải dùng js để lấy dữ liệu người dùng. Khiến chatbox cập nhật chậm hơn một chút.
  Bài viết hay nhất7
mình thấy chat box này nó ko hiện màu nhóm và icon của thành viên, bạn có cách nào cho hiện ra được k
  Bài viết hay nhất8
Cái js xem video kìa, hóng hóng
  Bài viết hay nhất9
Sao mình đăng video click vào không xem được nhỉ
Demo: [You must be registered and logged in to see this link.]
nick test: VnGame
pass: vngame123
Xem giúp mình nhé, thanks
  Bài viết hay nhất10
[You must be registered and logged in to see this link.]
anhdausai wrote:Sao mình đăng video click vào không xem được nhỉ
Demo: [You must be registered and logged in to see this link.]
nick test: VnGame
pass: vngame123
Xem giúp mình nhé, thanks

Xin lỗi nha, mình quên mất vụ này. Cái này mình dùng plugin popup của baivong. Cho nên quên add vào. Giờ bạn muốn xài thì cập nhật lại css ở trên hoặc chèn thêm css này vào.

Code:
/* 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}

[You must be registered and logged in to see this link.]
anhsairoi wrote:mình thấy chat box này nó ko hiện màu nhóm và icon của thành viên, bạn có cách nào cho hiện ra được k
Làm thì cũng được. Nhưng mình không thích làm phần này vì mỗi forum mỗi khác.
Bạn có thể dùng css như sau. Mỗi thành viên đều có một link riêng phân biệt là /u1, /u2 .vv..vv

Nếu bạn muốn thêm màu admin thì dùng css này:

Code:
a[href="/u1"]{color:red}

Làm vậy tương tự cho các thành viên khác bạn muốn thêm màu và hiệu ứng.
  Bài viết hay nhất11
không sài đc bạn à mình add vào nick admin ở chat box k hiện :D
  Bài viết hay nhất12
[You must be registered and logged in to see this link.]
anhsairoi wrote:không sài đc bạn à mình add vào nick admin ở chat box k hiện :D
Mình dùng code này được
Code:
#result a[href^="/u1"]{color:red}
  Bài viết hay nhất13
[You must be registered and logged in to see this link.]
anhdausai wrote:[You must be registered and logged in to see this link.]
anhsairoi wrote:không sài đc bạn à mình add vào nick admin ở chat box k hiện :D
Mình dùng code này được
Code:
#result a[href^="/u1"]{color:red}

Bỏ dấu ^ đi. Lúc nãy mình quên. Thêm dấu ^ vậy mấy id nick /u100 cũng sẽ màu đỏ đó.
  Bài viết hay nhất14
<div align="center" class="pad5">Bạn cần phải đăng nhập mới chat được.
Lỗi nè [You must be registered and logged in to see this link.]
  Bài viết hay nhất15
[You must be registered and logged in to see this link.]
nghiahungdn2000 wrote:<div align="center" class="pad5">Bạn cần phải đăng nhập mới chat được.
Lỗi nè [You must be registered and logged in to see this link.]

Dạng mã hiển thị ansi đó mà. Khi truy xuất vào fm sẽ hiển thị tiếng việt thôi. Chả có vấn đề gì
  Bài viết hay nhất16
còn nếu member có icon trước nick thì làm s add đc chỉ mình với
  Bài viết hay nhất17
[You must be registered and logged in to see this link.]
anhsairoi wrote:còn nếu member có icon trước nick thì làm s add đc chỉ mình với
Code:
#result a[href="/u1"]:before {content: url(http://i24.servimg.com/u/f24/13/54/69/46/admin11.gif);}
  Bài viết hay nhất18
tks bạn đã chế ra chatbox nì, :* rất tiện ạ
  Bài viết hay nhất19
Bạn của Lan Vy có 1 forum, cài chat box này dùng rất tốt, nhưng hình ảnh avatar trong chat box bị bể nên hơi xí 1 chút. Bạn nào vui lòng giúp bạn của Vy sửa lỗi này với. Thank các tình iu nhiều lắm!
[You must be registered and logged in to see this image.]
Forum của người đó là: [You must be registered and logged in to see this link.]
  Bài viết hay nhất20
[You must be registered and logged in to see this link.]
lanvy wrote:Bạn của Lan Vy có 1 forum, cài chat box này dùng rất tốt, nhưng hình ảnh avatar trong chat box bị bể nên hơi xí 1 chút. Bạn nào vui lòng giúp bạn của Vy sửa lỗi này với. Thank các tình iu nhiều lắm!
[You must be registered and logged in to see this image.]
Forum của người đó là: [You must be registered and logged in to see this link.]

Để lại acc test nhé.
  Bài viết hay nhất21
ID: bé bi
Pass: bebi123
Giúp dùm bạn ấy nhen! Cảm ơn markai30 iu nhiều
[You must be registered and logged in to see this image.]
  Bài viết hay nhất22
[You must be registered and logged in to see this link.]
lanvy wrote:ID: bé bi
Pass: bebi123
Giúp dùm bạn ấy nhen! Cảm ơn markai30 iu nhiều
[You must be registered and logged in to see this image.]

Lỗi tấm ảnh mặc định của mỗi thành viên rồi.

Bạn vào ACP - > Display -> Avatars -> Avatars management

Đổi lại link ảnh mặc định. Và up một tấp ảnh mặc định lên cho khách.

Sẵn mod hoặc huynh vong đóng dùm topic này đi. TUT cũ rồi. Không dùng được nữa.
  Bài viết hay nhất23
You cannot reply to topics in this forum