Cara Membuat Chat Box Melayang di Blog

Tweet

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 ! ! !

Judul: Cara Membuat Chat Box Melayang di Blog
Rating: 100% based on 999998 ratings. 57 user reviews.
Ditulis Oleh Maha Putra Rusydinal

Lo Sedang Membaca Artikel Bro Tentang Cara Membuat Chat Box Melayang di Blog
Jika Lo Suka Artikel RaxterBlog bro, Silahkan Masukkan E-mail lo dibawah ini bro untuk Berlangganan Gratis Via E-mail, Dengan begitu lo akan mendapat kiriman artikel baru dari RaxterBlog bro.
Terima Kasih bro Telah Berkunjung
Salam Blogging ya bro ! ! !