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
6. Yang belum punya akun CBOX, Klik disini
<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh57Pp1sxIogtftnv1MVZzTqN-wm3bHhuCRliK_dOiLlldbvCbdysT7LVBhuuylyimdyqxjmdtrkeRKHvLB4zOCmzqRB55gEjS2MAF8kbXwm2vTijXuDNfmjVwZWs4wzBR6Mp5E-9p_I9I/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>
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
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 !