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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivxu55bPMlR1qd2D-GSaqOm05_QjhmlOKq-lLRjnU_bAVj5B1h2BTYplOFbuDJ_Zu1uUFJcilOYZNPCeuIJj3h29Si17HIHKCTdKQKU58lHQ9gp16KEXrpGcd0MN7UdkYZCCYuX0CbAuo/s1600/btn-slide.png) no-repeat center top;
}
.btn-slide {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD32zNy-LtQItvWhWaFQkBiwp-HP3_M-rl7YqIXcGA8D0MLBAJVf5Kwuifu12yoEzEmyMR5paMEqIaXDPz0qcS3FL9GZjjYdYUhIMSnszHrcV7kd0gu-T4uxVrSlxyeVswQobKQSccO8c/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 ::.

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

Artikel Lainnya :

Tip n Trik

• Menampilkan Akun Google Plus Di SERP Google
• Tips Mempersingkat Alamat URL Akun Google Plus
• Hubungkan Google Plus dengan Facebook | Twitter
• Menghubungkan Google Plus ke FB dan Twitter
• Twitteran Di Dashboard Akun Google Plus
• Cara Download Semua Album Foto di Facebook
• Tips Cara Mendapatkan Sitelink Google
• Membuat Sebuah Link Mengarah Ke Lebih 2 URL
• Maksud Pesan Error Saat Mengakses Internet
• Merubah Kotak Chat Facebook ke Versi Lama
• Memasang Simple Menu Navigasi Horizontal
• Memasang Floating Share Button
• Googlebot Access Blog Bermasalah
• Tag H1 Untuk Judul Postingan dan Judul Blog
• Mempercepat IDM Menggunakan IDM Optimizer
• Memasang Hidden Chatbox With Jquery Di Sidebar
• Memasang Hidden Chatbox Pada Sidebar Blog
• Memasang Sticky Tooltips Di Blogspot
• Tingkatkan Traffic Blog Lewat VLog | VIVANews
• Tampilan Halaman Label Hanya Judul Postingan
• Cara Transfer Foto Dari Facebook Ke Google+
• Tips SEO Terbaru di Tahun 2011
• Tutorial Membuat S3slider Images Show
• Akhirnya, Bisa Juga Join Ke Google+

Tutorial Blog

• Menampilkan / Menyembunyikan Sidebar Blog
• Membuat Sebuah Link Mengarah Ke Lebih 2 URL
• Memasang Simple Menu Navigasi Horizontal
• Memasang Floating Share Button
• Tag H1 Untuk Judul Postingan dan Judul Blog
• Memasang Hidden Chatbox With Jquery Di Sidebar
• Memasang Hidden Chatbox Pada Sidebar Blog
• Memasang Sticky Tooltips Di Blogspot
• Tampilan Halaman Label Hanya Judul Postingan
• Tutorial Membuat S3slider Images Show
• Memasang Tombol Google +1 di Blogspot
• Membuat Recent Post With Thumbnails
• Membuat Intro Page Pada Blogspot
• Membuat Tab View Pada Blogspot
• Kode Warna HTML
• Combine Show Hide Sidebar with Tooltips
• Navigasi Breadcrumb Pada Postingan Blog
• Membuat Tooltips Pada Sebuah Objek
• Membuat Menu Navigasi Dengan Tooltips
• Membuat Page Peel Effect Pada Blogger
• Related Post With Scrool Function
• Pesan Kamu Di Atas "Poskan Komentar's Box"
• Membuat Form Komentar Admin
• Membuat Rate Widget Pada Blog