Tuto: Guna Dua Jenis Chatbox Tapi Paparkan Hanya Satu Pada Satu Masa

      Salam semua, apa khabar?. Sihat? Semoga kamuorang sehat-sehat seja ar?.. hoho.. kali nie aku mo share sedikit tentang bagaimana hendak gunakan dua jenis chatbox yang berbeza tapi dalam masa yang sama cuma perlu paparkan satu sahaja pada satu-satu masa, untuk lebih jelas lagi, korang boleh refer dekat shoutbox di sebelah kanan nie, korang akan dapati aku gunakan dua jenis chatbox "shoutmix", versi baru dan yang lama, tapi setiap satu disembunyikan dan boleh di akses dengan mengklik tab tersebut.

 Untuk melakukannya, mudah sahaja antara yang korang perlukan.

1.  Mempunyai dua jenis shoutbox/chatbox/shoutmix yang berbeza.
2.  Mengetahui lebar sidebar korang, atau di mana korang hendak letakkan chatbox ini (tidak berapa penting, tapi sekiranya tahu, adalah lebih baik )       

Kemudian, Copy kod di bawah dan paste di widgte "HTML/Javascript".

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){$(".tab_content").hide();$("ul.tabs li:first").addClass("active").show();$(".tab_content:first").show();$("ul.tabs li").click(function(){$("ul.tabs li").removeClass("active");$(this).addClass("active");$(".tab_content").hide();var a=$(this).find("a").attr("href");$(a).fadeIn();return false})});</script>
<style type="text/css">
ul.tabs{margin:0;padding:0;float:left;list-style:none;height:32px;border-bottom:1px solid #999;border-left:1px solid #999;width:100%;-moz-border-radius:8px 8px 0 0;-webkit-border-top-left-radius:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-left-radius:0;-webkit-border-bottom-right-radius:0;-goog-ms-border-radius:8px 8px 0 0;border-radius:8px 8px 0 0}ul.tabs li{float:left;margin:0;padding:0;height:31px;line-height:31px;border:1px solid #999;border-left:none;margin-bottom:-1px;overflow:hidden;position:relative;background:#e0e0e0;-moz-border-radius:8px 8px 0 0;-webkit-border-top-left-radius:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-left-radius:0;-webkit-border-bottom-right-radius:0;-goog-ms-border-radius:8px 8px 0 0;border-radius:8px 8px 0 0}ul.tabs li a{text-decoration:none;color:#000;display:block;font-size:1.2em;padding:0 20px;border:1px solid #fff;outline:none;-moz-border-radius:8px 8px 0 0;-webkit-border-top-left-radius:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-left-radius:0;-webkit-border-bottom-right-radius:0;-goog-ms-border-radius:8px 8px 0 0;border-radius:8px 8px 0 0}ul.tabs li a:hover{background:#ccc}html ul.tabs li.active,html ul.tabs li.active a:hover{background:#fff;border-bottom:1px solid #fff}.tab_container{border:1px solid #999;border-top:none;overflow:hidden;clear:both;float:left;width:100%;background:#fff;-moz-border-radius:0 4px 4px 4px;-webkit-border-top-left-radius:0;-webkit-border-top-right-radius:4px;-webkit-border-bottom-left-radius:4px;-webkit-border-bottom-right-radius:4px;-goog-ms-border-radius:0 4px 4px 4px;border-radius:0 4px 4px 4px}.tab_content{padding:5px;font-size:1.2em}</style>
<ul class="tabs">
    <li><a href="#tab1">Chatbox 1</a></li>
    <li><a href="#tab2">Chatbox 2</a></li>
</ul>
<div class="tab_container">
    <div id="tab1" class="tab_content">
     
        [KOD CHATBOX NO 1]
     
    </div>
    <div id="tab2" class="tab_content">
   
        [KOD CHATBOX NO2]
   
    </div>
 
    <span style="margin:2px;float:right;font:3px;color:gray;"> powered by <a href="http://hazzdeath.blogspot.com/2011/11/tuto-guna-dua-jenis-chatbox-tapi.html">HazzDeath</a></span>
</div>

Ambil kod Chatbox anda yang pertama, tue dan gantikan pada [KOD CHATBOX NO 1] dan yang kedua pada [KOD CHATBOX NO 2]

Jangan lupa tukar perkataan Shoutbox 1 dan Shoutbox 2 dengan tajuk yang sesuai ok?

Kod asal adalah hasil tutorial Soh Tanaka, untuk dokumentasi penuh korang boleh rujuknya di sini