Shoutbox ink pada blogger di sisi kanan dan kiri








           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://sobatfauza.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://file-fauza.googlecode.com/files/Shout%20Box%20Ink%20sisi%20kanan.png') no-repeat;

}

.hcrcontent {

float:left;

border:2px solid #1242B1;

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://www.sobatfauza.co.vu/2013/03/shoutbox-ink-pada-blogger-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://sobatfauza.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://sobatfauza.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://file-fauza.googlecode.com/files/Shout%20Box%20Ink%20sisi%20kiri.png') no-repeat;

}

.hclcontent {

float:left;

border:2px solid #1242B1;

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://www.sobatfauza.co.vu/2013/03/shoutbox-ink-pada-blogger-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://sobatfauza.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