gravatar

Panduan membuat Chatbox seperti facebook

 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($) {
      $(&#39;a[rel*=facebox]&#39;).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> <!-- /block-inner, /block -->
    </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;'>
    <!--tukar_chatbox_anda_sendiri-->

    <!-- Begin ShoutMix - http://www.shoutmix.com -->
    <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/>
    <!-- End ShoutMix -->


    <!--tukar_chatbox_anda_sendiri_tamat-->                     
    </div>
         <div class='slider'>
     
         <a class='toggleup' href='#'><img border='0' src='http://2.bp.blogspot.com/_S7IXT0y_EGM/TOuS990D-QI/AAAAAAAAALs/7XeYgj5ZSn4/s1600/chat.png' style='width: 260px; height: 30px;'/></a>                                 
                                            </div>
    </div>
    </div>
    </div>
    </div> <!-- /block-inner, /block -->
                        </div>
                     </div>
                 </div>

        </html>

5. Kemudian anda tukar Code Chatbox anda dengan mengantikan bahagian yang saya warnakan hijau

6. Save

gravatar

buat ni kena expand widget ke ta ? huhu . ta bape paam ):

gravatar

yup semua ni kena ubah kat
expand widget

gravatar

salam from Makkah....


canteekkk...keep it up and dont give up yahhh...

keep updating news...



waslam

gravatar

sye xdpt nk buat chat dgn btl.. npe ye??

Entri Populer

Label