0
Bagi Bagi Info - 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.
Yap kita akan langsung mulai tutornya ya.


1. Login account Blogspot.
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
Demikian tutornya seputar dengan Tutorial Membuat CBOX atau Chat Box di Blogspot. Mudah tidak ? Pasti mudah dong. Semoga bermanfaat bagi anda pembaca terkait dengan posting ini.

Post a Comment

 
Top