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 :