Sự kiện
Diễn đàn
Latest images
Trợ giúp
Tìm kiếm
Thành viên
Đăng ký
Đăng Nhập
»[FM] Hướng dẫn làm Chatbox tự động login + nút Buzz cập nhật ngày 01/08/2011
Giới tính
![»[FM] Hướng dẫn làm Chatbox tự động login + nút Buzz cập nhật ngày 01/08/2011 Inspir10](https://i.servimg.com/u/f34/15/44/78/93/inspir10.gif)
Tường nhà
Bài viết
Kết bạn
Tài sản
Sau đợt FM cập nhật chatbox có nhiều bạn vẫn chưa làm được Chatbox tự động login nên hôm nay mình sẽ hướng dẫn các bạn. Bài viết này có sử dụng code của CP và viewsource chatbox của C3Z. 
Bây giờ ta bắt đầu làm chatbox nào.
Bước 1: tạo 1 trang HTML chèn code này vào (có thể chỉnh sửa nếu các bạn muốn) source này mình view của C3Z nên có cả nút Buzz nữa. Các bạn về chỉnh sửa cho hợp lý nha.
Bước 2: Thay link trang HTML chatbox vừa tạo vào code sau
Bước 3: Copy toàn bộ code ở bước 2 sau khi thay link trang HTML chatbox và dán (paste) vào chỗ nào bạn muốn hiển thị chatbox (trong index_body hoặc overall header)
Để sửa độ cao của chatbox các bạn chỉnh "height" trong code bước 2 nhé.
Mọi thắc mắc vui lòng PM lại nhé.
P/S: bài viết không dùng thẻ hide
Bây giờ ta bắt đầu làm chatbox nào.
Bước 1: tạo 1 trang HTML chèn code này vào (có thể chỉnh sửa nếu các bạn muốn) source này mình view của C3Z nên có cả nút Buzz nữa. Các bạn về chỉnh sửa cho hợp lý nha.
- Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Chatbox C3Z</title><meta http-equiv="content-script-type" content="text/javascript" /><meta http-equiv="content-style-type" content="text/css" /><script src="http://illiweb.com/fa/js_16/vi.js" type="text/javascript"></script>
<script src="http://illiweb.com/rs3/17/frm/chatbox/chatbox4.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
* {margin: 0px;padding: 0;}
html, body {overflow: hidden;}
body {background-color: #efefef;}
body,th,td,p {
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:11px
}
a:link,a:active,a:visited,a:hover {
color:#5D401E;
text-decoration:none;
}
.thead,td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom,td.rowpic {
background:#bfec92;
color:#1a540f;
padding:3px;
font:bold 11px tahoma,verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
}
td.cat,td.catHead,td.catBottom {
border-width:0;
}
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
font-weight:bold;
border:#ffffff;
border-style:solid;
}
.genmed {
font-size:11px;
}
th.thBottom,td.catBottom {
border-width:0 1px 1px 1px;
}
a.gen,a.genmed,a.gensmall {
color:#006699;
text-decoration:none;
}
.cattitle,td .t-title {
font-weight:bold;
font-size:12px;
letter-spacing:1px;
color:#006699
}
a.cattitle {
text-decoration:none;
color:#844A21;
font-size:12px;
}
a.cattitle:hover {
text-decoration:underline;
}
input[type=submit] {
padding:0 5px;
font-size:11px;
cursor:pointer;
background-color:#fff;
border:1px solid #a6a6a6;
color:#000;
font-weight: bold
}
/* Chatbox */
#frame_chatbox {
border:none !important;
}
body.chatbox {
min-width:550px !important;
background-image:none;
padding:0;
margin:0;
background-color:#fff;
}
#chatbox_members {
float:left;
top:28px;
bottom:30px;
width:110px;
overflow:auto;
border-right:1px solid #E5E5E5;
}
#chatbox {
position:absolute;
top:25px;
left:0;
right:0;
bottom:30px;
overflow:auto;
line-height:10px;
}
#chatbox ul {
list-style-type:none;
margin:5px 10px 10px 100px;
border-bottom:2px #3A3A3A dotted;
border-left:2px #3A3A3A dotted;
}
#chatbox li {
line-height:14px;
padding:3px 3px 3px 7px;
}
.chatbox_row_1,.chatbox_row_2,.chatbox_row_3 {
font-size:12px;
}
.chatbox-options {
text-align:right;
}
#chatbox_messenger_form .text-field,#chatbox_messenger_form,#chatbox_messenger_form .gen {
float:left;
}
#chatbox_footer {
position:absolute;
bottom:0;
left:0;
right:0;
height:30px;
}
#chatbox_footer table.text-styles {
float:right;
}
#chatbox_footer .text-field {
float:left;
}
#chatbox_header {
background-color:#e5e5e5;
}
#chatbox p {
line-height:1.2em;
}
.chatbox_row_1 {
padding:4px;
background-color:#fff;
}
.chatbox_row_2 {
padding:4px;
background-color:#FFDFDF;
}
.chatbox_row_3 {
padding:4px;
background-color:#CFE9FF;
}
.memberlist_row_1 {
padding:2px 2px 2px 10px;
background-color:#fff;
}
#chatbox_members .member-title {
text-align:center;
padding:0.5em 0.25em;
background-image:none;
font-size:12px;
background-color:#9FE6FF;
color:#222F03;
font-family:Verdana,Arial,Helvetica,sans-serif;
}
#chatbox_members ul {
list-style:none;
margin:0 0 0 10px;
}
#chatbox_members ul li {
margin:2px 2px 2px 0;
}
#message,#submit_button {
border-width:1px;
}
.fontbutton {
padding:1px;
cursor:pointer;
text-align:left;
}
.fontbutton_normal {
background:transparent;
}
.fontbutton_selected {
background:#0AAF11;
border:1px solid #22229C;
}
.fontbutton_clicked {
background:#1BACDF;
border:1px solid #22229C;
}
.fontbutton_hover {
background:#8F0000;
border:1px solid #22229C;
}
#chatbox .user {
font-weight:bold;
}
div#chatbox {
color:#000;background:#fff;
}
#chatbox_contextmenu {
background-color:#d1d7dc;
border:1px solid #aaa;
}
#chatbox_contextmenu p {
margin:0;
padding:1px 4px;
font-family:verdana,arial,sans-serif;
background:#;
border-bottom:1px solid #777;
}
#chatbox_contextmenu p.hover {
background:#;
}
#chatbox_contextmenu p.close {
background:#ddd;
padding:1px;
font-size:70%;
color:#fff;
}
#chatbox_contextmenu p.close img, label img {
vertical-align:middle;
padding-left:20px;
}
#chatbox_contextmenu a {
color:#;
text-decoration:none;
font-size:70%;
}
#chatbox_contextmenu a:hover {
color:#;
}
.fontbutton {
border: 0;
}
* html #chatbox-members {
/* IE expressions helping IE work in Standards mode */
height:expression(( document.documentElement.clientHeight ? document.documentElement.clientHeight:document.body.clientHeight) - ( (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 3)+(parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 2)+(parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 2 * 0) )+"px");
}
* html #chatbox {
/* IE expressions helping IE work in Standards mode */
height:expression(( document.documentElement.clientHeight ? document.documentElement.clientHeight:document.body.clientHeight) - ( (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 3)+(parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 2)+(parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 2 * 0) )+"px");
width:expression(( document.documentElement.clientWidth ? document.documentElement.clientWidth:document.body.clientWidth) - ( (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 10)+(parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 1)+(parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 2 * 1.3) )+"px");
}
* html #chatbox-footer {
/* IE expressions helping IE work in Standards mode */
width:expression(( document.documentElement.clientWidth ? document.documentElement.clientWidth:document.body.clientWidth) - ( (parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 0)+(parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 0)+(parseInt(document.body.currentStyle.fontSize) * 1.3333333 * 2 * 0) )+"px")
}
.date-and-time {font-size:8px}
#chatbox_option_disco,#chatbox_option_with_archives,#chatbox_option_without_archives,.online-users a[href="/u1"],.online-users a[href="/u31"] {display:none!important}
.msg img {vertical-align:middle}
.msg>strong { font-size: 11px}
</style>
<script src="http://www.coo.vn/out/users/c3vietk/js/vibrate.js" type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
var params = '?archives=1';var smilies_sid = '';
$(document).ready(function(){
$('#buzz').click(function(){
$("div").vibrate({
frequency: 5000,
spread: 5,
duration: 600
});
});
});
//]]></script>
</head>
<body class="chatbox" onload="if(!connected){CB_disconnect();}ajax_refresh_chatbox('?archives=100', 1);if (location.href.indexOf('reload')==-1) location.replace(location.href+'?reload');shmem();"><div id="chatbox_header"><table cellspacing="0" cellpadding="0" border="0" width="100%"><tr><td class="catBottom" nowrap="nowrap"><table border="0" width="100%"><tr><td nowrap="nowrap"><strong>SHOUTBOX<a href="#" onclick="showh();return false"> </a> - VUI LÒNG XEM NỘI QUY Ở TRÊN.</strong></td><td valign="top" class="chatbox-options"><div class="genmed" id="chatbox_main_options"><a href="javascript:void(0)" onclick="ajax_refresh_chatbox('?archives=1', 1);">Refresh</a> | <span id="chatbox_option_with_archives" style="display:none ;"><a href="/chatbox/index.forum?archives=1">Archives</a> | </span><span id="chatbox_option_without_archives" style="display: ;"><a href="/chatbox/index.forum?archives=0">Without archives</a> | </span><span id="chatbox_option_autorefresh" style="display: ;" onclick="refresh_chatbox('?archives=1');"><label for="refresh_auto">Auto refresh </label><input type="checkbox" name="refresh_auto" id="refresh_auto" checked="checked" style="background: transparent;" /> </span><span id="chatbox_option_co" style="display:none;"><a href="#reload" onclick="if(!connected){CB_disconnect();}ajax_refresh_chatbox('?archives=100', 1);"><strong>Đăng Nhập</strong></a></span><span id="chatbox_option_disco" style="display:none ;">Thoát</span> </div></td></tr></table></td></tr></table></div><div id="chatbox_members" curpos="0" maxpos="460" pageincrement="144" increment="10"></div><div id="chatbox"></div><div id="chatbox_footer" style="display:;"><div id="chatbox_messenger"><form id="c3sbox" name="post" action="/chatbox/index.forum" method="post" onsubmit="submitmsg('?archives=1');refresh_chatbox('?archives=1');return false;"><table width="100%" cellspacing="0" cellpadding="0"><tr><td class="catBottom"><div id="chatbox_messenger_form"><table cellspacing="0" cellpadding="0" height="24" width="100%" class="chatfootertable"><tr><td width="100%" align="right"><table cellspacing="2" cellpadding="0" border="0" style="line-height: 0px;" class="text-styles" ><tr><td><div id="divbold" class="fontbutton fontbutton_normal" onmouseover="this.className='fontbutton fontbutton_hover'" onmouseout="this.className=( document.post.sbold.value == '1' ) ? 'fontbutton fontbutton_selected' : 'fontbutton fontbutton_normal'" onclick="do_style('bold');" onmousedown="this.className='fontbutton fontbutton_clicked';" onmouseup="this.className=( document.post.sbold.value != '1' ) ? 'fontbutton fontbutton_selected' : 'fontbutton fontbutton_normal'"><img src="http://2img.net/i/fa/subsilver/wysiwyg/bold.gif" width="21" height="20" alt="Bold" title="Bold" /></div></td><td><div id="divitalic" class="fontbutton fontbutton_normal" onmouseover="this.className='fontbutton fontbutton_hover'" onmouseout="this.className=( document.post.sitalic.value == '1' ) ? 'fontbutton fontbutton_selected' : 'fontbutton fontbutton_normal'" onclick="do_style('italic');" onmousedown="this.className='fontbutton fontbutton_clicked';" onmouseup="this.className=( document.post.sitalic.value != '1' ) ? 'fontbutton fontbutton_selected' : 'fontbutton fontbutton_normal'"><img src="http://2img.net/i/fa/subsilver/wysiwyg/italic.gif" width="21" height="20" alt="Ital." title="Ital." /></div></td><td><div id="divunderline" class="fontbutton fontbutton_normal" onmouseover="this.className='fontbutton fontbutton_hover'" onmouseout="this.className=( document.post.sunderline.value == '1' ) ? 'fontbutton fontbutton_selected' : 'fontbutton fontbutton_normal'" onclick="do_style('underline');" onmousedown="this.className='fontbutton fontbutton_clicked';" onmouseup="this.className=( document.post.sunderline.value != '1' ) ? 'fontbutton fontbutton_selected' : 'fontbutton fontbutton_normal'"><img src="http://2img.net/i/fa/subsilver/wysiwyg/underline.gif" width="21" height="20" alt="Underl." title="Underl." /></div></td><td><div id="divstrike" class="fontbutton fontbutton_normal" onmouseover="this.className='fontbutton fontbutton_hover'" onmouseout="this.className=( document.post.sstrike.value == '1' ) ? 'fontbutton fontbutton_selected' : 'fontbutton fontbutton_normal'" onclick="do_style('strike');" onmousedown="this.className='fontbutton fontbutton_clicked';" onmouseup="this.className=( document.post.sstrike.value != '1' ) ? 'fontbutton fontbutton_selected' : 'fontbutton fontbutton_normal'"><img src="http://2img.net/i/fa/subsilver/wysiwyg/strike.gif" width="21" height="20" alt="Strike" title="Strike" /></div></td><td width="10"> </td><td><div id="divcolor" class="fontbutton fontbutton_normal" onmouseover="this.className='fontbutton fontbutton_hover'" onmouseout="this.className='fontbutton fontbutton_normal'" onclick="do_selectcolor(event);"><img src="http://2img.net/i/fa/subsilver/wysiwyg/color.gif" width="21" height="16" alt="Màu font" title="Màu font" /><img src="http://2img.net/i/fa/subsilver/wysiwyg/menupop.gif" width="11" height="16" alt="Màu font" title="Màu font" /><br /><img src="http://2img.net/i/fa/subsilver/wysiwyg/clear.gif" id="show_color" alt="Màu font" title="Màu font" width="21" height="4" /></div></td><td><div id="divsmilies" class="fontbutton fontbutton_normal" onmouseover="this.className='fontbutton fontbutton_hover'" onmouseout="this.className='fontbutton fontbutton_normal'" onclick="do_selectsmilies(event);"><img src="http://2img.net/i/fa/subsilver/wysiwyg/smilie.gif" width="21" height="20" alt="Biểu tượng" title="Biểu tượng" /><img src="http://2img.net/i/fa/subsilver/wysiwyg/menupop.gif" width="11" height="20" alt="Biểu tượng" title="Biểu tượng" /></div>
</td>
<td><div id="buzz" onclick="buzz();"><img src="http://www.c3zone.net/users/2315/72/47/45/smiles/3783939235.gif" alt="Buzz" title="Buzz" /></div>
</td>
<td width="6"> </td><td><input type="hidden" name="sbold" value="0"><input type="hidden" name="sitalic" value="0"><input type="hidden" name="sunderline" value="0"><input type="hidden" name="sstrike" value="0"><input type="hidden" name="scolor" id="scolor" value="#000000"><span class="gen" onclick="document.post.message.focus();"><label>Chat : <input type="text" id="message" name="message" size="35" maxlength="1024" class="post" autocomplete="off" onkeydown="number_of_refresh=0;" /></label> <input type="hidden" name="sent" value="" /><input type="submit" name="submit_button" value="Trò chuyện" id="submit_button" /> </span></td></tr></table></td></tr></table></div></td></tr></table></form></div></div>
<script type="text/javascript">//<![CDATA[
function ajax_connect(params, mode){if ( params == '' || params == undefined ){params = '?achives=0';}if (window.XMLHttpRequest){var http_request = new XMLHttpRequest();}else if (window.ActiveXObject){var http_request = new ActiveXObject("Microsoft.XMLHTTP");}http_request.onreadystatechange = function(){if (http_request.readyState == 4 && http_request.status == 200){var parsed_text = http_request.responseText;if ( parsed_text ){if ( mode == 'connect' ){document.getElementById('chatbox_option_co').style.display = 'none';document.getElementById('chatbox_option_disco').style.display = '';document.getElementById('refresh_auto').checked = true;document.getElementById('chatbox_option_autorefresh').style.display = '';document.getElementById('chatbox_messenger_form').style.display = '';document.getElementById('chatbox_footer').style.display = 'block';connected = 1;number_of_refresh = 0;}else if ( mode == 'disconnect' ){document.getElementById('chatbox_option_co').style.display = '';document.getElementById('chatbox_option_disco').style.display = 'none';document.getElementById('chatbox_option_autorefresh').style.display = 'none';document.getElementById('chatbox_messenger_form').style.display = 'none';document.getElementById('chatbox_footer').style.display = 'none';connected = 0;}refresh_chatbox(params);}}};http_request.open('GET','/chatbox/chatbox_actions.forum'+params+'&mode='+mode+my_getcookie('mytid').substr(my_getcookie('mytid').indexOf('&tid='),37),true);http_request.send(null);}function CB_disconnect(){if ( connected ){ajax_connect('?archives=1', 'disconnect');clearInterval(refresh_interval);}else{ajax_connect('?archives=1', 'connect');try {refresh_interval = setInterval("refresh_chatbox('?archives=1');", 5000);} catch (err) {}}}if ( document.location.href.indexOf('chatbox', 1) == -1 ){$('#divcolor').css('display', 'none');$('#divsmilies').css('display', 'none');}var connected = false;var chatbox_updated = 1310441470;var chatbox_last_update = 1310441470;var template_color = '#000000';var refresh_interval;window.setTimeout("document.getElementById('chatbox').scrollTop = 999999; Init_pref();", 200);window.setTimeout("document.getElementById('chatbox').scrollTop = 999999;", 1000);if ( connected ){try {refresh_interval = setInterval("refresh_chatbox('?archives=1');", 5000);} catch (err) {}}else{try {refresh_chatbox('?archives=1');} catch (err) { }}//]]></script></body></html>
Bước 2: Thay link trang HTML chatbox vừa tạo vào code sau
- Code:
<script type="text/javascript">
jQuery(document).ready(function(){my_setcookie('mytid',jQuery("#logout").attr("href"),1,0);});
</script>
<iframe src="link trang html vừa tạo" scrolling="no" width="100%" height="340"
style="border-width:0" marginwidth="0"
marginheight="0"></iframe>
Bước 3: Copy toàn bộ code ở bước 2 sau khi thay link trang HTML chatbox và dán (paste) vào chỗ nào bạn muốn hiển thị chatbox (trong index_body hoặc overall header)
Để sửa độ cao của chatbox các bạn chỉnh "height" trong code bước 2 nhé.
Mọi thắc mắc vui lòng PM lại nhé.
P/S: bài viết không dùng thẻ hide
![»[FM] Hướng dẫn làm Chatbox tự động login + nút Buzz cập nhật ngày 01/08/2011 Amazed10](https://i.servimg.com/u/f34/15/44/78/93/amazed10.gif)
