การ DIY Shoutbox 3.2.1 ไปไว้ในหน้าต่างๆ

themaxaboy

การ DIY Shoutbox 3.2.1 ไปไว้ในหน้าต่างๆ อาจจะเป็นประโยชน์กับใครหลายๆคน



เปิดโหลด DIY สร้างโมดูล HTML เลือกโค้ด HTML ใส่โค้ดนี้ลงไป

1. <!-- Shoutbox by Natz start, Modify and Update function by Jaideejung007 -->
   
2. <!--
   
3. /*
   
4. + ----------------------------------------------------------------------------+
   
5. |        THZAA.COM - Discuz! X1.5
   
6. |
   
7. |        Jaideejung007
   
8. |        http://www.thzaa.com
   
9. |        jaideejung007@gmail.com
   
10. |
    
11. |        : Shoutbox
    
12. |        : 3.2.1 $
    
13. |        : 2011/04/06 00:00:00 $
    
14. |        : Natz $
    
15. |        : Jaideejung007 $
    
16. |        -Non-Commercial-No Derivative Works 3.0 Thailand http://creativecommons.org/licenses/by-nc-nd/3.0/th/
    
17. +-----------------------------------------------------------------------------+
    
18. */
    
19. -->
    
20. 
    
21. <script src="source/plugin/natz_shoutbox/js/jquery.min.js" type="text/javascript"></script>
    
22. <script type="text/javascript">
    
23. var jq = jQuery.noConflict();
    
24. 
    
25. function searchFocus2(obj) {
    
26. if(obj.value == '') {
    
27. obj.value = '';
    
28. }
    
29. }
    
30. function searchBlur2(obj) {
    
31. if(obj.value == '' ) {
    
32. obj.value = '';
    
33. }
    
34. }
    
35. </script>
    
36. <style type="text/css">
    
37. #jchat{
    
38. height:335px;
    
39. width:100%;
    
40. text-align:left;
    
41. margin-bottom:10px;
    
42. }
    
43. #jchatbody{
    
44. width:100%;
    
45. overflow:auto;
    
46. padding-bottom:6px;
    
47. margin-bottom:6px;
    
48. border-bottom:#CCC 1px dashed;
    
49. }
    
50. #jchatcontentbd{
    
51. float:left;
    
52. height:270px;
    
53. width:730px;
    
54. padding:7px;
    
55. background:#ebf2f8;
    
56. border:#e3edf5 1px solid;
    
57. }
    
58. 
    
59. #jchatcontent{
    
60. height:248px;
    
61. background:#ffffff;
    
62. padding:4px;
    
63. overflow:auto;
    
64. overflow-x:hidden;
    
65. border:#7fcae2 1px solid;
    
66. }
    
67. #jchatonline{
    
68. float:right;
    
69. height:270px;
    
70. width:180px;
    
71. padding:7px;
    
72. overflow:auto;
    
73. overflow-x:hidden;
    
74. border:#7fcae2 1px solid;
    
75. }
    
76. #jchateditor{
    
77. height:46px;
    
78. width:956px;
    
79. margin-top:4px;
    
80. background:#eaeaea;
    
81. border:#CCC 1px solid;
    
82. }
    
83. #jchatmessage{
    
84. width:952px;
    
85. height:20px;
    
86. font-size:14px;
    
87. }
    
88. .jrowt{
    
89. background:#eaeaea;
    
90. }
    
91. .jowerror{
    
92. background:#ff0000;
    
93. color:#ffffff;
    
94. padding-left:5px;
    
95. }
    
96. </style>
    
97. 
    
98. 
    
99. <script src="source/plugin/natz_shoutbox/js/shoutbox.js" type="text/javascript"></script>
    
100. <script type='text/javascript'>
     
101. shoutbox.base_url = 'source/plugin/natz_shoutbox/shoutbox.php?';
     
102. shoutbox.fade_start_color = '#7FCAE2';
     
103. shoutbox.fade_end_color = '#FFFFFF';
     
104. shoutbox.add_error_string('blank_shout', 'คุณยังไม่ได้กรอกข้อความใดๆ เลย');
     
105. shoutbox.add_error_string('flooding', 'ขออภัย! คุณส่งข้อความบ่อยเกินไป กรุณารออีก 1 วินาที แล้วค่อยกลับมาส่งข้อความใหม่');
     
106. shoutbox.add_error_string('shout_too_big', 'ข้อความที่คุณส่งมา มีขนาดยาวเกิน 255 ตัวอักษร กรุณากลับไปแก้ไขใหม่');
     
107. shoutbox.initiate();
     
108. </script>
     
109. 
     
110. <!-- Opening new windows of Credit and Autor this plungin start -->
     
111. 
     
112. <SCRIPT LANGUAGE="JavaScript">
     
113. <!-- Idea by:  Nic Wolfe (Nic@TimelapseProductions.com) -->
     
114. <!-- Web URL:  http://fineline.xs.mw -->
     
115. <!-- Begin
     
116. function popUp(URL) {
     
117. day = new Date();
     
118. id = day.getTime();
     
119. eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=660,height=480,left = 0,top = 0');");
     
120. }
     
121. // End -->
     
122. </script>
     
123. <!-- Opening new windows of Credit and Autor this plungin end -->
     
124. 
     
125. <style type="text/css">
     
126. <!--
     
127. .shoutbox-button {
     
128. font-size: 11px;
     
129. line-height: 1em;
     
130. display: inline;
     
131. overflow: visible;
     
132. padding: 3px 5px 2px;
     
133. border: 1px solid #CECECE;
     
134. background: #FFF;
     
135. cursor: pointer;
     
136. margin-left: 2px;
     
137. }
     
138. .shoutbox-f {
     
139. padding: 3px 5px 2px;
     
140. font-size: 11px;
     
141. line-height: 1em;
     
142. border: 1px solid #E3EDF5;
     
143. background: #FFF;
     
144. margin-left: 2px;
     
145. }
     
146. .shoutbox-members-viewing-total {
     
147. font-size: 14px / 2;
     
148. border: 1px dashed #E3EDF5;
     
149. background: #FFF url(source/plugin/natz_shoutbox/images/user.png) no-repeat 1em 0.7em;
     
150. padding: 0.5em 1em 0.5em 3em;
     
151. margin-bottom: 5px;
     
152. color: #009900;
     
153. /*width: 92%;*/
     
154. text-align:left;
     
155. }
     
156. 
     
157. .shoutbox-ff {
     
158. padding: 3px 5px 2px;
     
159. font-size: 12px;
     
160. line-height: 1em;
     
161. border: 1px solid #CECECE;
     
162. background: #FFF;
     
163. margin-left: 2px;
     
164. }
     
165. .shoutbox-announce {
     
166. font-size: 14px / 2;
     
167. border: 1px dashed #E3EDF5;
     
168. background: #FFF url(source/plugin/natz_shoutbox/images/exclamation.png) no-repeat 1em 0.7em;
     
169. padding: 0.5em 1em 0.5em 3em;
     
170. margin-bottom: 5px;
     
171. color: #009900;
     
172. width: 93.5%;
     
173. text-align:left;
     
174. }
     
175. .shoutbox-error {
     
176. padding: 4px;
     
177. background-color: #FCC;
     
178. border: 1px solid #C00;
     
179. color: #000;
     
180. position:relative;
     
181. display:none
     
182. }
     
183. 
     
184. .shoutbox_popup { overflow: hidden; padding: 2px; padding-top: 10px;  padding-left: 6px; text-align: left; line-height: 1.4em; border: 1px solid #F0F0F0; background:#FFF; }
     
185. 
     
186. .shoutbox_members_viewing_list { overflow: hidden; padding: 2px; padding-top: 10px;  padding-left: 6px; text-align: left; line-height: 1.4em; border: 1px solid #F0F0F0; background:#FFF; }
     
187. 
     
188. .chat-new{border:1px solid #F0F0F0;margin:0px 0 0px 0;padding:8px;background: #F3F3F3;}
     
189. .chat-new-bor{padding:8px 8px 8px 8;}
     
190. .chat-new td{padding-left:5px;}
     
191. 
     
192. .list1 { border-top: 3px solid #E1E1E1; }
     
193. .content .list1 h3 { padding-left: 6px; color: #666; line-height: 35px; }
     
194. .list1 td, .list1 th { height: 0px; padding: 6px 0; border-top: 1px dashed #E1E1E1; color: #666; }
     
195. 
     
196. .mainboxshut table { width: 100%; }
     
197. 
     
198. .editor_tb_shout { margin: 5px 0 0; width: 99.8%; height: 28px; border: 1px solid; border-color: #707070 #CECECE #CECECE #707070; background: #F2F2F2; }
     
199. .editor_tb_shout .right a { color: #369; }
     
200. .editor_tb_shout .right { padding-right: 10px; line-height: 26px; }
     
201. .editor_tb_shout div a { float: left; margin: 8px 3px 0; width: 16px; height: 16px; background: url(static/image/editor/editor.gif) no-repeat; text-indent: -9999px; line-height: 16px;  overflow: hidden; }
     
202. .editor_tb_shout div a.tb_bold { background-position: -3px -1px; }
     
203. .editor_tb_shout div a.tb_color { background-position: -3px -81px; }
     
204. .editor_tb_shout div a.tb_img { background-position: -3px -823px; }
     
205. .editor_tb_shout div a.tb_link { background-position: -3px -121px; }
     
206. .editor_tb_shout div a.tb_quote { background-position: -3px -441px; }
     
207. .editor_tb_shout div a.tb_code { background-position: -3px -461px; }
     
208. .editor_tb_shout div a.tb_smilies { background-position: -2px -803px; }
     
209. .editor_tb_shout div a.tb_imme { background-position: -3px -763px; }
     
210. .editor_tb_shout .popupmenu_popup td { padding: 0 !important; height: 14px; width: 14px; }
     
211. .editor_tb_shout .popupmenu_popup td div { height: 10px; width: 10px; cursor: pointer; }
     
212. .txtarea { width: 99%; height: 20px; }
     
213. #editer a {
     
214.     background: url("static/image/editor/editor.gif") no-repeat scroll 0 0 transparent;
     
215.     float: left;
     
216.     height: 20px;
     
217.     line-height: 20px;
     
218.     margin: 2px 5px 0 0;
     
219.     overflow: hidden;
     
220.     text-indent: -9999px;
     
221.     width: 20px; }
     
222. #editer a.e_colorbox{background-position: -60px 0;}
     
223. #editer a.e_emo {background-position: -20px -20px;}
     
224. #editer a.e_bold {background-position: 0 0;}
     
225. #editer a.e_italic {background-position: -20px 0;}
     
226. #editer a.e_img {background-position: 0px -20px;}
     
227. #editer a.e_link {background-position: -40px -20px;}
     
228. #editer a.e_underline {background-position: -40px 0;}
     
229. #editer a.e_quote{background-position:-140px -20px;}
     
230. 
     
231. .shoutbox-textareachat {
     
232. /*font-size: 14px / 2;*/
     
233. /*border: 1px dashed #E3EDF5; */
     
234. /*background: #FFF url(source/plugin/natz_shoutbox/images/exclamation.png) no-repeat 1em 0.7em; */
     
235. padding: 2px 0 0 0; // บน
     
236. /*margin-bottom: 5px; */
     
237. /*color: #009900; */
     
238. /*width: 94%;*/
     
239. /*text-align:left;*/
     
240. }
     
241. 
     
242. a.zm_msg_actions:link, a.zm_msg_actions {color:#04a;}
     
243. .zm_msg_item{padding:1ex 0 0;}
     
244. -->
     
245. </style>
     
246. <div class="fl bm">
     
247. <div class="bm bmw cl">
     
248. <div class="bm_h cl">
     
249. <span class="o"><img id="shoutbox_img" src="static/image/FDSilver/collapsed_no.gif" alt="" onclick="toggle_collapse('shoutbox');" /></span>
     
250. <h3>&nbsp;&nbsp;&nbsp;<a href="http://dekphetchabun.co.cc/plugin.php?id=natz_shoutbox:jaideejung007_shoutbox">DekPhetchabun Chat Zone ! - กล่องเมาส์แตกสำหรับวัยรุ่นเพชรบูรณ์</a></h3>
     
251. </div>
     
252. <!-- Shoutbox area -->
     
253. <table width="100%" summary="shoutbox" id="shoutbox" cellpadding="0" cellspacing="0" style="table-layout: fixed;">
     
254. <tr>
     
255. 
     
256. <td>
     
257. 
     
258. <div id='shoutbox-announcement-div' align='center' style='display:none;margin:5px 0 5px 0;'>
     
259. <div id='shoutbox-announcement-text' class='shoutbox-announce'></div>
     
260. </div>
     
261. <div class="chat-new">
     
262. <div class="chat-new-bor">
     
263. <div style="position:relative;">
     
264. <div id="fastpostmessages" class="shoutbox_popup" style="height:250px; overflow:auto; overflow-x:hidden;"></div>
     
265. <div id="fastpostmessages-reloading" style="position:absolute;top:5px;right:20px;display:none"></div>
     
266. <div class="shoutbox-error" style="position:absolute; bottom:1px; left:1px; right:1px;">
     
267. <div id="shoutbox-error-close" style="position:absolute;right:-2px;top:2px;padding-right:4px;cursor:pointer;font-size:12px" title="ปิด"><img src="source/plugin/natz_shoutbox/images/cross.png" border="0" /></div>
     
268. 
     
269. <div id="shoutbox-error"></div>
     
270. </div>
     
271. 
     
272. </div>
     
273. 
     
274. </div>
     
275. </td>
     
276. 
     
277. <!-- Show Member Viewing by Jaideejung007 start -->
     
278. <td class="shoutbox-membes" style="width:17%; padding-left:5px;" valign="top">
     
279. <div class='shoutbox-members-viewing-total' style='margin:5px 0 5px 0;'><strong><span id="shoutbox-members-viewing"></span></strong>&nbsp;Online</div>
     
280. <div id="shoutbox-members-viewing-list" class="shoutbox_members_viewing_list" style="height:268px;overflow:auto;"></div>
     
281. </td>
     
282. <!-- Show Member Viewing by Jaideejung007 end -->
     
283. 
     
284. </tr>
     
285. <tr>
     
286. <td colspan="2">
     
287.         
     
288. <div class="shoutbox-textareachat" align='center'>
     
289. <input class="txtarea px" rows="5" cols="80" name="message" value="" id="fastpostmessage" onKeyDown="seditor_ctlent(event, 'fastpostvalidate($(\'fastpostform\'))');" maxlength="255" onfocus="searchFocus2(this);" onblur="searchBlur2(this);">
     
290. 
     
291. </div><!-- end <div id="editer"> -->
     
292. 
     
293. <div class="editor_tb_shout">
     
294. <div id="editer">
     
295. 
     
296. <a href="javascript:;" title="แทรกตัวหนา" onclick="seditor_insertunit('fastpost', '[b]', '[/b]')" style="width:20px;height:20px;background:url(source/plugin/natz_shoutbox/images/text_bold.png) no-repeat center;">B</a>
     
297. <a href="javascript:;" title="แทรกสีอักษร" id="fastpostforecolor" onclick="showColorBox(this.id, 2, 'fastpost');doane(event)" style="width:20px;height:20px;background:url(source/plugin/natz_shoutbox/images/font.png) no-repeat center;">Color</a>
     
298. <a href="javascript:;" title="แทรกข้อความขีดเส้นใต้" onclick="seditor_insertunit('fastpost', '[u]', '[/u]')" style="width:20px;height:20px;background:url(source/plugin/natz_shoutbox/images/text_underline.png) no-repeat center;">I</a>
     
299. <a href="javascript:;" title="แทรกตัวเอียง" onclick="seditor_insertunit('fastpost', '[i]', '[/i]')" style="width:20px;height:20px;background:url(source/plugin/natz_shoutbox/images/text_italic.png) no-repeat center;">I</a>
     
300. <a id="fastpostimg" href="javascript:;" title="แทรกรูปภาพ" onclick="seditor_menu('fastpost', 'img')" style="width:20px;height:20px;background:url(source/plugin/natz_shoutbox/images/image_add.png) no-repeat center;">Image</a>
     
301. <a id="fastposturl" href="javascript:;" title="แทรกลิงค์" onclick="seditor_menu('fastpost', 'url')" style="width:20px;height:20px;background:url(source/plugin/natz_shoutbox/images/world_add.png) no-repeat center;">Link</a>
     
302. 
     
303. <a id="fastpostsml" href="javascript:;"  title="แทรกตัวยิ้ม" onclick="showMenu({'ctrlid':this.id,'evt':'click','layer':2});return false;" style="width:20px;height:20px;background:url(source/plugin/natz_shoutbox/images/emoticon_tongue.png) no-repeat center;">Smilies</a>
     
304. <script src="data/cache/common_smilies_var.js?K9k" type="text/javascript" type="text/javascript" reload="1"></script>
     
305. <script type="text/javascript" reload="1">smilies_show('fastpostsmiliesdiv', 8, 'fastpost');</script>
     
306. 
     
307. </div><!-- end <div id="editer"> -->
     
308. <span class="right">
     
309. <select id="fastpostmessage-skin">
     
310. <option value="default" selected="selected">Skin Default</option>
     
311. <option value="#000000" style="background-color: #000000">Black</option>
     
312. <option value="#a0522d" style="background-color: #a0522d">Sienna</option>               
     
313. 
     
314. <option value="#556b2f" style="background-color: #556b2f">DarkOliveGreen</option>
     
315. <option value="#006400" style="background-color: #006400">DarkGreen</option>
     
316. <option value="#483d8b" style="background-color: #483d8b">DarkSlateBlue</option>
     
317. <option value="#000080" style="background-color: #000080">Navy</option>
     
318. <option value="#4b0082" style="background-color: #4b0082">Indigo</option>
     
319. <option value="#2f4f4f" style="background-color: #2f4f4f">DarkSlateGray</option>
     
320. <option value="#8b0000" style="background-color: #8b0000">DarkRed</option>
     
321. <option value="#ff8c00" style="background-color: #ff8c00">DarkOrange</option>
     
322. <option value="#808000" style="background-color: #808000">Olive</option>
     
323. 
     
324. <option value="#008000" style="background-color: #008000">Green</option>
     
325. <option value="#008080" style="background-color: #008080">Teal</option>
     
326. <option value="#0000ff" style="background-color: #0000ff">Blue</option>
     
327. <option value="#708090" style="background-color: #708090">SlateGray</option>
     
328. <option value="#696969" style="background-color: #696969">DimGray</option>
     
329. <option value="#ff0000" style="background-color: #ff0000">Red</option>
     
330. <option value="#f4a460" style="background-color: #f4a460">SandyBrown</option>
     
331. <option value="#9acd32" style="background-color: #9acd32">YellowGreen</option>
     
332. <option value="#2e8b57" style="background-color: #2e8b57">SeaGreen</option>
     
333. 
     
334. <option value="#48d1cc" style="background-color: #48d1cc">MediumTurquoise</option>
     
335. <option value="#4169e1" style="background-color: #4169e1">RoyalBlue</option>
     
336. <option value="#800080" style="background-color: #800080">Purple</option>
     
337. <option value="#808080" style="background-color: #808080">Gray</option>
     
338. <option value="#ff00ff" style="background-color: #ff00ff">Magenta</option>
     
339. <option value="#ffa500" style="background-color: #ffa500">Orange</option>
     
340. <option value="#ffff00" style="background-color: #ffff00">Yellow</option>
     
341. <option value="#00ff00" style="background-color: #00ff00">Lime</option>
     
342. <option value="#00ffff" style="background-color: #00ffff">Cyan</option>
     
343. 
     
344. <!--option value="#00bfff'" style="background-color: #00bfff">DeepSkyBlue</option-->
     
345. <option value="#9932cc" style="background-color: #9932cc">DarkOrchid</option>
     
346. <option value="#c0c0c0" style="background-color: #c0c0c0">Silver</option>
     
347. <option value="#ffc0cb" style="background-color: #ffc0cb">Pink</option>
     
348. <option value="#f5deb3'" style="background-color: #f5deb3">Wheat</option>
     
349. <option value="#fffacd" style="background-color: #fffacd">LemonChiffon</option>
     
350. <option value="#98fb98" style="background-color: #98fb98">PaleGreen</option>
     
351. <option value="#afeeee" style="background-color: #afeeee">PaleTurquoise</option>
     
352. <option value="#add8e6" style="background-color: #add8e6">LightBlue</option>
     
353. 
     
354. <option value="#dda0dd" style="background-color: #dda0dd">Plum</option>
     
355. </select>
     
356. <!--input class="txtarea px" rows="5" cols="80" name="message" id="fastpostmessage" onKeyDown="seditor_ctlent(event, 'fastpostvalidate($(\'fastpostform\'))');" maxlength="255"-->
     
357. <span class="pipe">|</span>
     
358. <span id="newspecialtmp">       
     
359.                 <button id="shoutbox-submit-button" class="shoutbox-button">ส่งข้อความ</button>
     
360. <button id="shoutbox-clear-button" class="shoutbox-button">เคลียร์</button>
     
361. <button id="shoutbox-refresh-button" class="shoutbox-button">รีเฟรช</button>
     
362. <span class="pipe">|</span>
     
363. <a href="javascript:popUp('source/plugin/natz_shoutbox/credit.html')" title="Informations of Shoutbox">&copy; Copyright</a>
     
364. 
     
365. <span id="fastpostmessage-skin"></span>
     
366. </span><!-- end <span id="newspecialtmp"> -->
     
367. </span><!-- end <span class="right"> -->
     
368. </div><!-- end <div class="editor_tb_shout"> -->
     
369.                
     
370. </div><!-- end <div class="chat-new"> -->
     
371. 
     
372. </td>
     
373. </tr>
     
374. </table>
     
375. </div><!-- enf <div class="bm bmw cl"> -->
     
376. <!-- Shoutbox area -->
     
377. </div><!-- end <div class="fl bm"> -->
     
378. 
     
379. <!-- Shoutbox by Natz end, Modify and Update function by Jaideejung007-->

คัดลอกไปที่คลิปบอร์ด

Demo :

1. http://www.dekphetchabun.co.cc

คัดลอกไปที่คลิปบอร์ด

ปล.ต้องแก้โค้ดนิสนึ่งนะครับไม่งั้นกลายเป็นชื่อเว็บผม...

jaideejung007

เอาโค๊ดมาทั้งดุ้นสินะ

Bonn121

อ้อ โค๊ดจาก .php อะสิครับ
ขอบคุณครับ

foxsunza

ขอบคุณครับ

MasterTGZ

ขอบคุณครับ ^_^

navamin

ขอบคุณมากครับ

arafarn12

ทีนี้ก็จะเอาแชทไปหน้าอื่นได้แล้ว
ขอบคุณมากครับบ

stamp1

แล้ว sdc ทำได้ปล่าวอ้ะ

k2757

ขอบคุณครับแหล่มนิ อิอิ