17 Agustus 2011

Pin It

Show Hide Chatbox Efek Jquery di Sidebar Blog

"Preview Show Hide Chatbox Jquery"
Hello sobat Blogger, Apa kabar ? Semoga dalam keadaan sehat wal'afiat selalu dech sob. Ok untuk postingan saya kali ini, Saya ingin memposting tutorial bagaimana cara membuat Show Hide Chatbox dengan efek Jquery, Sebenarnya ini sebuah modifikasi dari pengembangan efek Show hide dengan menyisipkan sebuah objek (Chatbox) didalamnya (baca : Membuat Simple Chatbox dengan Show hide). Lalu yang membedakan dengan fasilitas sebelumnya, untuk tampilan show hide pada chatbox kali ini terkenal lebih elegan dan simple dengan disertai efek jquery yang membuat show hide chatbox ini menjadi lebih enak dipandang mata (Heeleeehhh ... ).

Sebenarnya, pada postingan saya sebelumnya saya sudah share beberapa tutorial bagaimana membuat chatbox dengan berbagai efek yang digunakan untuk fasilitas chatting di blog kita, diantaranya membuat simple hidden chatbox di sidebar blog kita (baca : Membuat Hidden Chatbox di Sidebar Blog) dan hidden yang sama tapi menggunakan efek jquery (baca : Membuat Hidden Chatbox dengan efek Jquery di Sidebar Blog).

Untuk Previewnya lihat gambar diatas. Jika sobat tertarik, silahkan ikuti langkah berikut :

1. Login ke Blogger.
2. Lalu dari Dashboard, pilih Rancangan/Tata Letak
3. Tambah Gadget/Add Gadget
4. Pilih HTML JAVA SCRIPT
5. Masukkan Script Berikut Di dalamnya :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});


});
</script>
<style>
/* ---------------
Simple Slide panel with jQuery
---------------------------------- */
#panel {
height: auto;
background:#000;
width: auto;
display: none;
padding: 7px;
border: #0C0;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
}
.slide {
margin: 0;
padding: 0;
border-top: solid 4px #f90;
background: url(https://lh3.googleusercontent.com/-XGxvD-bjtLk/TXo6ZGh056I/AAAAAAAAAUI/zvBMp0DrML4/s1600/btn-slide.png) no-repeat center top;
}
.btn-slide {
background: url(https://lh5.googleusercontent.com/-Ia33wJE4nHY/TXo1KNUSasI/AAAAAAAAAUE/Uss0CKLZP9U/s1600/white-arrow.gif) no-repeat right -50px;
text-align: center;
width: 144px;
height: 31px;
padding: 10px 10px 0 0;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.active {
background-position: right 12px;
}
</style>

<div id="panel">
Kode Cbox Disini

</div>
<p class="slide"><a href="#" class="btn-slide">Buku Tamu</a></p>
 Note : Kode Cbox Disini : Ganti dengan kode Chatbox yang dapat diperoleh di Cbox.ws, Shoutmix.com, dll


6. Lalu setelah mempaste kode tersebut, klik Simpan.

Bagaimana, berhasil ? OK, Jangan lupa share dengan teman-temanmu di Facebook, twitter, dll. Thanks

.:: HAPPY BLOGGING SOBAT ::.

Share To lintasberita.com | Khamardos Blog

Bagikan Jika Artikel ini menarik, Diharapkan agar memberikannya kepada teman2 anda di Facebook

Artikel Lainnya :

9 comments:

Klik Untuk Lihat Komentar

i'Q'baL on 17 Agustus 2011 03.55 mengatakan...

makasih banget infonya mas,,ntar dipraktekin :D

kumpulan puisi on 17 Agustus 2011 16.24 mengatakan...

Nice ino Gan,, langsung tak praktek untuk blog saya yang lain,. makasi ya,.

KERAJAANHOSTING MASA DEPAN HOSTING INDONESIA on 18 Agustus 2011 02.19 mengatakan...

Gan..
Ane pengen request postingan neh..
Ane minta dibikinin postingan 1 link dengan 2 tujuan..
tapi link yang terbuka ditab/window baru cuma link yang ke 2 aja..
sedangkan link yang pertama tetap dihalaman yang sama..
bisa gak gan??
;))

Dadang Herdiana on 18 Agustus 2011 09.10 mengatakan...

Sip dah... itu pengenmabangan awal yg saya buat, yg ni http://tip-triksblogger.blogspot.com/2011/07/fixed-guestbook-slide-effect-with.html saya but biar lebih familiar but para blogger.... :)

Mufi_ed on 19 Agustus 2011 23.38 mengatakan...

@KERAJAANHOSTING MASA DEPAN HOSTING INDONESIA
Insya Allah nyusul sob requestnya ...

ngalor ngidul on 21 Agustus 2011 20.24 mengatakan...

Thanks gan..
Klo gak yang ne pake script yang ini aja gan..
Tapi di modifikasi dikit agar pas buku tamunya di tutup sekali sekalian memberikan perintah agar terbuka satu tab/window baru...
bisa gak ya??!!!

teknikone on 28 Desember 2011 21.36 mengatakan...

mantab gan udah ane pake keren..
salam gan

ojan on 4 Januari 2012 23.42 mengatakan...

nice share fid,
eh dibantu dong fid, di bikin banner nya dong fid
http://onthesport.net//index.php
makasih ya fid

oh iya aku ada rencana mau ke pku, besok jalan bareng ya

Hafis on 19 Mei 2012 12.49 mengatakan...

nice info.....
mampir ke sini: http://fcbarcelona.blogdetik.com

Visca Barca y Visca FCBI y Visca Spain

:: Komentar Anda ::

Silahkan isi Komentar anda pada Form Komentar dibawah ini !!!
Kritik dan Saran yang membangun sangat saya harapkan dari sobat semua !!!

NO SPAM PLEASE !!!

Senyum :)) tunggu :)] centil ;)) kedip ;;) unjuk gigi :D hai ;) week - Jelek :p menangis :((
smile :) gawat :( Love - cinta :X briken love - patah hati =(( ooo - ounght :-o bingung :-/ kiss - cium :-* nothing :|
Gila - stres 8-} pusing ~x( takut :-t tenju - pukul b-( marah :-L marah kali x( sangat lucu =))

[[ Form Komentar Klasik ]]

Jika Anda Ingin Berlangganan Artikel Dari Situs Ini,
Silahkan Ketik Email Anda Pada Form Di Bawah Ini :

 
Copyright © 2009 Black Nero is Designed by Ipietoon | Tweaking by Mufied