Cara membuat buku tamu / Chat box popup overlay

Pada tutorial blogging kali ini saya ingin mempostingkan Cara membuat buku tamu / Chat box popup overlay.selain itu dengan kita menambahkan buku tamu merupakan sebuah fasilitas untuk pengunjung agar bisa berkomunikasi dengan pengunjung lainnya bahkan dengan admin.

Cara membuat buku tamu / Chat box popup overlay dengan efek PopUp.Sobat tinggal klik image chatbox di sidebar right maka akan muncul seperti ddengan gambar diatas.semoga bagi Sobat yang tertarik memasang widget ini, silahkan ikuti petunjuk dibawah ini dn sobat praktekan di blog sobat.

Langkah - Langkah :

1. Login Ke dashbord Blogger >>> Template >>>edit HTML
2. Klik centang expand template widget >> dan cari code ]]></b:skin>
3. Copy kode dibawah ini dan pastekan diatas code ]]></b:skin>
   
   

   .apple_overlay { 
   display:none; 
   background-image:url(http://i1191.photobucket.com/albums/z464/izoel1/transparentbackroundoverlay.png); 
   width:640px; 
   padding:35px; 
   font-size:11px;
   }
   
   
   .apple_overlay .close {
   background-image:url(http://i1191.photobucket.com/albums/z464/izoel1/close3.png);
   position:absolute; right:5px; top:5px;
   cursor:pointer;
   height:35px;
   width:35px;
   }
   

4. Setelah itu Save Template sobat >>> dan ke halaman layout
5. Klik add widget >>> scrool ke bawah pilih HTML / Javascript
6. Copy code dibawah ini dan Save widget



    <div id="triggers"><span style=" cursor:pointer; position:fixed; z-index:+10000; top:50px; right:0px; "><img src="http://3.bp.blogspot.com/--vbWxeDIMEk/TvuKgkiHphI/AAAAAAAAAPs/VuBTUMJ3Ir4/s1600/chat2.png" cursor="pointer" rel="#photo1"/></span></div>
    <div class="apple_overlay black" id="photo1">
    <div class="details">
    <p><center>

    (Code CBOX nya taruh disini sob) 

    <script>
    document.write(unescape('%4F%72%69%67%69%6E%61%6C%20%77%69%64%67%65%74%20%66%72%6F%6D%20%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%72%69%66%61%6C%64%68%69%61%77%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%22%3E%3C%62%3E%72%69%66%61%6C%64%68%69%61%77%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%3C%2F%62%3E%3C%2F%61%3E'));
    </script></center>
    </p>
    </div></div>
    <script src="http://rivalnote.googlecode.com/files/jquery.tools.min.js" " type="text/javascript"></script>
    <script type="text/javascript">
    $(function() {
    $(&quot;#triggers img[rel]&quot;).overlay({effect: &#39;apple&#39;});
    });</script>
    <script>
    $(function() {
    $("#triggers img[rel]").overlay({effect: 'apple'});
    });
    </script>

Instruction :

Sobat ganti code yang berwarna biru dengan code dengan alamat image sobat. 

Note Tambahan :

untuk hasil yang maksimal di tampilan rubah semua nominal kode width pada code
 CBOX sobat dari biasanya "..."px menjadi 80% atau 90% terserah sobat. 

Sekian postingan saya mengenai Cara membuat buku tamu / Chat box popup overlay
Jika sobat mem butuhkan bantuan saya ;

• twitter : @fernanhtb
• Gmail : fernanhtb@gmail.com