Membuat Chat Box/Buku Tamu di Sisi Kanan atau Kiri Blog

Membuat Buku Tamu memang bisa dilakukan dengan berbagai macam cara, ada yang meletakkan langsung di sidebar blognya ada juga yang meletakkan dengan Tombol atau gambar floating, ada juga yang meletakkan dengan Tombol Pop Up. Tapi Kali ini kami akan mempostingkan Bagaimana Cara Memasang Buku Tamu di Sisi Kanan atau Kiri di Blog anda.

Berikut langkah-langkah detailnya :
Pertama :
Anda Login terlebih dahulu ke akun Blogger Anda

Kedua :
Pergi ke Rancangan / Design pada Dashboard Anda

Ketiga :
Untuk Meletakkan Buku Tamu Disisi Kanan Blog :
Tambahkan kode HTML / Script di bawah ked widget blog anda (Anda sudah pasti tahu)

<!-- right hidden chatbox by http://playboy1730.blogspot.com/ START -->

<style>

#hcr {

position:fixed;top:100px;

z-index:+1000;

}

* html #hcr {position:relative;}

.hcrtab {height:100px;width:30px;

float:left;

cursor:pointer;

background:url('http://i1108.photobucket.com/albums/h405/christian410/ghtrf.png') no-repeat;

}

.hcrcontent {

float:left;

border:2px solid #003e82;

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">

<!-- KODE SHOUTMIX ANDA DISINI -->

<br />

<div class="hc-credit">

<span style="float:left">

<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->

<span >

<span > Get this</span>

<a href="http://playboy1730.blogspot.com/2013/04/membuat-chat-boxbuku-tamu-di-sisi-kanan.html" target="_blank">

<span class="Apple-style-span" > Desaign1</span>

</a></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>

<!-- right hidden chatbox by http://playboy1730.blogspot.com/ END -->

Untuk Memasang buku tamu di sisi sebelah kiri blog anda :
Tambahkan kode HTML / Script di bawah ini di widget blog Anda

<!-- left hidden chatbox by http://playboy1730.blogspot.com/ START -->

<style>

#hcl {

position:fixed;top:100px;

left:0px;

z-index:+1000;

}

* html #hcl {position:relative;}

.hcltab {height:100px;width:30px;

float:left;

cursor:pointer;

background:url('http://i1108.photobucket.com/albums/h405/christian410/ghtrf.png') no-repeat;

}

.hclcontent {

float:left;

border:2px solid #790909;

background:#f3f6f7;

padding:10px;

}

.hc-credit {font-size:9px}

.hc-credit a {text-decoration:none}

</style>

<script type="text/javascript">

function showHidehcl(){

var hcl = document.getElementById("hcl");

var w = hcl.offsetWidth;

hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);

hcl.opened = !hcl.opened;

}

function movehcl(x0, xf){

var hcl = document.getElementById("hcl");

var dx = Math.abs(x0-xf) > 10 ? 5 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

hcl.style.left = x.toString() + "px";

if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}

}

</script>

<div id="hcl">

<div class="hclcontent">

<!-- KODE SHOUTMIX ANDA DISINI -->

<br />

<div class="hc-credit">

<span style="float:left">

<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->

<span >

<span > Get this</span>

<a href="http://playboy1730.blogspot.com/2013/04/membuat-chat-boxbuku-tamu-di-sisi-kanan.html" target="_blank">

<span class="Apple-style-span" > Desaign1</span> </a>

</span>

</span>

<span style="float:right">

<a href="javascript:showHidehcl()">

[close]

</a>

</span>

</div>

</div>

<div class="hcltab" onclick="showHidehcl()"> </div>

</div>

<script type="text/javascript">

var hcl = document.getElementById("hcl");

hcl.style.left = (30-hcl.offsetWidth).toString() + "px";

</script>

<!-- left hidden chatbox by http://playboy1730.blogspot.com/ END -->

Keterangan :
Ganti Kode yang berwarna biru dengan kode buku tamu / shoutbox Anda

Terakhir :
Simpan Template / Rancangan Blog Anda

Sekian langkah-langkahnya, Jangan lupa dipasang ya ..
Terima Kasih

Posted in: Antivirus | Firewall | Security,Tips Trick di Blog