Share code chatbox mới[✔]

by **An Nguyễn** 13/11/2013, 12:23 pm

Demo : https://i.servimg.com/u/f75/17/70/06/81/210.jpg

B1 : tạo 1 trang HTML

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> <title>Chatbox</title> <meta content="text/html; charset=utf-8" http-equiv="content-type"/> <meta content="text/javascript" http-equiv="content-script-type"/> <meta content="text/css" http-equiv="content-style-type"/> <link href="http://illiweb.com/fa/favicon/write.ico" type="image/x-icon" rel="shortcut icon"/> <link type="text/css" href="https://googledrive.com/host/0BywKunb3ieyDdVlWcUlScmk2SlE/ShoutBox.css" rel="stylesheet"/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <script type="text/javascript" src="https://googledrive.com/host/0BywKunb3ieyDdVlWcUlScmk2SlE/lz-string-1.3.0-rc1.js"></script> <script type="text/javascript" src="https://googledrive.com/host/0B1KYB697LuNxVUlqTDVLTXNHSkU"></script>  <script type="text/javascript"> //<![CDATA[ var params = '?archives=1'; var smilies_sid = ''; var url_chat = '/chatbox/index.forum'; function updateParent() { parent.updateIframeSize('iframe_shoutbox', $('html').height()); } /* $(function() { $("#editarea").sceditor({ plugins: "bbcode", toolbar: "source,removeformat,maximize|font,size,color,emoticon|cut,copy,paste,pastetext|bold,italic,underline,strike,subscript,superscript|code,quote,image,email,link,unlink|left,center,right,justify", fonts: "Arial,Arial Black,Courier New,Sans-serif,Times New Roman,Trebuchet MS", locale: "pt", emoticonsRoot: "https://googledrive.com/host/0BywKunb3ieyDeXo0RF93Z1BXd3M/", resizeEnabled: false, autofocus: true }); });*/ //]]> </script> <style type="text/css"> * {margin: 0;padding: 0;} html, body {overflow: hidden;} body {padding: 0;margin: 0;background-color: #fbfbfb; font-family: helvetica,arial,sans-serif !important} .fontbutton {border:0;} #ajax_loading { background: -moz-linear-gradient(center top , #95C715 0%, #7BA60D 100%) repeat scroll 0 0 transparent; border: 1px solid #7BA60D; border-radius: 0 0 5px 5px; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2), 0 -1px 0 rgba(255, 255, 255, 0.2) inset; color: #FFFFFF; left: 46%; padding: 5px 0 8px; position: fixed; text-align: center; top: 0; width: 8%; z-index: 10000; } .punbbtop button { display: none !important; } </style> </head> <body vlink="" text="#333333" link="#225985" bgcolor="#fbfbfb" onload="parent.updateIframeSize('iframe_shoutbox', $('html').height());"> <div id="ajax_loading" style="display: none;"><img alt="Loading..." src="http://i69.servimg.com/u/f69/18/17/62/92/ajax_l10.gif"/></div> <div id="shoutbox-temp-msgs" style="display: none;"></div> <div id="shoutbox-temp-imgs" style="display: none;"></div> <div id="category_shoutbox" class="category_block block_wrap" style="min-height: 300px; min-width: 720px; width: 100%;"> <h3 class="maintitle"> <a title="View Main Shoutbox" href="/forum" target="_top">Shoutbox </a> </h3> <div role="tablist" class="cke_dialog_tabs" id="cke_dialog_tabs_200"> <a role="tab" hidefocus="true" tabindex="-1" id="cke_general_207" title="General" cke_first="" class="cke_dialog_tab" style="-moz-user-select: none;"> General </a> </div> <div class="ipsBox table_wrap"> <div class="ipsBox_container"> <table class="ipb_table shoutbox_table" style="height: 230px; min-height: 230px;"> <tbody> <tr class="row2" id="shoutbox-announcement-row"> <td valign="middle" colspan="2" class="altrow"> <div class="message" id="shoutbox-announcement-text"> No spamming and offensive words. <strong class="bbc">Support is not allowed in Shoutbox!</strong> </div> </td> </tr> <tr class="row1"> <td valign="top" colspan="2" class="altrow"> <div id="shoutbox-shouts" style="overflow: auto; overflow-x: hidden; left: 0px; top: 0px; height: 169px; min-height: 128px;"> <p id="shoutbox-inactive-prompt" style="display: none; height: 126px;" class="altrow short"> <br>We've noticed that you've been inactive for over 10 minutes.<br> The shoutbox has stopped running due to your inactivity.<br> If you are back again, please click the button below <u>I'm back!</u>. <br><br> <input type="button" onclick="I_am_back();" class="input_submit" value="I am Back!"> </p> <p id="shoutbox-service" style="display: none; height: 126px;" class="altrow short"> <br><br>Our shoutbox is currently undergoing maintenance, we appreciate your understanding!<br> The shoutbox has stopped running due to technical reasons.<br> We will be back later. Thank you for understanding! <br> </p> <table id="shoutbox-shouts-table" style="display: ;"> <div id="chatbox_members" style="display: none;" increment="10" pageincrement="144" maxpos="460" curpos="0"></div> <tbody id="chatbox_general" class="chat_toggle" style="display: ;" curpos="188" maxpos="325" pageincrement="0" increment="10">  </tbody> </table> </div> <div id="shouts-global-resizer" title="Clique para redimensionar o ShoutBox!" onmousedown="resizeElement();"></div> <div style="display: none;" class="message error block_wrap" id="shoutbox-inline-error-glb"></div> </td> </tr>  <tr class="row1"> <td valign="top" colspan="2" class="altrow"> <form onsubmit="submitmsg('?archives=1');return false;" method="post" action="" name="post"> <div id="chatbox_messenger_form" style="display: "> <div align="center" onclick="document.post.message.focus();timer_count=0;"> <input type="text" id="message" name="message" size="70" maxlength="1024" class="input_text" autocomplete="off" style="width: 98%; margin-bottom: 10px;" onkeydown="number_of_refresh=0;timer_count=0;" /> <input type="submit" class="input_submit" value="Send Shout" id="submit_button" name="submit_button"/> <input type="button" class="input_submit alt" value="Clear" id="shoutbox-clear-button" onclick="document.getElementById('message').value = '';"> <input type="button" class="input_submit alt" value="Refresh" id="shoutbox-refresh-button" style="" onclick="refresh_chatbox('?archives=1');"/> </div> </div> </form> </td> </tr> </tbody> </table> </div> </div> </div> <div class="popupWrapper" id="editShout_popup" style="display: none; top: 50%; left: 50%; width: 650px; height: 245px; margin:-135px 0 0 -325px; position: absolute;"> <div class="popupInner" id="editShout_inner" style="width: 650px; height: 245px;"> <h3>Edit Shout</h3> <div class="message error block_wrap" id="shoutbox-inline-error-editShout" style="display:none;"></div> <div class="ipsPad"> <span class="cke_wrapper cke_ltr" role="presentation"> <form onsubmit="submitEditedMsg('?archives=1');return false;" method="post" action="" name="editpost"> <table border="0" cellpadding="0" cellspacing="0" class="cke_editor"> <tbody> <tr> <td class="cke_contents" style="height: 100px; padding: 0px ! important;"> <textarea class="input_text" id="editarea" name="editarea" style="width: 98%; height: 89%; resize: none; outline: medium none; text-align: left;" onkeydown="number_of_refresh=0;timer_count=0;"> </textarea> </td> </tr>  </tbody> </table> <div class="short ipsPad"> <div onclick="document.editpost.editarea.focus();timer_count=0;"> <input type="submit" class="input_submit" value="Send Shout" id="submit_button" name="submit_button"/> <input type="button" class="input_submit alt" value="Clear" id="shoutbox-clear-button" onclick="document.getElementById('editarea').value = '';"> <input type="button" class="input_submit alt" value="Cancel" id="shoutbox-refresh-button" onclick="$('#editShout_popup').toggle();"> </div> </div> </form> </span> </div> </div> <div class="popupClose clickable" id="editShout_close" onclick="$('#editShout_popup').toggle();"><img alt="x" src="http://i81.servimg.com/u/f81/17/45/75/97/cat_mi10.png"></div> </div> <script language=JavaScript>  </script> </body> </html>