Cara Membuat Chat Box Auto Hide Pada Blog

Cara Membuat Chat Box Auto Hide Pada Blog
Cara Membuat Chat Box Auto Hide Pada Blog - Sobat blogger, setelah tadi saya share artikel mengenai Cara Membuat Chat Box di Blog, sekarang saya akan buat artikel mengenai Cara Membuat Chat Box Auto Hide Pada blog. Berbeda dengan artikel sebelumnya, dimana chat box ditampilkan pada widget slidebar, kali ini chat box akan dibuat dengan efex auto hide di samping blog saat kursor mouse mengenai chat box sobat.


Kegunaan dari efek chat box auto hide ini adalah untuk meminimalkan / mengefisienkan halaman blog sobat agar terlihat lebih dinamis dan tidak terlalu panjang kebawah.

Jika sobat berminat pada efek auto hide chat box ini silahkan sobat ikuti langkah-langkah dibawah ini :

  • Login ke akun blog sobat masing-masing.
  • Pilih Tata Letak =>> Add Gedget/Tambah Gedget =>> Pilih HTML/Javascript.
  • Kemudian Copy kode dibawah ini :
<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}* html #gb{position:relative;}

.gbtab{
height:150px;
width:50px;
float:left;
background:url('http://i1108.photobucket.com/albums/h405/christian410/ghtrf.png') no-repeat;
}

.gbcontent {
float:left;
border:1px solid #000000;
-moz-border-radius-bottomleft:5px;
-webkit-border-radius-bottomleft:5px;
-o-border-radius-bottomleft:5px;
-khtml-border-radius-bottomleft:5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
background: #F2F2F2; url() no-repeat bottom;
padding:10px;
}

</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
gb.opened = !gb.opened;
}function moveGB(x0, xf){

var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 25 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 5);}
}</script>

<div id="gb">
<div class="gbtab" onmouseover="showHideGB()">
 </div>
<div class="gbcontent">
<center>
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="305" src="http://www7.cbox.ws/box/?boxid=799750&amp;boxtag=g5nje&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-799750" style="border:#ababab 1px solid;" id="cboxmain7-799750"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=799750&amp;boxtag=g5nje&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-799750" style="border:#ababab 1px solid;border-top:0px" id="cboxform7-799750"></iframe></div>
</div>
<!-- END CBOX -->
<br />
<div style="text-align:center">
<span style="float:right; color:#000000;"><a href="http://mari-berbagi244.blogspot.com/2013/04/cara-membuat-chat-box-auto-hide-pada.html" 

target="_blank">.: Get this widget! :.</a></span>

</div>
</center>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>

</div>

  • Ganti Kode yang berwarna Biru dengan Script kode Chat Box sobat.
  • Terakhir sobat klik Simpan. Kemudian liat hasilnya.

Demikian artikel mengenai Cara Membuat Chat Box Auto Hide Pada Blog. Semoga artikel yang saya buat ini dapat berguna dan bermanfaat bagi sobat yang membutuhkan. Jika ada kesulitan atau sobat mengalami error dalam pembuatan atau masih ada yang kurang jelas silahkan berkomentar di kolom komentar dan ChatBox. Salam Blogger.

Ditulis Oleh : Rosby Pranajaya M. Nandjan ~ Mari Berbagi

Mari Berbagi Sobat sedang membaca artikel tentang Cara Membuat Chat Box Auto Hide Pada Blog. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya


Silahkan masukan Email sobat untuk mendapatkan update artikel terbaru di blog ini :

Delivered by FeedBurner




23 komentar:

  1. 0 Komentar,, hihihi
    gan klo blog ane ga di join balik, gue jga Unfollow blog-nya,, hahaha.. salam sukses

    BalasHapus
  2. tutorial ulasan yang sangat membantu untuk pebisnis online...tks atas artikelnya.

    BalasHapus
  3. westjava27 berkunjung sebagai komunitas blogger bandung, ulasan-ulasan blog ini banyak sekali manfaatnya. tks telah mengijinkan wj27 berkomentar. Salam blogger.

    BalasHapus
  4. yang warna biru maksudnya di kemanain gan

    BalasHapus
  5. thanks gan infonya, sukses

    BalasHapus
  6. mantab buat buku tamu, terimakasih sob tutorialnya..

    BalasHapus
  7. mau ane coba kawan tutornya
    http://acemaxs31.com/obat-herbal-asam-urat/

    BalasHapus
  8. mantap dah artikelnya.. mau ane coba kawan

    BalasHapus
  9. Thnx bang.. salam dri newbie

    http://reinartanamorphic.blogspot.com/

    BalasHapus
  10. Terima kasih tutorialnya gan! Bisa juga di blog pribadi saya.

    BalasHapus
  11. tnks info nya gan.
    salam sukses semua.
    mampir aja ke situs ane..

    http://www.pembesarpenisalami.com

    BalasHapus
  12. thx infonya,kunjungi balik ya http://koekuy.blogspot.co.id/

    BalasHapus

Silahkan Sobat tinggalkan komentar dengan kata - kata yang Baik, Bijak dan Sopan.

Yang tidak diperbolehkan dalam berkomentar :
1. Komentar yang mengandung unsur SARA.
2. Komentar yang berbau PORNO.
3. Komentar Saling CACI MAKI.
4. Komentar yang Memasukan LINK IKLAN dan LINK AKTIF.

Saya harap Sobat dapat mematuhi aturan berkomentar yang saya buat. Jika ada komentar yang melanggar ketentuan tersebut diatas dan dianggap spam akan Saya Hapus. Atas kerjasama sobat sekalian saya ucapkan banyak Terima Kasih. Salam Sukses selalu untuk Sobat dan Salam Blogger.