Home » , » Tutorial membuat CBOX Tersembunyi di blog

Tutorial membuat CBOX Tersembunyi di blog

Mempercantik tampilan blog Anda adalah salah satu hal yang harus dilakukan agar pengunjung blog betah baca - baca di blog Anda. Nah, tutorial satu ini adalah tutorial untuk membuat chat box namun tersembunyi di sebelah kanan blog Anda. Tapi sebelum membuat cboxnya tersembunyi ikuti dulu langkah - langkahnya disini. Jika sudah, ikuti langkah - langkah berikut:

1. Loginpada blogger
2. Tata Letak
3. Tambah Gadget
4. HTML/Javascript
5. Pasang kode di bawah ini

<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}* html #gb{position:relative;}

.gbtab{
height:150px;
width:50px;
float:left;
background:url('http://1.bp.blogspot.com/-Fu1GTJiqjAs/Tk9GPChUlhI/AAAAAAAAAJo/Rc01LxQqJZQ/s1600/2131wkl.png') no-repeat;
}

.gbcontent {
float:left;
border:1px solid #000000;
-moz-border-radius-bottomleft:5px;
-webkit-border-radius-bottomleft:5px;
-o-border-radius-bottomleft:5px;
-khtml-border-radius-bottomleft:5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
background: #F2F2F2; url() no-repeat bottom;
padding:10px;
}

</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
gb.opened = !gb.opened;
}function moveGB(x0, xf){

var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}
}</script>

<div id="gb">
<div class="gbtab" onmouseover="showHideGB()"> </div>

<div class="gbcontent">
<center>
MASUKAN CODE SCIPT CBOX ANDA DI SINI !
<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://christiantatelu.blogspot.com/2012/03/cara-membuat-buku-tamu-auto-hide-di.html"> widget! </a></span>
</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>

</div>



6. Yang belum punya akun CBOX, Klik disini

Selesai Deh...

Ket:
  • Ganti Tulisan yang berwarna MERAH dengan kode Cbox sobat
  • Untuk mengubah gambar tabnya, ganti tulisan berwarna HIJAU
Sisipkan Komentar anda Di Blog ini ya :D
Anda sedang mencari hunian strategis dan nyaman di pusat kota jakarta? Saya sarankan untuk memilih Green Pramuka City, karena Green Pramuka City Hunian Strategis dan Nyaman di Pusat Kota. Baca ulasan review terkait dengan Green Pramuka City Hunian Strategis dan Nyaman di Pusat Kota di situs RenSEO.

0 comments:

Post a Comment

Terima Kasih atas kunjungan dan komentarnya pada Blog ini. Thanks atas setiap Komentar, Masukkan, Saran, dan Kritik Yg dapat membangun blog ini agar lebih baik lagi kedepannya. Berkomentarlah sesuai dengan Isi Bahasan Artikel. Mohon dengan Sangat Kepada Sobat-sobat untuk tidak berkomentar Yg berbau unsur:
- Sara
- Pornografi
- No Spam !!! [Komentar menyertakan link aktif akan otomatis terdelete]
Terima Kasih atas Kunjungannya Sobat,,
Salam Sukses dari Kami !