Chào các bạn hôm nay mình (AD ChémVL.Wapka.Mobi) chia sẻ cho các bạn code Phòng CHAT Wapka tương đối đầy đù với giao diện mà mình đã design lại. Thời gian qua bận quá nên không share cho mọi người được. Hôm nay đêm khuya nhớ lại nên muốn góp vào cho Wapka Việt Nam sau này thêm phần phong phú
Mình chỉ là yêu thích vọc vạch giao diện nên các bạn ai không thích bộ code này có thể miễn gạch đá dùm hêy


coppy bộ code sau và dán vào wap bạn nơi cần đặt chatbox (shoutbox)

thay id và nơi sau khi chat sẽ đến (wap chemvl mình là site 34 và id chat là 110711656 các bạn nhớ sửa lại)

Kiểu 1 (Thẳng Hàng)

<div class="k"> <div class="z"> ● <a href=":url-forum-110711656:">Phòng CHAT</a> - <a href="http://chemvl.wapka.mobi/site_12.xhtml">SMILEY</a> - <a href="http://chemvl.wapka.mobi/site_10.xhtml">BBCode</a></div> <a href="http://chemvl.wapka.mobi/site_24.xhtml">div class="x"><b><font color='#FF0059'>T</font><font color='#FE002B'>ạ</font><font color='#FF0800'>o</font><font color='#FF3700'> </font><font color='#FF6000'>c</font><font color='#FF8700'>h</font><font color='#FEAE00'>ữ</font><font color='#FFDA00'> </font><font color='#F0FF00'>n</font><font color='#C0FF00'>h</font><font color='#92FF00'>i</font><font color='#64FF00'>ề</font><font color='#33FF00'>u</font><font color='#00FF06'> </font><font color='#00FF3E'>m</font><font color='#00FF6E'>à</font><font color='#00FF9C'>u</font><font color='#00FFCA'> </font><font color='#00FFFC'>d</font><font color='#00D0FF'>ạ</font><font color='#00A6FF'>n</font><font color='#007FFE'>g</font><font color='#0058FF'> </font><font color='#002EFF'>B</font><font color='#0300FF'>B</font><font color='#3500FE'>c</font><font color='#6300FF'>o</font><font color='#9000FF'>d</font><font color='#C100FF'>e</font></b></div></a> <div id=""></div> <div class="mem"> <div id="chat" name="chat"> <div class="x" style="color: #f7f7f7;"><center>:forum-110711656/form/34:</center></div></div></div> <div style="padding:10px 2px 10px 2px;border-top:px solid #ddd" align="center">:paging:n=:get-n(1):,u=site_chat.xhtml?get-n=%n%&get-sx=:get-sx(n)::admin-hash-amp:#next :: <span class="c2">%first% %prev%</span><span class="c1"><t>%n%</t> <t>%n%</t> <t>%n%</t> <t>%n%</t> <t>%n%</t></span><span class="c2">%next% %last%</span>:/paging:</div> <div class="x"> <div class="b">:color-green::rand-beg:Hãy theo đuổi <b>ĐAM MÊ</b> - <b>THÀNH CÔNG</b> sẽ đến với bạn !:rand:Nên <b>Chia Sẻ</b> cho nhau những <b>Kinh Nghiệm Tốt</b> mà mình có:rand:Đừng bao giờ <b>LU MỜ</b> vì <b>MU LỜ</b> nhé!:rand:Nếu Chiến tranh xảy ra ở VN thì::br:Ai có súng dùng súng!:br:Ai có dao dùng dao!:br:Còn không có súng có dao:br::br:Thì đứng sau <b>GÀO</b> hỗ trợ =)):rand:Kính gửi Bác thân yêu!:br:Cả cuộc đời con luôn luôn khắc ghi và sống theo lời bác đã dạy::br:<b>Không có gì quý hơn độc lập tự do</b>:br:Và đến ngày hôm nay, hơn 1/3 cuộc đời con cũng đã hoàn thành tốt được 1/3 lời Bác, đó là::br: ° :br:<b>KHÔNG CÓ GÌ</b>.... :)):rand:Ngay cả tiền cũg nói lên bản chất con người của Trung Quốc...:br: <b>NHÂN DÂN TỆ</b> :br:Làm sao cứng cỏi bằng con người Việt Nam...:br: <b>VIỆT NAM ĐỒNG</b> :)) :)):rand:Cứ là <b>MÌNH</b> tại sao phải <b>NGHĨ</b>:rand:Cuộc sống viết tắt là <b>C/S</b>:br: <b>C</b> nghĩa là Cry:br: <b>S</b> nghĩa là Smile:br: Cuộc sống cần tồn tại 2 điều đó Smile and Cry:br: Không ai có thể cười mãi mà không Khóc:br: Cũng chẳng có ai khóc mà không Cười ^^:rand-end::/color:</div> :forumlist:f=110711656,s=:get-n(1):,l=10,t=--,n=Phòng chat đã được reset:: <div style="margin-right:5px;margin-left:5px"> <table cellspacing="0" cellpadding="0" width="100%" > <tr> <td width="62" class="imgc" valign="top"> <img src="%urlpicture%" width="50px" height="50px" style="border-radius:50px"/> </td> <td><div class="vb"><div class="arrl"></div> <b>%lname%</b><hr/><span name="fix">%text%</span><br/><font color="gray">%time%</font></div></td></tr></table></div> :: :/forumlist:</div> <div style="padding:10px 2px 10px 2px;border-top:px solid #ddd" align="center">:paging:n=:get-n(1):,u=site_chat.xhtml?get-n=%n%&get-sx=:get-sx(n)::admin-hash-amp:#next :: <span class="c2">%first% %prev%</span><span class="c1"><t>%n%</t> <t>%n%</t> <t>%n%</t> <t>%n%</t> <t>%n%</t></span><span class="c2">%next% %last%</span>:/paging:</div> </div>

Kiểu 2 (Qua Lại)

<div class="k"> <div class="z"> ● <a href=":url-forum-110711656:">Phòng CHAT</a> - <a href="http://chemvl.wapka.mobi/site_12.xhtml">SMILEY</a> - <a href="http://chemvl.wapka.mobi/site_10.xhtml">BBCode</a></div> <a href="http://chemvl.wapka.mobi/site_24.xhtml"><div class="x"><b><font color='#FF0059'>T</font><font color='#FE002B'>ạ</font><font color='#FF0800'>o</font><font color='#FF3700'> </font><font color='#FF6000'>c</font><font color='#FF8700'>h</font><font color='#FEAE00'>ữ</font><font color='#FFDA00'> </font><font color='#F0FF00'>n</font><font color='#C0FF00'>h</font><font color='#92FF00'>i</font><font color='#64FF00'>ề</font><font color='#33FF00'>u</font><font color='#00FF06'> </font><font color='#00FF3E'>m</font><font color='#00FF6E'>à</font><font color='#00FF9C'>u</font><font color='#00FFCA'> </font><font color='#00FFFC'>d</font><font color='#00D0FF'>ạ</font><font color='#00A6FF'>n</font><font color='#007FFE'>g</font><font color='#0058FF'> </font><font color='#002EFF'>B</font><font color='#0300FF'>B</font><font color='#3500FE'>c</font><font color='#6300FF'>o</font><font color='#9000FF'>d</font><font color='#C100FF'>e</font></b></div></a> <div class="mem"> <div id="chat" name="chat"> <div class="x" style="color: #f7f7f7;"><center>:forum-110711656/form/34:</center></div></div></div> <div style="padding:10px 2px 10px 2px;border-top:px solid #ddd" align="center">:paging:n=:get-n(1):,u=site_chat.xhtml?get-n=%n%&get-sx=:get-sx(n)::admin-hash-amp:#next :: <span class="c2">%first% %prev%</span><span class="c1"><t>%n%</t> <t>%n%</t> <t>%n%</t> <t>%n%</t> <t>%n%</t></span><span class="c2">%next% %last%</span>:/paging:</div> <div class="x"> <div class="b">:color-green::rand-beg:Hãy theo đuổi <b>ĐAM MÊ</b> - <b>THÀNH CÔNG</b> sẽ đến với bạn !:rand:Nên <b>Chia Sẻ</b> cho nhau những <b>Kinh Nghiệm Tốt</b> mà mình có:rand:Đừng bao giờ <b>LU MỜ</b> vì <b>MU LỜ</b> nhé!:rand:Nếu Chiến tranh xảy ra ở VN thì::br:Ai có súng dùng súng!:br:Ai có dao dùng dao!:br:Còn không có súng có dao:br::br:Thì đứng sau <b>GÀO</b> hỗ trợ =)):rand:Kính gửi Bác thân yêu!:br:Cả cuộc đời con luôn luôn khắc ghi và sống theo lời bác đã dạy::br:<b>Không có gì quý hơn độc lập tự do</b>:br:Và đến ngày hôm nay, hơn 1/3 cuộc đời con cũng đã hoàn thành tốt được 1/3 lời Bác, đó là::br: ° :br:<b>KHÔNG CÓ GÌ</b>.... :)):rand:Ngay cả tiền cũg nói lên bản chất con người của Trung Quốc...:br: <b>NHÂN DÂN TỆ</b> :br:Làm sao cứng cỏi bằng con người Việt Nam...:br: <b>VIỆT NAM ĐỒNG</b> :)) :)):rand:Cứ là <b>MÌNH</b> tại sao phải <b>NGHĨ</b>:rand:Cuộc sống viết tắt là <b>C/S</b>:br: <b>C</b> nghĩa là Cry:br: <b>S</b> nghĩa là Smile:br: Cuộc sống cần tồn tại 2 điều đó Smile and Cry:br: Không ai có thể cười mãi mà không Khóc:br: Cũng chẳng có ai khóc mà không Cười ^^:rand-end::/color:</div> :forumlist:f=110711656,s=:get-n(1):,l=10,t=--,n=Phòng chat đã được reset:: <script language="javascript"> x=%sn%; if(x%2==0) {txt='<div class="clear"></div><div style="margin-right:5px;margin-left:5px"><table cellspacing="0" cellpadding="0" width="" ><tr><td width="62" class="imgc" align="" valign="top"><span class=""><img src="%urlpicture%" width="50px" height="50px" style="border-radius:50px"/></span></td><td><div class="vb"><div class="arrl"></div><div style=""><b>%lname%</b></div><hr/><span name="fix">%text%</span><br/><font color="gray">%time%</font></td></tr></table></div>'} else {txt='<div class="clear"></div><div style="margin-right:5px;margin-left:5px"><table cellspacing="0" cellpadding="0" width="" align="right"><tr><td width="" align="right" style="margin-right:50px"><div class="vb"><div style=""><b>%lname%</b></div><hr/><span name="fix">%text%</span><br/><font color="gray">%time%</font><div class="arrr"></div></div></td><td width="62" class="imgc" align="right" valign="top"><span class=""><img src="%urlpicture%" width="50px" height="50px" style="border-radius:50px"/></span></td></tr></table></div>'}; document.write(txt) </script> :: :/forumlist:</div> <div style="padding:10px 2px 10px 2px;border-top:px solid #ddd" align="center">:paging:n=:get-n(1):,u=site_chat.xhtml?get-n=%n%&get-sx=:get-sx(n)::admin-hash-amp:#next :: <span class="c2">%first% %prev%</span><span class="c1"><t>%n%</t> <t>%n%</t> <t>%n%</t> <t>%n%</t> <t>%n%</t></span><span class="c2">%next% %last%</span>:/paging:</div> </div>

Đây là CSS của 2 STYLE này

<style> .vb{background-color:#fff;border-radius:8px; display:block; position: relative; margin-bottom: 15px; margin-bottom: 15px; padding: 5px; padding-top:10px; padding-bottom:10px; -webkit-box-shadow: 0 7px 5px -6px grey; -moz-box-shadow: 0 7px 5px -6px grey; box-shadow: 0 7px 5px -6px grey; border-right:1px solid#d7d7d7;border-left:1px solid#d7d7d7;border-top:1px solid#d7d7d7;} .arrr{ background: url("/img/1440/1440376_48f4a09513.png") no-repeat center; display:block; width: 7px; height: 13px; position: absolute; top: 25px; right: -7px; } .imgc img{border-radius:20px; padding: 2px; border: 1px solid #b1b1b1; width: 50px; height: 50px; } .if img{max-width:200px} .z{font-size:16px;background:#f6f7f8;line-height:normal;padding: 8px 5px 8px 5px;margin:0;color: #333;text-shadow: # 1px 1px 1px;font-weight: bold;border-bottom: 1px solid #E8E8E8;position: relative;}.z a{color:#000;font-weight:bold;text-shadow: 0 0 0px grey; }.k{border-radius:5px;margin:0px 6px 6px 6px;background: none repeat scroll 0% 0% #FFF;overflow:hidden;word-wrap:break-word;border:1px solid rgba(0, 0, 0, .18);#ADB2BA;} .x{background:#fff;border-bottom:1px solid#f0f0f0;border-top:1px solid#;padding:8px 8px;overflow:hidden;zoom:1}</style>