Đề Mô:
![[Code] Share chatbox hotrofm đang dùng OriZFIq](https://i.imgur.com/OriZFIq.jpg)
Hướng dẫn
Bước 1
Tạo trang HTML mới, sử dụng code sau:
Chú ý: Ghi nhớ page_id của trang HTML vừa tạo.
Bước 2
Thay thế mã {CHATBOX_TOP} trong index_body bằng:
Chú ý: Thay {PAGE_ID} trong code trên bằng, số page_id của trang HTML tạo ở bước 1.
Hướng dẫn
Bước 1
Tạo trang HTML mới, sử dụng code sau:
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>Chú ý: Ghi nhớ page_id của trang HTML vừa tạo.
Bước 2
Thay thế mã {CHATBOX_TOP} trong index_body bằng:
Code:
<!-- BEGIN switch_user_logged_in -->
<div class="main">
<div class="main-content chatbox clearfix">
<div id="chatbox_top" style="height: 420px; border: 1px solid #DDD;">
<iframe src="/h{PAGE_ID}-chatbox" id="frame_chatbox" scrolling="auto" frameborder="0" height="100%" width="100%"></iframe>
</div>
<div style="resize">
<img src="http://2img.net/i/fa/resize.gif" onmousedown="javascript:resizeElement(event, 'chatbox_top');" alt="" style="cursor:se-resize; float: right;" />
</div>
</div>
</div>
<!-- END switch_user_logged_in -->Chú ý: Thay {PAGE_ID} trong code trên bằng, số page_id của trang HTML tạo ở bước 1.
