Membuat Chat Box Tersembunyi V 2

Dalam rangka melanjutkan postingan sebelumnya yaitu Membuat Chat Box, kali ini saya akan share sebuah tutorial tepatnya Membuat  Chat Box Tersembunyi V 2. Bagi sobat yang belum mempunyai Chat Box, sobat terlebih dahulu baca postingan saya sebelumnya yaitu Membuat Chat Box. Ok langsung saja kita ke inti postingan yang saya bahas ini.

Ikuti langkah - langkah dibawah ini untuk mengetahui bagaimana cara membuat Chat Box tersembunyi.

• Pertama yang harus sobat lakukan adalah Login dulu ke Blogger.com
• Kemudian sobat pergi ke Tata Letak.
• Pilih edit Gadget/Widget Chat Box.
• Hal yang harus sobat lakukan selanjutnya adalah menambahkan kode berikut :   

<!-- right chatbox hidden from http://saeful13.blogspot.com/ START -->
<style>
#hcr {
position:fixed;
top:100px;
z-index:+1000;
}
* html #hcr {position:relative;}
.hcrtab {
height:130px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i1260.photobucket.com/albums/ii570/Saeful13/Chat-Box5.gif') no-repeat;
}
.hcrcontent {
float:left;
border:2px solid #000000;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcr(){
var hcr = document.getElementById("hcr");
var w = hcr.offsetWidth;
hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);
hcr.opened = !hcr.opened;
}
function movehcr(x0, xf){
var hcr = document.getElementById("hcr");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcr.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);}
}
</script>
<div id="hcr">
<div class="hcrtab" onclick="showHidehcr()"> </div>
<div class="hcrcontent">




 Disini sobat simpan kode Chat Box




<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->


</span>
<span style="float:right">
<a href="javascript:showHidehcr()">
[close]
</a>
</span>
</div>
</div>
</div>
<script type="text/javascript">
var hcr = document.getElementById("hcr");
hcr.style.right = (30-hcr.offsetWidth).toString() + "px";
</script>
<!--END -->

•  Langkah terakhir sobat Save

 Keterangan

• Sobat ganti teks berwarna biru dengan url blog sobat.
• Sobat juga dapat mengganti  border/garis pinggir chat box  sesuai warna yang sobat inginkan atau untuk kode warnanya disini. Caranya sobat ganti tulisan yang berwarna kuning dengan warna yang sobat inginkan..
• Sobat juga bisa mengganti gambar Chat Box di bawah ini dengan cara mengganti teks yang berwarna merah dengan kode yang telah saya sediakan di bawah. 

Gambar Chat Box yang dapat sobat pilih :

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYSqdftsnX0baT-01oTmnbRjkCbM7ci2qi-JbMh4a4Pu4vlHruiqt1SDLEQEFTll5VuagwzjMumE_UciOfbwIiXPKWGj8T5VNqovLGcuEnMR-WICzldwL4dUtQbn3y41-1Lt_YXpc6Igw/s1600/cbred-LEFT+copyasasd.png

http://i1260.photobucket.com/albums/ii570/Saeful13/Chatbox-1.png

http://i1260.photobucket.com/albums/ii570/Saeful13/CHATbox.png

http://i1260.photobucket.com/albums/ii570/Saeful13/GUESTBOOK.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxqIEYhE69nV1q-ATausrsKeNeWICnsxBTtUiL6isUnFQN12v-RE5D80McbCJAVB2WCjR2JG6dNrUEE_Ys-1DW2R7Mb6PXWp32cLCX4cgjNelB1ZP2W6UfrYviL747qNGY-CJlwBxUgN0E/

Sekian tutorial kali ini.. Semoga bermanfaat sob..

• Tweet
• Share
• Share
• Share
• Share