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 : Unknown ~ 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




20 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

  13. Thanks for sharing this great this information, I would highly impressed to learn your post and this is very helpful for me.
    oxygen cylinder price in bd
    patient care at home
    oxygen support at home
    Thank You

    BalasHapus
  14. Thank you very much for your information. I have gained great information from your post.
    This site is a very good site. I am sure that you will benefit from this web site.
    Whatever you are looking for can be helpful. Nursing Home Care BD Service It is a Renowned for Nurse Care at Home.

    home care services in Dhaka
    home nursing service in bangladesh
    nursing home service
    nurse supply in dhaka
    nursing home care services
    patient care home service
    nursing services at home
    day night nursing home care

    BalasHapus
  15. Thank you very much for your information. I have gained great information from your post.
    This site is a very good site. I am sure that you will benefit from this web site.
    Whatever you are looking for can be helpful. Click Here
     
    Nursing home care

    Home care

    Patient care home service

    BalasHapus
  16. Your website is very informative. I have benefited a lot from your website.Many people have commented here. From their comments I have learned about many important websites.So many of these corona epidemics require medical nursing home care services and medical oxygen services.So if anyone needs that service and is interested to know about these services.
    Then you can follow the links.

    1, Nursing Home Care Services provide all over bangladesh.

    2, Medical Nursing Home Care service dhaka Bangladesh.

    3, Medical Oxygen Cylinder home delivery all over Bangladesh.

    4, Oxygen Cylinder and concentrator provide all over Dhaka BD.

    5, Medical Equipment sell all over Dhaka Bangladesh.

    BalasHapus
  17. Thank you very much for your information. I have gained great information from your post.
    This site is a very good site. I am sure that you will benefit from this website.
    Whatever you are looking for can be helpful. Healthy blog, thanks for the post. We offer to you Oxygen Cylinder...

    Medical oxygen cylinder This is such a great resource that you are providing and you give it away for you! Medical oxygen cylinder|

    BalasHapus
  18. Thank you very much for your information. I have gained great information from your post.
    This site is a very good site. I am sure that you will benefit from this website.
    Whatever you are looking for can be helpful. Healthy blog, thanks for the post. We offer you nursing home care,

    Patient care home service BD

    Best home care BD

    Medical equipment

    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.