Memasang Hidden Chatbox With Jquery Di Sidebar

Hello sobat blogger, apa kabar ? Semoga selalu dalam keadaan sehat wal'afiat ya, Ok pada postingan sebelumnya saya sudah mengepost bagaimana cara membuat Hidden Chatbox yang Tombol Opennya berada di sidebar blog kita (baca : Memasang Hidden Chatbox Pada Sidebar Blog). Nah untuk postingan kali ini saya akan mengepost tentang modifikasi chatbox lainnya.

Sama halnya dengan hidden Chatbox, Tutor kali ini menggunakan Jquery Effect dimana tampilan yang dibuat akan lebih menarik. Dan ditambah lagi, tombol untuk membuka Chatboxnya bisa di letakkan di sidebar blog sobat. Untuk lebih jelas kita bisa lihat Previewnya. Silahkan Klik Tombol ChatBox di bawah ini dan lihat apa yang akan terjadi...

Jika sobat tertarik, maka lakukan langkah dibawah :
1. Pertama-tama Copy kode dibawah ini (Dan edit keterangannya) :

<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<style>
.simple_overlay {

/* must be initially hidden */
display:none;

/* place overlay on top of other elements */
z-index:10000;

/* styling */
background-color:#333;
width:auto;
min-height:200px;
border:1px solid #666;

/* CSS3 styling for latest browsers */
-moz-box-shadow:0 0 90px 5px #000;
-webkit-box-shadow: 0 0 90px #000;
}

.simple_overlay .close {
background-image:url(http://flowplayer.org/tools/img/overlay/close.png);
position:absolute;
right:-15px;
top:-15px;
cursor:pointer;
height:35px;
width:35px;
}

#triggers img {
cursor:pointer;
-moz-border-radius:4px;
-webkit-border-radius:4px;

}
</style>


<div id="triggers">
<img src="http://nicki-maraj.com/chatbox.png" rel="#mies1"/>

</div>

<div class="simple_overlay" id="mies1">

YOU FRAME HERE

</div>
<script>
/basics.html#document_ready
$(document).ready(function() {

$("img[rel]").overlay({
effect: 'drop',
mask: '#789'
});
});
</script>
<script>
// create custom animation algorithm for jQuery called "drop"
$.easing.drop = function (x, t, b, c, d) {
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
};
// loading animation
$.tools.overlay.addEffect("drop", function(css, done) {

// use Overlay API to gain access to crucial elements
var conf = this.getConf(),
overlay = this.getOverlay();

// determine initial position for the overlay
if (conf.fixed) {
css.position = 'fixed';
} else {
css.top += $(window).scrollTop();
css.left += $(window).scrollLeft();
css.position = 'absolute';
}

// position the overlay and show it
overlay.css(css).show();

// begin animating with our custom easing
overlay.animate({ top: '+=55', opacity: 1, width: '+=20'}, 400, 'drop', done);

/* closing animation */
}, function(done) {
this.getOverlay().animate({top:'-=55', opacity:0, width:'-=20'}, 300, 'drop', function() {
$(this).hide();
done.call();
});
}
);
$("img[rel]").overlay({
effect: 'drop',
mask: '#789'
});
</script>

Note :           : Silahkan ganti dengan icon gambar Chatbox yang kamu suka
                      : Masukkan Kode Chatbox yang bisa didapat di Cbox.ws , Shoutmix.com, dll (Bisa juga diisi dengan kode item / Objek lain selain chatbox seperti Iklan, Animasi Jam, dll)

2. Setelah selesai di edit, dari Dashboard blogger, pilih Tata Letak - Elemen Halaman.
3. Kemudian klik Tambah Gadget dan pilih HTML/Javascript.
4. Paste script yang telah sobat edit tersebut di form HTML/Javascript Lalu Simpan.
    Dan lihat hasilnya ...

Nah, sudah berhasil ?, Alhamdulillah .... Itu effectnya benar-benar cool banget dah sob, keren banget tampilan saat munculnya. Dan jika tutorial ini bermanfaat bagi sobat jangan lupa kasih +1 nya ya sob, ehehehhehee ....

.:: 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
• Show Hide Chatbox Efek Jquery di Sidebar Blog
• 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 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
• Show Hide Chatbox Efek Jquery di Sidebar Blog
• Memasang Simple Menu Navigasi Horizontal
• Memasang Floating Share Button
• Tag H1 Untuk Judul Postingan dan Judul Blog
• 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