Diễn Đàn Hỗ Trợ FM
Bạn có muốn phản ứng với tin nhắn này? Vui lòng đăng ký diễn đàn trong một vài cú nhấp chuột hoặc đăng nhập để tiếp tục.


[Hỏi đáp] xin chatbox forum này được không ạ

Tác giả: - vào lúc:
nkoxdl
Bài viết : 68
Points : 135
Like : 19
Punbb
An toàn
Status : Đời là bể khổ!
nkoxdlMEM LV2
1/15/2017, 13:31
#1
xin chatbox forum này được không ạ
huyvip83
Bài viết : 236
Points : 384
Like : 66
Punbb
Cẩn thận
huyvip83MEM LV3
1/15/2017, 14:01
#2
Demo đâu
Mà xin ít thôi thím ơi

Spam lần nữa ra đảo . Thế hotrofm có tới mấy cái chatbox lận à ?
Lasperpen

nkoxdl
Bài viết : 68
Points : 135
Like : 19
Punbb
An toàn
Status : Đời là bể khổ!
nkoxdlMEM LV2
1/15/2017, 14:13
#3
huyvip83 đã viết:
Demo đâu
Mà xin ít thôi thím ơi


thấy lâu h có xin k h mới xin lại đc cái chatbox forum này mà kêu xin ít th à v~ thánh
dksFeed
Bài viết : 154
Points : 238
Like : 26
Punbb
Status : Rất vui khi được tham gia cùng HotroFM !
dksFeedMEM LV3
1/15/2017, 14:24
#4
nkoxdl đã viết:
xin chatbox forum này được không ạ

k em ơi [Hỏi đáp] xin chatbox forum này được không ạ Panda-emoticon-30
lasperpen
Bài viết : 239
Points : 457
Like : 156
PhpBB3
Quản trị
Status : Hồi xưa mình đẹp trai lắm...Bây giờ đỡ nhiều rồi
lasperpenMOD
1/15/2017, 17:44
#5
Cho vào html

Code:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8" />
  <title>Chatbox Hotrofm</title>
  <meta name="title" content="Chatbox Hotrofm" /><meta name="viewport" content="width=device-width,initial-scale=1" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />   
 
<style>
    .user-msg a:after {
   font-size: 9px;
   vertical-align: text-top;
    }
      .user-msg a[href="/u1"]:after, .user-msg a[href="/u3"]:after {
   content: " Cub50";
    }
    .user-msg a[href="/u2"]:after {
   content: " Wave đỏ";
    }
      .user-msg a[href="/u67"]:after {
   content: " Xì po ráp";
    }
        .user-msg a[href="/u38"]:after {
   content: " Dream tàn";
    }
      .user-msg a[href="/u4"]:after {
   content: " Ex150";
    }
        .user-msg a[href="/u5"]:after {
   content: " Siêu xe đạp";
    }
      .user-msg a[href="/u7"]:after {
   content: " Xe ôm";
    }
        .user-msg a[href="/u14"]:after {
   content: " Xe 12 bóng đèn";
    }       
  .user-msg a[href="/u12"]:after {
   content: " Xe lôi";
    }
    .user-msg a[href="/u52"]:after {
   content: " Máy bay giấy";
    }
  .user-msg a[href="/u13"]:after {
   content: "♥ 範黄山";
    }
a[href="/u4"] {
font-weight: bold;
}
.user-msg>span {margin-right: 5px;word-wrap: break-word;word-break: break-word;border-radius: 100%;}
.item-tool, .item-tool a {
    margin-left: 5px;
    position: relative;
    display: inline-block;
    right: 0;
}
.tool-mod {
    position: absolute;
    right: 5px;
    font-size: 30px;
}
#chatbox-members ul li h3,#chatbox-me h2 {
    max-width: 170px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
#chatbox-members>ul>li, .chatbox-change {
    padding: 0 5px;
}
#chatbox-members>ul>li:hover:after{display:none}
#chatbox-members>ul>li .chatbox-change-mess {
    display: inline-block!important;
    top: -3px;
      position: relative;
    right: 0;
}
  .profile-link{position: absolute;
    right: 10px;
    top: 4px;}
  #chatbox-me h2:before {
    padding-left: 0px;
}

  #chatbox-alert,#chatbox-forumvi{display:none;right:0;left:0;top:0}
*{margin:0;padding:0}
@font-face{font-family:Roboto;font-style:normal;font-weight:300;src:local("Roboto Light"),local("Roboto-Light"),url(http://themes.googleusercontent.com/static/fonts/roboto/v10/NYDWBdD4gIq26G5XYbHsFD8E0i7KZn-EPnyo3HZu7kw.woff) format("woff")}
@font-face{font-family:Roboto;font-style:normal;font-weight:400;src:local("Roboto Regular"),local("Roboto-Regular"),url(http://themes.googleusercontent.com/static/fonts/roboto/v10/HV_H5nosKj8mZupFxrHqHA.woff) format("woff")}
@font-face{font-family:Roboto;font-style:normal;font-weight:700;src:local("Roboto Bold"),local("Roboto-Bold"),url(http://themes.googleusercontent.com/static/fonts/roboto/v10/PwZc-YbIL414wB9rB1IAPT8E0i7KZn-EPnyo3HZu7kw.woff) format("woff")}
@keyframes fadein{from{opacity:0}
to{opacity:1}
}
@-moz-keyframes fadein{from{opacity:0}
to{opacity:1}
}
@-webkit-keyframes fadein{from{opacity:0}
to{opacity:1}
}
@-ms-keyframes fadein{from{opacity:0}
to{opacity:1}
}
@-o-keyframes fadein{from{opacity:0}
to{opacity:1}
}
body{color:#444;font:400 13px Roboto,Helvetica}
a{text-decoration:none}
#chatbox-alert{background-color:#faffc2;padding:7px 15px;position:absolute;text-align:center;z-index:50}
#chatbox-forumvi{background:#fff;bottom:0;position:fixed}
#chatbox-header{background: #f5f5f5 none repeat scroll 0 0;border-bottom:1px solid #ddd;height:30px;padding:5px;position:relative}
#chatbox-header>div{font-weight:700;height:30px;line-height:30px;position:relative}
#chatbox-header h2{float:left;font-weight:300}
#chatbox-me{border-right:1px solid #dfdfdf;padding-right:10px;position:relative;width:255px;float:left;z-index:10}
#chatbox-me>h2{background-position:7px center!important;left:0;position:absolute;top:0;-webkit-transition:left .5s ease 0s;transition:left .5s ease 0s;width:220px}
#chatbox-action-logout,#chatbox-hidetab{height:30px;width:30px}
#chatbox-me h2:before{margin-right:10px;color:#43EF52}
#chatbox-me:hover>h2{left:-230px}
#chatbox-hidetab:before{content:"\f105";font-size:30px;padding:5px}
#chatbox-hidetab.show:before{content:"\f104"!important}
.chatbox-action-checkbox{position:absolute;right:10px;top:0}
#chatbox-action-logout{left:0;position:absolute;top:-50px;-webkit-transition:top .5s ease 0s;transition:top .5s ease 0s}
#chatbox-action-logout:before,#chatbox-hidetab:before,#chatbox-me h2:before,#chatbox-members ul li:before,#chatbox-members>ul>li:hover:after,#chatbox-option>div,.chatbox-action-checkbox>input+label:before,.chatbox-change:before,.chatbox-change[data-id=publish] h3:before{font-family:FontAwesome;font-weight:100}
#chatbox-members>ul>li:hover:after{content:"\f107";position:absolute;right:5px;font-size:30px}
#chatbox-option input[type=checkbox]{position:absolute;left:0;width:100%;height:100%;opacity:0}
#chatbox-action-logout:before{content:"\f011";font-size:25px;padding:5px;color:#6AB5FF}
#chatbox-me:hover #chatbox-action-logout{top:0}
.msg img{max-width:150px;vertical-align:top}
.chatbox-action-checkbox>input+label{display:inline-block;height:30px;line-height:30px;padding:0 7px 0 32px}
.chatbox-action-checkbox>input+label:before,.chatbox-action-checkbox>input:checked+label:before{content:"\f096";margin-right:5px;font-size:25px;vertical-align:middle}
.chatbox-action-checkbox>input:checked+label:before{content:"\f046";color:#3A5795}
#chatbox-action-logout:hover,#chatbox-hidetab:hover,.chatbox-action-checkbox>input+label:hover,.chatbox-action-group:hover{background-color:#f2f2f2;cursor:pointer}
#chatbox-list:after,#chatbox-list:before{background-color:#666;content:" ";display:block;position:absolute}
#chatbox-main,#chatbox-tabs{-webkit-transition:all .7s ease 0s;transition:all .7s ease 0s}
#chatbox-title{padding-left:280px}
#chatbox-tabs{border-right:1px dashed #ddd;bottom:0;left:0;overflow:auto;padding:2px 5px;position:absolute;top:41px;width:260px}
#chatbox-members{margin-bottom:50px}
#chatbox-list{margin:5px 0 15px;position:relative}
#chatbox-list:before{border-radius:50%;bottom:-12px;height:9px;left:50%;margin-left:-5px;width:9px}
#chatbox-list:after{bottom:-8px;height:1px;left:20px;right:20px}
#chatbox-members .chatbox-change h3,#chatbox-members ul li h3{display:inline-block}
#chatbox-members>ul{margin:7px 0}
#chatbox-members>ul>li,.chatbox-change{background-color:#fff;font-size:1.1em;font-weight:700;height:40px;line-height:40px;padding:0 17px;position:relative;cursor:pointer}
.true:before{color:#43EF52}
#chatbox-members>ul>li:hover,.chatbox-change:hover{background-color:#f9ffdd}
#chatbox-me h2:before,#chatbox-members ul li:before,.chatbox-change:before{cursor:pointer;padding-left:18px;content:"\f1eb"}
h3[onclick="show_publist()"]{color:#fff}
#chatbox-members .chatbox-change:before,#chatbox-members ul li:before{padding-left:0;display:inline-block;margin-right:5px;font-size:20px;vertical-align:middle}
.chatbox-change.active{background-color:#3A5795!important}
.chatbox-change[data-id=publish]:before{display:none}
.chatbox-change[data-id=publish] h3:before{content:"\f27b";padding:0;margin-right:5px;color:#fff}
#chatbox-hidetab,.chatbox-change-mess{position:absolute;right:10px;top:0}
.chatbox-change-mess>strong{background:red;border-radius:8px;color:#fff;display:block;font-family:monospace;font-size:15px;height:16px;line-height:16px;margin:12px 0;padding:2px 5px;text-shadow:0 0 0}
#chatbox-members .chatbox-setting,#chatbox-members>br,#chatbox-members>h4,#chatbox-title.groupchat .add,.chatbox-action-checkbox>input,.chatbox-action-group.edit{display:none}
#chatbox-main{border-left:1px solid #ddd;bottom:0;left:270px;padding:10px;position:absolute;right:0;top:41px}
#chatbox-members li:hover .chatbox-setting,#chatbox-title.groupchat .edit,.chatbox-setting:hover ul.chatbox-dropdown{display:block}
.cb-avatar,.user-msg{display:inline-block}
ul.chatbox-dropdown>li{font-size:13px;font-weight:300;height:24px;list-style:none;padding:0 10px;-webkit-transition:background-color .3s ease 0s,color .3s ease 0s;transition:background-color .3s ease 0s,color .3s ease 0s}
ul.chatbox-dropdown>li:hover{background-color:#444;color:#fff;cursor:pointer}
#chatbox-copyright{background-color:#f8f8f8;border-top:1px solid #ddd;bottom:0;color:#888;font-size:11px;height:19px;left:0;line-height:19px;position:fixed;right:0;text-align:center;width:269px}
#chatbox-wrap{bottom:76px;left:0;overflow:auto;position:absolute;right:0;top:0;-webkit-transition:opacity .5s ease 0s,bottom .5s ease 0s;transition:opacity .5s ease 0s,bottom .5s ease 0s}
.chatbox-content{padding:3px;font-size:14px}
.chatbox-content>p{-moz-hyphens:auto;padding:2px 7px;word-break:break-all;word-wrap:break-word;animation:fadein .7s;-moz-animation:fadein .7s;-webkit-animation:fadein .7s;-o-animation:fadein .7s}
.chatbox-content>p:hover{background-color:#f4f4f4}
.chatbox-content p:nth-child(2n+1){background-color:#f8f8f8}
.chatbox-content p.chatbox-date{background:#fff;position:relative;text-align:center}
.cb-avatar{vertical-align:middle;border:1px solid;height:30px}
.cb-avatar img{width:30px;height:30px;background:#fff;border-radius: 100%;}
.user-msg>span{margin-right:5px}
.chatbox-content p.chatbox-date:after,.chatbox-content p.chatbox-date:before{background-color:#ddd;content:" ";display:block;height:1px;left:10px;position:absolute;right:60%;top:13px}
.chatbox-content p.chatbox-date:after{left:60%;right:10px}
.chatbox-content>p.chatbox-userout{background-color:#ff7979;color:#fff;margin:7px 0;text-align:center}
.chatbox-content>p.chatbox-userout.me{background-color:#25968d}
#chatbox-messenger-form{background: #f5f5f5 none repeat scroll 0 0;border-top:1px solid #ddd;bottom:0;height:65px;left:0;padding:5px;position:absolute;right:0;-webkit-transition:bottom .5s ease 0s;transition:bottom .5s ease 0s}
#chatbox-messenger{height:30px;left:10px;position:absolute;right:42px;top:5px}
#chatbox-messenger-input{border:1px solid #b6b6b6;color:inherit;height:100%;line-height:19px;padding:0 15px;width:100%}
#chatbox-option{left:10px;position:absolute;right:10px;top:42px}
#chatbox-option>div{background:center center no-repeat #fff;border:1px outset;float:left;font-size:0;height:25px;line-height:27px;margin-right:7px;position:relative;text-align:center;width:25px}
div#chatbox-option-bold:before{content:"\f032"}
#chatbox-option>div:before{font-size:18px}
div#chatbox-option-italic:before{content:"\f033"}
div#chatbox-option-underline:before{content:"\f0cd"}
div#chatbox-option-strike:before{content:"\f0cc"}
div#chatbox-option-smiley:before{content:"\f118"}
.clear_msg strong:after,.clear_msg strong:before,.clear_msg:after,.clear_msg:before{content:" "}
#chatbox-option>div#chatbox-option-buzz.disable{background:#fff!important;color:#f03829;text-indent:0;font-size:12px}
#chatbox-option>div.active,#chatbox-option>div:hover{background-color:#f5ff7e;border:1px inset;cursor:pointer}
#chatbox-option>div#chatbox-option-submit{background-color:transparent;border:0;float:right;margin-right:0;text-indent:0;width:100px}
#chatbox-submit{background-color:#3A5795;border:1px outset;color:#fff;font-weight:700;height:100%;width:100%}
#chatbox-submit:hover{background-color:#333;cursor:pointer}
@-webkit-keyframes chatbox_row{50%{background-color:#fcffd5}
100%{background-color:transparent}
}
@keyframes chatbox_row{50%{background-color:#fcffd5}
100%{background-color:transparent}
}
#smiley_FB_frame,.tool_mod{background:#fff;padding:5px;position:absolute}
.chatbox-content>p.chatbox-newmess{-webkit-animation:3s ease 0s normal none 1 chatbox_row;animation:3s ease 0s normal none 1 chatbox_row}
@-webkit-keyframes shake{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{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)}
}
.chatbox-buzz{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:shake;animation-name:shake}
#smiley_FB_frame{border:1px solid #ddd;bottom:30px;color:#999;display:none;line-height:20px;right:-1px;text-align:center;text-indent:0;width:224px;z-index:100}
#chatbox-option-smiley.active>#smiley_FB_frame{display:block}
#chatbox-title[data-id=publish] .chatbox-action-group,.chatbox-action-group.add,.tool_mod{display:none}
#chatbox-forumvi>:not(#chatbox-messenger,.chatbox-content){-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}
.tool_mod{border:1px solid #ccc;left:138px}
.mod-menu{border-bottom:1px solid;font-size:11px}
.mod-menu:last-child{border:0}
.mod-menu a,.mod-menu span{padding:2px;display:block;cursor:pointer;color:inherit;text-align:center}
.mod-menu a:hover,.mod-menu span:hover{color:#fff!important;background:#000}
.del_pri{position:absolute;right:4px;padding:0 3px;background:red;line-height:20px;top:5px;color:#fff}
#frame-smile{position:absolute;background:#fff;border:1px solid #ccc;width:260px;height:80px;top:-66px;display:none;z-index:99;padding:5px;left:32px}
#frame-smile.active{display:block}
#chatbox-members>ul>li:hover .chatbox-change-mess,.chatbox-change.pri-msg{display:none}
.loading{position:absolute;left:0;right:0;top:25%;bottom:25%;text-align:center}
.loading p{font-size:76px;position:relative;color:#8a2be2}
.clear_msg{color:#3A5795;margin:20px 5px;background:#fff;position:relative;text-align:center}
.clear_msg:after,.clear_msg:before{display:block;height:1px;left:50px;position:absolute;right:59%;top:13px;z-index:1;border-top:1px dashed}
.clear_msg:after{left:60%;right:50px}
.clear_msg strong:before{margin-right:10px}
.clear_msg strong{background:#fff;position:relative;z-index:2;border:1px dashed;padding:5px}
.clear_msg strong:after{margin-left:10px}
.alert-chat{text-align:center;padding:15% 0;color:red;font-size:20px;text-shadow:1px 1px 1px #000}
#chatbox-option-buzz{background-image:url(http://chuyengame.com/chatbox/emo/chatbuzz.gif)!Important;width:75px!important}
.smiley_FB{background:url(http://i.imgur.com/MyKNhkD.png) left no-repeat;height:16px;width:16px;display:inline-block;text-align:center}
.smiley_FB[style="background-position-y:-undefinedpx"]{background-position-y:0}
#frame-smile .smiley_FB{margin:0 5px}
@media only screen and (max-device-width:700px){#chatbox-main{left:-1px!important}
#chatbox-tabs{left:-270px!important}
#chatbox-hidetab,#chatbox-me h2,#chatbox-option-bold,#chatbox-option-italic,#chatbox-option-strike,#chatbox-option-underline,#chatbox-title h2{display:none}
#chatbox-me h2:before{font-size:22px;padding-left:5px}
#chatbox-me{width:initial}
.chatbox-action-checkbox>input+label{padding:0 5px}
.chatbox-action-checkbox{left:10px}
}
.note {
    background: #F9D79B url("http://i55.servimg.com/u/f55/18/71/50/00/highli10.png") repeat-x scroll 0px 0px;
    border: 1px solid #EBB962;
    color: #000;
    box-shadow: 0px 1px 4px #EBB962;
    display: block;
    padding: 5px;
    line-height: 1.6;
    font-size: 12px;
}
  </style>
  </head>

<body>

  <div id="chatbox-forumvi" style="display: block;">
      <div id="chatbox-header">
        <div id="chatbox-me">
            <h2>...</h2>
            <div id="chatbox-action-logout" onclick="exit.call(this)"></div>
            <div id="chatbox-hidetab" onclick="hide_tab.call(this)" class="show"></div>
        </div>
        <div id="chatbox-title" data-id="publish">
            <h2>Kênh chat chung</h2><span class="new-mess"></span>
            <div class="chatbox-action-group close chatbox-action" data-action="/out"></div>
            <div class="chatbox-action-checkbox refresh">
              <input type="checkbox" id="chatbox-input-autoscroll" name="autoscroll" checked />
      <label for="chatbox-input-autoscroll">Tự động cuộn</label>
              <input type="checkbox" id="chatbox-input-autorefesh" name="autorefesh" checked />
              <label for="chatbox-input-autorefesh">Tự cập nhật</label>
            </div>
        </div>
      </div>

      <div id="chatbox-tabs">
        <div id="chatbox-list">
            <div class="chatbox-change active" data-id="publish">
              <h3 onclick="show_publist()">Phòng chat chung</h3>
              <span class="chatbox-change-mess" data-mess="0"></span>
            </div>
        </div>
        <div class="note">Không spam hoặc sử dụng từ ngữ thô tục<br/>Không yêu cầu hỗ trợ tại đây</div>
        <div id="chatbox-members">
          <ul></ul>
        </div>
        <div id="chatbox-copyright">© 2016 Hotofm.Net - <a href="/h7-page" target="_blank"><font color="red">Chatbox full size</font></a></div>
      </div>

      <div id="chatbox-main">
        <div id="chatbox-info"></div>
        <div id="chatbox-wrap">
            <div class="chatbox-content" style="display:block" data-id="publish">
              <div class="loading"><p><i class="fa fa-spinner fa-pulse"></i></p><div>Đang đăng nhập... <br><font color="red"><i>(Reset lại trang nếu phải chờ lâu)</i></font></div></div>
            </div>
        </div>
        <div id="chatbox-messenger-form">
            <form id="chatbox-form" data-key="publish">
              <div id="chatbox-messenger">
                  <input disabled type="text" name="message" id="chatbox-messenger-input" data-id="publish" maxlength="1024" autocomplete="off" />
              </div>
              <div id="chatbox-option">
                  <div onclick="set_input.call(this)" id="chatbox-option-bold" data="bold">
                    <input type="checkbox" name="bold" id="chatbox-input-bold" value="0" />
                </div>
                  <div onclick="set_input.call(this)" id="chatbox-option-italic" data="italic">
                    <input type="checkbox" name="italic" id="chatbox-input-italic" value="0" />
                </div>
                  <div onclick="set_input.call(this)" id="chatbox-option-underline" data="underline">
                    <input type="checkbox" name="underline" id="chatbox-input-underline" value="0" />
                </div>
                  <div onclick="set_input.call(this)" id="chatbox-option-strike" data="strike">
                    <input type="checkbox" name="strike" id="chatbox-input-strike" value="0" />
                </div>
                  <div id="chatbox-option-color" style="background: #333333;">
                    <input type="hidden" name="scolor" id="chatbox-input-color" value="#333333" />
                </div>
                  <div id="chatbox-option-smiley" onclick="smile_get.call(this)">
                    <div id="frame-smile" class=""></div>
                </div>
                <div id="chatbox-option-submit">
                    <input type="submit" value="Gửi tin" id="chatbox-submit"/>
                  </div>
            </form>
        </div>
      </div>

  </div>
  <div class="tool_mod"></div>
  <audio id="chatbox-buzz-audio">
      <source src="http://chuyengame.com/chatbox/audio/Buzz.ogg" type="audio/ogg" />
      <source src="http://chuyengame.com/chatbox/audio/Buzz.mp3" type="audio/mpeg" />
  </audio>
        <audio id="chatbox-new-mess">
      <source src="http://chuyengame.com/chatbox/audio/Newmess.mp3" type="audio/mpeg" />
  </audio>
  <script></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://www.hotrofm.net/27398.js"></script>


</body>
</html>
nkoxdl
Bài viết : 68
Points : 135
Like : 19
Punbb
An toàn
Status : Đời là bể khổ!
nkoxdlMEM LV2
1/16/2017, 08:36
#6
lasperpen đã viết:
Cho vào html

Code:

<!DOCTYPE HTML>
<html>
<head>
   <meta charset="utf-8" />
   <title>Chatbox Hotrofm</title>
  <meta name="title" content="Chatbox Hotrofm" /><meta name="viewport" content="width=device-width,initial-scale=1" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
  
<style>
     .user-msg a:after {
 font-size: 9px;
 vertical-align: text-top;
    }
      .user-msg a[href="/u1"]:after, .user-msg a[href="/u3"]:after {
 content: " Cub50";
    }
    .user-msg a[href="/u2"]:after {
 content: " Wave đỏ";
    }
      .user-msg a[href="/u67"]:after {
 content: " Xì po ráp";
    }
        .user-msg a[href="/u38"]:after {
 content: " Dream tàn";
    }
       .user-msg a[href="/u4"]:after {
 content: " Ex150";
    }
         .user-msg a[href="/u5"]:after {
 content: " Siêu xe đạp";
    }
      .user-msg a[href="/u7"]:after {
 content: " Xe ôm";
    }
        .user-msg a[href="/u14"]:after {
 content: " Xe 12 bóng đèn";
    }        
  .user-msg a[href="/u12"]:after {
 content: " Xe lôi";
    }
    .user-msg a[href="/u52"]:after {
 content: " Máy bay giấy";
    }
  .user-msg a[href="/u13"]:after {
 content: "♥ 範黄山";
    }
a[href="/u4"] {
font-weight: bold;
}
.user-msg>span {margin-right: 5px;word-wrap: break-word;word-break: break-word;border-radius: 100%;}
.item-tool, .item-tool a {
    margin-left: 5px;
    position: relative;
    display: inline-block;
    right: 0;
}
.tool-mod {
    position: absolute;
    right: 5px;
    font-size: 30px;
}
#chatbox-members ul li h3,#chatbox-me h2 {
    max-width: 170px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
#chatbox-members>ul>li, .chatbox-change {
    padding: 0 5px;
}
#chatbox-members>ul>li:hover:after{display:none}
#chatbox-members>ul>li .chatbox-change-mess {
    display: inline-block!important;
    top: -3px;
      position: relative;
    right: 0;
}
  .profile-link{position: absolute;
    right: 10px;
    top: 4px;}
  #chatbox-me h2:before {
    padding-left: 0px;
}

  #chatbox-alert,#chatbox-forumvi{display:none;right:0;left:0;top:0}
*{margin:0;padding:0}
@font-face{font-family:Roboto;font-style:normal;font-weight:300;src:local("Roboto Light"),local("Roboto-Light"),url(http://themes.googleusercontent.com/static/fonts/roboto/v10/NYDWBdD4gIq26G5XYbHsFD8E0i7KZn-EPnyo3HZu7kw.woff) format("woff")}
@font-face{font-family:Roboto;font-style:normal;font-weight:400;src:local("Roboto Regular"),local("Roboto-Regular"),url(http://themes.googleusercontent.com/static/fonts/roboto/v10/HV_H5nosKj8mZupFxrHqHA.woff) format("woff")}
@font-face{font-family:Roboto;font-style:normal;font-weight:700;src:local("Roboto Bold"),local("Roboto-Bold"),url(http://themes.googleusercontent.com/static/fonts/roboto/v10/PwZc-YbIL414wB9rB1IAPT8E0i7KZn-EPnyo3HZu7kw.woff) format("woff")}
@keyframes fadein{from{opacity:0}
to{opacity:1}
}
@-moz-keyframes fadein{from{opacity:0}
to{opacity:1}
}
@-webkit-keyframes fadein{from{opacity:0}
to{opacity:1}
}
@-ms-keyframes fadein{from{opacity:0}
to{opacity:1}
}
@-o-keyframes fadein{from{opacity:0}
to{opacity:1}
}
body{color:#444;font:400 13px Roboto,Helvetica}
a{text-decoration:none}
#chatbox-alert{background-color:#faffc2;padding:7px 15px;position:absolute;text-align:center;z-index:50}
#chatbox-forumvi{background:#fff;bottom:0;position:fixed}
#chatbox-header{background: #f5f5f5 none repeat scroll 0 0;border-bottom:1px solid #ddd;height:30px;padding:5px;position:relative}
#chatbox-header>div{font-weight:700;height:30px;line-height:30px;position:relative}
#chatbox-header h2{float:left;font-weight:300}
#chatbox-me{border-right:1px solid #dfdfdf;padding-right:10px;position:relative;width:255px;float:left;z-index:10}
#chatbox-me>h2{background-position:7px center!important;left:0;position:absolute;top:0;-webkit-transition:left .5s ease 0s;transition:left .5s ease 0s;width:220px}
#chatbox-action-logout,#chatbox-hidetab{height:30px;width:30px}
#chatbox-me h2:before{margin-right:10px;color:#43EF52}
#chatbox-me:hover>h2{left:-230px}
#chatbox-hidetab:before{content:"\f105";font-size:30px;padding:5px}
#chatbox-hidetab.show:before{content:"\f104"!important}
.chatbox-action-checkbox{position:absolute;right:10px;top:0}
#chatbox-action-logout{left:0;position:absolute;top:-50px;-webkit-transition:top .5s ease 0s;transition:top .5s ease 0s}
#chatbox-action-logout:before,#chatbox-hidetab:before,#chatbox-me h2:before,#chatbox-members ul li:before,#chatbox-members>ul>li:hover:after,#chatbox-option>div,.chatbox-action-checkbox>input+label:before,.chatbox-change:before,.chatbox-change[data-id=publish] h3:before{font-family:FontAwesome;font-weight:100}
#chatbox-members>ul>li:hover:after{content:"\f107";position:absolute;right:5px;font-size:30px}
#chatbox-option input[type=checkbox]{position:absolute;left:0;width:100%;height:100%;opacity:0}
#chatbox-action-logout:before{content:"\f011";font-size:25px;padding:5px;color:#6AB5FF}
#chatbox-me:hover #chatbox-action-logout{top:0}
.msg img{max-width:150px;vertical-align:top}
.chatbox-action-checkbox>input+label{display:inline-block;height:30px;line-height:30px;padding:0 7px 0 32px}
.chatbox-action-checkbox>input+label:before,.chatbox-action-checkbox>input:checked+label:before{content:"\f096";margin-right:5px;font-size:25px;vertical-align:middle}
.chatbox-action-checkbox>input:checked+label:before{content:"\f046";color:#3A5795}
#chatbox-action-logout:hover,#chatbox-hidetab:hover,.chatbox-action-checkbox>input+label:hover,.chatbox-action-group:hover{background-color:#f2f2f2;cursor:pointer}
#chatbox-list:after,#chatbox-list:before{background-color:#666;content:" ";display:block;position:absolute}
#chatbox-main,#chatbox-tabs{-webkit-transition:all .7s ease 0s;transition:all .7s ease 0s}
#chatbox-title{padding-left:280px}
#chatbox-tabs{border-right:1px dashed #ddd;bottom:0;left:0;overflow:auto;padding:2px 5px;position:absolute;top:41px;width:260px}
#chatbox-members{margin-bottom:50px}
#chatbox-list{margin:5px 0 15px;position:relative}
#chatbox-list:before{border-radius:50%;bottom:-12px;height:9px;left:50%;margin-left:-5px;width:9px}
#chatbox-list:after{bottom:-8px;height:1px;left:20px;right:20px}
#chatbox-members .chatbox-change h3,#chatbox-members ul li h3{display:inline-block}
#chatbox-members>ul{margin:7px 0}
#chatbox-members>ul>li,.chatbox-change{background-color:#fff;font-size:1.1em;font-weight:700;height:40px;line-height:40px;padding:0 17px;position:relative;cursor:pointer}
.true:before{color:#43EF52}
#chatbox-members>ul>li:hover,.chatbox-change:hover{background-color:#f9ffdd}
#chatbox-me h2:before,#chatbox-members ul li:before,.chatbox-change:before{cursor:pointer;padding-left:18px;content:"\f1eb"}
h3[onclick="show_publist()"]{color:#fff}
#chatbox-members .chatbox-change:before,#chatbox-members ul li:before{padding-left:0;display:inline-block;margin-right:5px;font-size:20px;vertical-align:middle}
.chatbox-change.active{background-color:#3A5795!important}
.chatbox-change[data-id=publish]:before{display:none}
.chatbox-change[data-id=publish] h3:before{content:"\f27b";padding:0;margin-right:5px;color:#fff}
#chatbox-hidetab,.chatbox-change-mess{position:absolute;right:10px;top:0}
.chatbox-change-mess>strong{background:red;border-radius:8px;color:#fff;display:block;font-family:monospace;font-size:15px;height:16px;line-height:16px;margin:12px 0;padding:2px 5px;text-shadow:0 0 0}
#chatbox-members .chatbox-setting,#chatbox-members>br,#chatbox-members>h4,#chatbox-title.groupchat .add,.chatbox-action-checkbox>input,.chatbox-action-group.edit{display:none}
#chatbox-main{border-left:1px solid #ddd;bottom:0;left:270px;padding:10px;position:absolute;right:0;top:41px}
#chatbox-members li:hover .chatbox-setting,#chatbox-title.groupchat .edit,.chatbox-setting:hover ul.chatbox-dropdown{display:block}
.cb-avatar,.user-msg{display:inline-block}
ul.chatbox-dropdown>li{font-size:13px;font-weight:300;height:24px;list-style:none;padding:0 10px;-webkit-transition:background-color .3s ease 0s,color .3s ease 0s;transition:background-color .3s ease 0s,color .3s ease 0s}
ul.chatbox-dropdown>li:hover{background-color:#444;color:#fff;cursor:pointer}
#chatbox-copyright{background-color:#f8f8f8;border-top:1px solid #ddd;bottom:0;color:#888;font-size:11px;height:19px;left:0;line-height:19px;position:fixed;right:0;text-align:center;width:269px}
#chatbox-wrap{bottom:76px;left:0;overflow:auto;position:absolute;right:0;top:0;-webkit-transition:opacity .5s ease 0s,bottom .5s ease 0s;transition:opacity .5s ease 0s,bottom .5s ease 0s}
.chatbox-content{padding:3px;font-size:14px}
.chatbox-content>p{-moz-hyphens:auto;padding:2px 7px;word-break:break-all;word-wrap:break-word;animation:fadein .7s;-moz-animation:fadein .7s;-webkit-animation:fadein .7s;-o-animation:fadein .7s}
.chatbox-content>p:hover{background-color:#f4f4f4}
.chatbox-content p:nth-child(2n+1){background-color:#f8f8f8}
.chatbox-content p.chatbox-date{background:#fff;position:relative;text-align:center}
.cb-avatar{vertical-align:middle;border:1px solid;height:30px}
.cb-avatar img{width:30px;height:30px;background:#fff;border-radius: 100%;}
.user-msg>span{margin-right:5px}
.chatbox-content p.chatbox-date:after,.chatbox-content p.chatbox-date:before{background-color:#ddd;content:" ";display:block;height:1px;left:10px;position:absolute;right:60%;top:13px}
.chatbox-content p.chatbox-date:after{left:60%;right:10px}
.chatbox-content>p.chatbox-userout{background-color:#ff7979;color:#fff;margin:7px 0;text-align:center}
.chatbox-content>p.chatbox-userout.me{background-color:#25968d}
#chatbox-messenger-form{background: #f5f5f5 none repeat scroll 0 0;border-top:1px solid #ddd;bottom:0;height:65px;left:0;padding:5px;position:absolute;right:0;-webkit-transition:bottom .5s ease 0s;transition:bottom .5s ease 0s}
#chatbox-messenger{height:30px;left:10px;position:absolute;right:42px;top:5px}
#chatbox-messenger-input{border:1px solid #b6b6b6;color:inherit;height:100%;line-height:19px;padding:0 15px;width:100%}
#chatbox-option{left:10px;position:absolute;right:10px;top:42px}
#chatbox-option>div{background:center center no-repeat #fff;border:1px outset;float:left;font-size:0;height:25px;line-height:27px;margin-right:7px;position:relative;text-align:center;width:25px}
div#chatbox-option-bold:before{content:"\f032"}
#chatbox-option>div:before{font-size:18px}
div#chatbox-option-italic:before{content:"\f033"}
div#chatbox-option-underline:before{content:"\f0cd"}
div#chatbox-option-strike:before{content:"\f0cc"}
div#chatbox-option-smiley:before{content:"\f118"}
.clear_msg strong:after,.clear_msg strong:before,.clear_msg:after,.clear_msg:before{content:" "}
#chatbox-option>div#chatbox-option-buzz.disable{background:#fff!important;color:#f03829;text-indent:0;font-size:12px}
#chatbox-option>div.active,#chatbox-option>div:hover{background-color:#f5ff7e;border:1px inset;cursor:pointer}
#chatbox-option>div#chatbox-option-submit{background-color:transparent;border:0;float:right;margin-right:0;text-indent:0;width:100px}
#chatbox-submit{background-color:#3A5795;border:1px outset;color:#fff;font-weight:700;height:100%;width:100%}
#chatbox-submit:hover{background-color:#333;cursor:pointer}
@-webkit-keyframes chatbox_row{50%{background-color:#fcffd5}
100%{background-color:transparent}
}
@keyframes chatbox_row{50%{background-color:#fcffd5}
100%{background-color:transparent}
}
#smiley_FB_frame,.tool_mod{background:#fff;padding:5px;position:absolute}
.chatbox-content>p.chatbox-newmess{-webkit-animation:3s ease 0s normal none 1 chatbox_row;animation:3s ease 0s normal none 1 chatbox_row}
@-webkit-keyframes shake{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{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)}
}
.chatbox-buzz{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:shake;animation-name:shake}
#smiley_FB_frame{border:1px solid #ddd;bottom:30px;color:#999;display:none;line-height:20px;right:-1px;text-align:center;text-indent:0;width:224px;z-index:100}
#chatbox-option-smiley.active>#smiley_FB_frame{display:block}
#chatbox-title[data-id=publish] .chatbox-action-group,.chatbox-action-group.add,.tool_mod{display:none}
#chatbox-forumvi>:not(#chatbox-messenger,.chatbox-content){-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}
.tool_mod{border:1px solid #ccc;left:138px}
.mod-menu{border-bottom:1px solid;font-size:11px}
.mod-menu:last-child{border:0}
.mod-menu a,.mod-menu span{padding:2px;display:block;cursor:pointer;color:inherit;text-align:center}
.mod-menu a:hover,.mod-menu span:hover{color:#fff!important;background:#000}
.del_pri{position:absolute;right:4px;padding:0 3px;background:red;line-height:20px;top:5px;color:#fff}
#frame-smile{position:absolute;background:#fff;border:1px solid #ccc;width:260px;height:80px;top:-66px;display:none;z-index:99;padding:5px;left:32px}
#frame-smile.active{display:block}
#chatbox-members>ul>li:hover .chatbox-change-mess,.chatbox-change.pri-msg{display:none}
.loading{position:absolute;left:0;right:0;top:25%;bottom:25%;text-align:center}
.loading p{font-size:76px;position:relative;color:#8a2be2}
.clear_msg{color:#3A5795;margin:20px 5px;background:#fff;position:relative;text-align:center}
.clear_msg:after,.clear_msg:before{display:block;height:1px;left:50px;position:absolute;right:59%;top:13px;z-index:1;border-top:1px dashed}
.clear_msg:after{left:60%;right:50px}
.clear_msg strong:before{margin-right:10px}
.clear_msg strong{background:#fff;position:relative;z-index:2;border:1px dashed;padding:5px}
.clear_msg strong:after{margin-left:10px}
.alert-chat{text-align:center;padding:15% 0;color:red;font-size:20px;text-shadow:1px 1px 1px #000}
#chatbox-option-buzz{background-image:url(http://chuyengame.com/chatbox/emo/chatbuzz.gif)!Important;width:75px!important}
.smiley_FB{background:url(http://i.imgur.com/MyKNhkD.png) left no-repeat;height:16px;width:16px;display:inline-block;text-align:center}
.smiley_FB[style="background-position-y:-undefinedpx"]{background-position-y:0}
#frame-smile .smiley_FB{margin:0 5px}
@media only screen and (max-device-width:700px){#chatbox-main{left:-1px!important}
#chatbox-tabs{left:-270px!important}
#chatbox-hidetab,#chatbox-me h2,#chatbox-option-bold,#chatbox-option-italic,#chatbox-option-strike,#chatbox-option-underline,#chatbox-title h2{display:none}
#chatbox-me h2:before{font-size:22px;padding-left:5px}
#chatbox-me{width:initial}
.chatbox-action-checkbox>input+label{padding:0 5px}
.chatbox-action-checkbox{left:10px}
}
.note {
    background: #F9D79B url("http://i55.servimg.com/u/f55/18/71/50/00/highli10.png") repeat-x scroll 0px 0px;
    border: 1px solid #EBB962;
    color: #000;
    box-shadow: 0px 1px 4px #EBB962;
    display: block;
    padding: 5px;
    line-height: 1.6;
    font-size: 12px;
}
  </style>
  </head>

<body>

   <div id="chatbox-forumvi" style="display: block;">
      <div id="chatbox-header">
         <div id="chatbox-me">
            <h2>...</h2>
            <div id="chatbox-action-logout" onclick="exit.call(this)"></div>
            <div id="chatbox-hidetab" onclick="hide_tab.call(this)" class="show"></div>
         </div>
         <div id="chatbox-title" data-id="publish">
            <h2>Kênh chat chung</h2><span class="new-mess"></span>
            <div class="chatbox-action-group close chatbox-action" data-action="/out"></div>
            <div class="chatbox-action-checkbox refresh">
              <input type="checkbox" id="chatbox-input-autoscroll" name="autoscroll" checked />
 <label for="chatbox-input-autoscroll">Tự động cuộn</label>
               <input type="checkbox" id="chatbox-input-autorefesh" name="autorefesh" checked />
               <label for="chatbox-input-autorefesh">Tự cập nhật</label>
            </div>
         </div>
      </div>

      <div id="chatbox-tabs">
         <div id="chatbox-list">
            <div class="chatbox-change active" data-id="publish">
               <h3 onclick="show_publist()">Phòng chat chung</h3>
               <span class="chatbox-change-mess" data-mess="0"></span>
            </div>
         </div>
        <div class="note">Không spam hoặc sử dụng từ ngữ thô tục<br/>Không yêu cầu hỗ trợ tại đây</div>
         <div id="chatbox-members">
           <ul></ul>
        </div>
        <div id="chatbox-copyright">© 2016 Hotofm.Net - <a href="/h7-page" target="_blank"><font color="red">Chatbox full size</font></a></div>
      </div>

      <div id="chatbox-main">
         <div id="chatbox-info"></div>
         <div id="chatbox-wrap">
            <div class="chatbox-content" style="display:block" data-id="publish">
              <div class="loading"><p><i class="fa fa-spinner fa-pulse"></i></p><div>Đang đăng nhập... <br><font color="red"><i>(Reset lại trang nếu phải chờ lâu)</i></font></div></div>
            </div>
         </div>
         <div id="chatbox-messenger-form">
            <form id="chatbox-form" data-key="publish">
               <div id="chatbox-messenger">
                  <input disabled type="text" name="message" id="chatbox-messenger-input" data-id="publish" maxlength="1024" autocomplete="off" />
               </div>
               <div id="chatbox-option">
                  <div onclick="set_input.call(this)" id="chatbox-option-bold" data="bold">
                    <input type="checkbox" name="bold" id="chatbox-input-bold" value="0" />
                 </div>
                  <div onclick="set_input.call(this)" id="chatbox-option-italic" data="italic">
                    <input type="checkbox" name="italic" id="chatbox-input-italic" value="0" />
                 </div>
                  <div onclick="set_input.call(this)" id="chatbox-option-underline" data="underline">
                    <input type="checkbox" name="underline" id="chatbox-input-underline" value="0" />
                 </div>
                  <div onclick="set_input.call(this)" id="chatbox-option-strike" data="strike">
                    <input type="checkbox" name="strike" id="chatbox-input-strike" value="0" />
                 </div>
                  <div id="chatbox-option-color" style="background: #333333;">
                    <input type="hidden" name="scolor" id="chatbox-input-color" value="#333333" />
                 </div>
                  <div id="chatbox-option-smiley" onclick="smile_get.call(this)">
                    <div id="frame-smile" class=""></div>
                 </div>
                 <div id="chatbox-option-submit">
                    <input type="submit" value="Gửi tin" id="chatbox-submit"/>
                  </div>
            </form>
         </div>
      </div>

   </div>
   <div class="tool_mod"></div>
   <audio id="chatbox-buzz-audio">
      <source src="http://chuyengame.com/chatbox/audio/Buzz.ogg" type="audio/ogg" />
      <source src="http://chuyengame.com/chatbox/audio/Buzz.mp3" type="audio/mpeg" />
   </audio>
        <audio id="chatbox-new-mess">
      <source src="http://chuyengame.com/chatbox/audio/Newmess.mp3" type="audio/mpeg" />
   </audio>
  <script></script>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://www.hotrofm.net/27398.js"></script>


</body>
</html>





tks ạ
Admin
Bài viết : 431
Points : 820
Like : 120
Punbb
Quản trị
Status : test
AdminACP
1/16/2017, 10:55
#7
@nkoxdl làm xong nhớ viết hướng dẫn cách làm chatbox nhé. :)
Sponsored content
#8