Panduan membuat Chatbox seperti facebook : Tutorial-Zabidi Ali

Pertama sekali saya nak ingatkan pada anda semua,sebelum memulakan edit, saya sarankan kepada anda semua supaya Buckup file Theme anda terlebihdahulu.

Assalamualaikum semua hari saya nak berkongsi dengan anda bagaimana menambah Chatbox yang menyerupai facebook style.tetapi sesetengah template x dapat berfungsi dengan baik
contohnya flash / slider.. bergantung pada design template yang guna..

Contoh :- template design custom

1. Langkah pertama Go to :- Dashboard > Design > Edit HTML > Expand Widget Templates

2. Langkah pertama copy code dibawah dan pastekan sebelum code ini :- </head>

<script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/fbtemplatev1/script.js' type='text/javascript'/>
<script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/fbtemplatev1/jquery.js' type='text/javascript'/>
<script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/fbtemplatev1/facebox.js' type='text/javascript'/>
<script type='text/javascript'>
    jQuery(document).ready(function($) {
      $('a[rel*=facebox]').facebox()
    })
</script>

</head>

3. Cari code ini ]]></b:skin> dan pastekan code dibawah sebelum ]]></b:skin>

Contoh

/*dock*/

#dockbottoms{position:fixed;bottom:0px;right:0px;clear:both;width:0px;padding:0px 0 0;border:1px solid #ffffff;border-bottom:0;background-color:#fff;z-index:11000}
#dockbottoms-inner{float:left;width:100%;height:35px;padding:0;position:relative;background-color:
#ccc;overflow:visible}
#dockbottoms-inner .block{padding-bottom:0;margin-bottom:0;padding-top:5px}
#dockbottoms-inner
#dockbottom-first{margin-left:15px}
#dockbottoms-inner
#dockbottom-middle{}
#dockbottoms-inner
#dockbottom-last{}
#dockbottoms-inner.dockbottoms-1
.column{float:left;width:100%}
#dockbottoms-inner.dockbottoms-2
.column{display:block;float:left;margin:0 10px;width:47%}
#dockbottoms-inner.dockbottoms-3 .column{display:block;float:left;margin:0 14px;width:30%}
#chat-wrapper{width:240px;position:absolute;bottom:10px;right:30px;z-index:11002;text-align:center;border:0px solid #ffffff}
#chat{height:405px;background-color:#ffffff;text-align:left;display:none;}
.slider{position:relative;z-index:11003;height:18px;padding:0;background-color:#ffffff;margin-top:-5px}
.toggleup,
.toggledown{text-align:center;display:block;line-height:22px;background-color:#ffffff}
#dockbottoms li.collapsed,
#dockbottoms li.leaf{list-style-image:none;list-style-type:none;margin:0;padding:0.2em 0.5em 0 0}
#dockbottoms ul.menu{list-style-position:inside}
#page,
#closure-blocks{margin-left:auto;margin-right:auto;width:960px;text-align:left}
#dockbottoms a {padding:0px 5px 5px 5px;}

]]></b:skin>

4. Pastekan code dibawah ini di tengah </body> contoh </html> bahagian paling bawah sekali di sebut Footer

</body>

    <div id='dockbottoms'>
        <div class='dockbottoms-2 clearfix' id='dockbottoms-inner'>
        <div class='column' id='dockbottom-middle'>
        <div class='block block-system region-odd odd region-count-1 count-9' id='block-system-0'>
         <div class='block-inner'>
         <div class='content'>

    </div>
    </div>
    </div> 
    </div>
        <div class='column' id='dockbottom-last'>
        <div class='block block-block region-odd even region-count-1 count-10' id='block-block-1'>
        <div class='block-inner'>
        <div class='content'>
        <div id='chat-wrapper'>
        <div id='chat' style='display: none;'>
    

    
    <iframe frameborder='0' height='400' scrolling='auto' src='http://www1.shoutmix.com/?zabidi-ali' title='zabidi-ali' width='270'>
    <a href='http://www1.shoutmix.com/?zabidi-ali'>View shoutbox</a>
    </iframe>
    <br/><a href='http://www.shoutmix.com' title='Get your own free shoutbox chat widget at ShoutMix!'>ShoutMix chat widget</a><br/>
    

    
    </div>
         <div class='slider'>

         <a class='toggleup' href='#'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7p_DoSFCistx7nPdB9cT6ddt0JNcjUSAG9-pVvXUv_LG8kjeb0PG9ldreOLuzLLFZndnNXb0kEwynr2N8t15EUPOqEKmyMjzwSwHXoXLUinl1N6g6xYYVUesHSCZwFm60jXU3EAuFx5u5/s1600/chat.png' style='width: 260px; height: 30px;'/></a>
                                            </div>
    </div>
    </div>
    </div>
    </div> 
                        </div>
                     </div>
                 </div>

        </html>