Memasang Hidden Chatbox Pada Sidebar Blog

Hello Sobat Blogger, Apa kabar ? Semoga dalam keadaan sehat wal'afiat selalu ya sob ... Tidak terasa bulan Puasa sudah makin dekat aja ni sob, Untuk itu sebelumnya saya mengucapkan "mohon maaf lahir dan bathin" ya sob jika selama ini saya punya salah baik yang disengaja maupun yang tidak disengaja ...

Pada postingan kali ini saya akan memposting tentang bagaimana cara memasang Chatbox pada Blogspot. Sedikit berbeda dengan Chatbox tersembunyi yang dimilik oleh beberapa blogger. Chatbox dalam tutorial saya ini tombol untuk membuka chatbox tersembunyi tersebut tidak melayang di kanan atau kiri halaman blog kita (Floating left - Floating Right).

Jadi, apa yang berbeda dari chatbox tersembunyi yang menggunakan fasilitas floating chatbox dengan chatbox pada tutorial saya ini, pada tutorial saya ini saya sedikit memodifikasinya dimana tombol untuk membuka chatbox berada di sidebar (widget) blog atau bisa juga di halaman postingan sobat. Untuk melihat previewnya silahkan berkunjung ke Demo Hidden Chatbox (Lihat Sebelah Kanan bawah adala gambar chatbox dan coba klik untuk melihat chatboxnya).

Ok, langsung saja kita mulai tutorialnya ...
Pertama-tama Copy Script Hidden Chatbox dibawah dan edit terlebih dahulu kode tersebut di notepad :

<!-- Mulai Hidden Widget -->
<style type="text/css">
.gb_fixed{
position:fixed;
top:10px; /*jarak dari atas*/
right:0px; /*jarak dari samping kanan*/
z-index:+1000;
}
* html .gb_fixed {position:relative;}
#hidden_gb {
display:none;
border:2px solid #A5BD51; /*ketebalan dan warna kotak*/
background:#F0F0F0; /*warna latar*/
padding:5px 10px 0px 10px;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb" cellpadding="0" cellspacing="0">
<tr><td>
<!-- Gambar Atas -->
<div style="text-align:center;"><a href="javascript:void(0)" onclick="gb_showHideGB()" title="Close/Tutup"><img style="border:0px; higth:50px; width:100px; height:auto;" alt="Guestbook" src="http://nicki-maraj.com/chatbox.png" /></a></div>

Kode Shoutbox atau Buku Tamu

<br/>
<script type="text/javascript" src="http://khamardos.googlecode.com/files/hiddenwidget.js"></script>
</td></tr></table></div>
<!-- Selesai Hidden Widget -->

 Note :              : Ubah warna dan ukuran sesuai dengan blog kamu (Klik Kode Warna HTML)
                       : Masukkan Kode Chatbox yang bisa didapat di Cbox.ws , Shoutmix.com, dll
                       : Ubah dengan gambar yang kamu inginkan (Akan tampil pada Chatbox)

Lalu Berikutnya ...

1. Dari Dashboard blogger, pilih Tata Letak - Elemen Halaman.
2. Kemudian klik Tambah Gadget dan pilih HTML/Javascript.
3. Paste Script Hidden Widget tersebut di form HTML/Javascript Lalu Simpan (Bagusnya jangan diberi nama).

     5. Lalu yang terakhir adalah tombol untuk membuka chatboxnya. Copy kode dibawah ini dan Paste di sidebar (widget) Blog atau bisa di postingan blog.

<a href="javascript:void(0)" onclick="gb_showHideGB()"><img src="http://i655.photobucket.com/albums/uu271/spantibelspku/lomba%20blog/shoutbox.png" /></a>

Jangan Lupa di Save.

Bagaimana ? Menarik g ? Jika iya jangan lupa +1 nya ya sobat, dan jika artikel ini berguna jangan lupa bagi-bagi dengan teman-teman yang ada di Facebook, dan Twittermu ya sob ....

.:: 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 With Jquery Di Sidebar
• 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 With Jquery Di Sidebar
• 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