Cara Membuat ChatBox/Buku Tamu Tersembunyi Di Samping Blog

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

 

 بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Beberapa waktu yang lalu saya pernah menulis dan membagikan sebuah artikel tentang Cara Membuat ChatBox/Buku Tamu di Blog silahkan kunjungi kalau sobat belum membacanya. sebenarnya posting ini merupakan kelanjutan dari postingan tersebut. Nah kali ini saya saya berbagi tentang Cara Mudah Memasang ChatBox/Buku Tamu Tersembunyi di Samping Blog. kenapa saya bilang sangat mudah, karena tips ini tidak perlu ribet meng utak atik alias Edit Template Html. jadi sangat Cocok untuk blogger pemula seperti saya ini. Untuk contoh nyatanya anda bisa lihat di samping  kanan blog saya. Oke langsung saja disimak tutorialnya di bawah ini ya :

Cara Mudah  Memasang ChatBox/Buku Tamu Tersembunyi di Samping Blog.

1. Masuk ke Account Blogger Anda.

2. Pilih Tata Letak.

3. Pilih Add Gadget/Tambahkan Gadget.

4. Klik Html/Java Script.

5. Copy Kode di bawah ini dan Paste di Dalamnya.

<style type="text/css"> #gb{ position:fixed; top:50px; z-index:+1000; } * html #gb{position:relative;}
.gbtab{ height:100px; width:30px; float:left; cursor:pointer; background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat; } .gbcontent{ float:left; border:2px solid #A5BD51; background:#F5F5F5; padding:10px; } </style>
<script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; gb.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
 LETAKKAN KODE SHOUTBOX, FOLLOWBOX, DLL TERSERAH ANDA DISINI
<div style="text-align:right"> <a href="javascript:showHideGB()"> [tutup] </a> </div>
</div>
<script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script></div>

6. Simpan /Save.

Catatan :
Tulisan warna Biru silahkan isi kode Cbox , Shoutbox ataupun Follobox Anda. 

SELAMAT MENCOBA.. HAPPY BLOGGING..

Artikel Terkait