Cara Membuat Chat Box Melayang di Blog

Comment Box adalah Suatu bentuk kotak komentar CBOX bro yang lagi populer saat ini bro, apalagi dengan tampilan melayang, membuat banyak pengunjung yang berkreasi memberikan  komentar yang seru, asyik dan mungkin menantang, silahkan perhatikan gambar berikut bro :

Gimana Bro ? ? ? Tertarik ? Jika lo pada tertarik bro, silahkan simak aja untaian berikut :

1. Masuk ke Dashboard Blog Lo bro 

     >> Pilih Rancangan 

      >> Edit Tata Letak 

      >> Add Gadget  

     >> Pilih HTML/Javascripts  

     >> Pastekan Kode yang Lo copy tadi bro >> Simpan Deh bro kode dikit ini . . .

         

2. silahkan copy paste kode dibawah ini bro lalu ikuti langkah 1.

<!-- Mulai Hidden Widget --> 
<style type='text/css'> 
.raxterblog_fixed{
position:fixed;
top:35px; /*jarak dari atas*/
right:0px;
z-index:+1000;
}
* html .raxterblog_fixed {position:relative;}
#hidden_raxterblog {
display:none;
border:2px solid #616258; /*ketebalan dan warna kotak*/
-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
background:#f1f1ea; /*warna latar*/
padding:3px 10px 0px 10px;
}
</style> 
<div class='raxterblog_fixed'> 
<table cellpadding='0' cellspacing='0' id='hidden_raxterblog'> 
<tr><td> 
<!-- Gambar Atas --> 
<div style='text-float:right'><a href='javascript:void(0)' onclick='raxterblog_showHideraxterblog()' title='Close/Tutup'><img alt='Guestbook' src='http://blog.akakom.ac.id/marcell/files/close.png' style='border:0px;  width:auto; height:auto;'/></a></div> 

<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id='cboxdiv' style='text-align: center; line-height: 0'>
<div><iframe allowtransparency='yes' frameborder='0' height='305' id='cboxmain5-678531' marginheight='2' marginwidth='2' name='cboxmain5-678531' scrolling='auto' src='http://www5.cbox.ws/box/?boxid=678531&amp;boxtag=n5g599&amp;sec=main' style='border:#ababab 1px solid;' width='200'/></div>
<div><iframe allowtransparency='yes' frameborder='0' height='75' id='cboxform5-678531' marginheight='2' marginwidth='2' name='cboxform5-678531' scrolling='no' src='http://www5.cbox.ws/box/?boxid=678531&amp;boxtag=n5g599&amp;sec=form' style='border:#ababab 1px solid;border-top:0px' width='200'/></div>
</div>
<!-- END CBOX --> 

<br/> 
<script src='http://raxterblog.googlecode.com/files/chat-box-melayang.js' type='text/javascript'/> 
</td></tr></table></div> 
<!-- Gambar Samping Bawah --> 
<div class='raxterblog_fixed' style='z-index:+5'> 
<a href='javascript:void(0)' onmouseover='raxterblog_showHideraxterblog()'> 
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWdhXBt5MeC1cUhyHbbPWhxZwtZX51Q_NVEj5Vhutu8QkkxXUAY_JmDzuuzmvlFaplPMCTsLYn0nJJvj1r0AHiGTsl-UaMTzGya9FCaFiyHc9vlmdRmyoqKfb6RNwhOt_YMeo_WuS4BPDo/s1600/commentbox.gif' style='border:0px;'/></a> 
</div> 
<!-- Selesai Hidden Widget -->



    >> Kemudian Save Gadget dan lihat hasilnya oke bro . . .


3. Atau Bro lo bisa Letakkan Kode diAtas Tepat diAtas Kode </body>


4. Jika Hanya ingin Muncul di Homepage Saja bro, Letakkan diAtas Kode </body> Kode 
     Berikut :


<b:if cond='data:blog.url == data:blog.homepageUrl'>

<!-- Mulai Hidden Widget --> 
<style type='text/css'> 
.raxterblog_fixed{
position:fixed;
top:35px; /*jarak dari atas*/
right:0px;
z-index:+1000;
}
* html .raxterblog_fixed {position:relative;}
#hidden_raxterblog {
display:none;
border:2px solid #616258; /*ketebalan dan warna kotak*/
-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
background:#f1f1ea; /*warna latar*/
padding:3px 10px 0px 10px;
}
</style> 
<div class='raxterblog_fixed'> 
<table cellpadding='0' cellspacing='0' id='hidden_raxterblog'> 
<tr><td> 
<!-- Gambar Atas --> 
<div style='text-float:right'><a href='javascript:void(0)' onclick='raxterblog_showHideraxterblog()' title='Close/Tutup'><img alt='Guestbook' src='http://blog.akakom.ac.id/marcell/files/close.png' style='border:0px;  width:auto; height:auto;'/></a></div> 

<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id='cboxdiv' style='text-align: center; line-height: 0'>
<div><iframe allowtransparency='yes' frameborder='0' height='305' id='cboxmain5-678531' marginheight='2' marginwidth='2' name='cboxmain5-678531' scrolling='auto' src='http://www5.cbox.ws/box/?boxid=678531&amp;boxtag=n5g599&amp;sec=main' style='border:#ababab 1px solid;' width='200'/></div>
<div><iframe allowtransparency='yes' frameborder='0' height='75' id='cboxform5-678531' marginheight='2' marginwidth='2' name='cboxform5-678531' scrolling='no' src='http://www5.cbox.ws/box/?boxid=678531&amp;boxtag=n5g599&amp;sec=form' style='border:#ababab 1px solid;border-top:0px' width='200'/></div>
</div>
<!-- END CBOX --> 

<br/> 
<script src='http://raxterblog.googlecode.com/files/chat-box-melayang.js' type='text/javascript'/> 
</td></tr></table></div> 
<!-- Gambar Samping Bawah --> 
<div class='raxterblog_fixed' style='z-index:+5'> 
<a href='javascript:void(0)' onmouseover='raxterblog_showHideraxterblog()'> 
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWdhXBt5MeC1cUhyHbbPWhxZwtZX51Q_NVEj5Vhutu8QkkxXUAY_JmDzuuzmvlFaplPMCTsLYn0nJJvj1r0AHiGTsl-UaMTzGya9FCaFiyHc9vlmdRmyoqKfb6RNwhOt_YMeo_WuS4BPDo/s1600/commentbox.gif' style='border:0px;'/></a> 
</div> 
<!-- Selesai Hidden Widget -->

</b:if>

4. Jika Hanya ingin Muncul di Postingan Saja bro, Letakkan diAtas Kode </body> Kode 

     Berikut :

<b:if cond='data:blog.pageType == "item"'>

<!-- Mulai Hidden Widget --> 
<style type='text/css'> 
.raxterblog_fixed{
position:fixed;
top:35px; /*jarak dari atas*/
right:0px;
z-index:+1000;
}
* html .raxterblog_fixed {position:relative;}
#hidden_raxterblog {
display:none;
border:2px solid #616258; /*ketebalan dan warna kotak*/
-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
background:#f1f1ea; /*warna latar*/
padding:3px 10px 0px 10px;
}
</style> 
<div class='raxterblog_fixed'> 
<table cellpadding='0' cellspacing='0' id='hidden_raxterblog'> 
<tr><td> 
<!-- Gambar Atas --> 
<div style='text-float:right'><a href='javascript:void(0)' onclick='raxterblog_showHideraxterblog()' title='Close/Tutup'><img alt='Guestbook' src='http://blog.akakom.ac.id/marcell/files/close.png' style='border:0px;  width:auto; height:auto;'/></a></div> 

<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id='cboxdiv' style='text-align: center; line-height: 0'>
<div><iframe allowtransparency='yes' frameborder='0' height='305' id='cboxmain5-678531' marginheight='2' marginwidth='2' name='cboxmain5-678531' scrolling='auto' src='http://www5.cbox.ws/box/?boxid=678531&amp;boxtag=n5g599&amp;sec=main' style='border:#ababab 1px solid;' width='200'/></div>
<div><iframe allowtransparency='yes' frameborder='0' height='75' id='cboxform5-678531' marginheight='2' marginwidth='2' name='cboxform5-678531' scrolling='no' src='http://www5.cbox.ws/box/?boxid=678531&amp;boxtag=n5g599&amp;sec=form' style='border:#ababab 1px solid;border-top:0px' width='200'/></div>
</div>
<!-- END CBOX --> 

<br/> 
<script src='http://raxterblog.googlecode.com/files/chat-box-melayang.js' type='text/javascript'/> 
</td></tr></table></div> 
<!-- Gambar Samping Bawah --> 
<div class='raxterblog_fixed' style='z-index:+5'> 
<a href='javascript:void(0)' onmouseover='raxterblog_showHideraxterblog()'> 
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWdhXBt5MeC1cUhyHbbPWhxZwtZX51Q_NVEj5Vhutu8QkkxXUAY_JmDzuuzmvlFaplPMCTsLYn0nJJvj1r0AHiGTsl-UaMTzGya9FCaFiyHc9vlmdRmyoqKfb6RNwhOt_YMeo_WuS4BPDo/s1600/commentbox.gif' style='border:0px;'/></a> 
</div> 
<!-- Selesai Hidden Widget -->

</b:if>

5. Selesai sudah deh bro Tips Blogging ini . . .

Selamat Mencoba ya bro ! ! !