Cara Membuat Buku tamu/Shoutbox di blog

 Cara Membuat Buku tamu/Shoutbox di blog
Selamat sore sobat sekalian

Untuk Posting kali sekarang saya akan share tentang Cara Membuat Buku Tamu di Sisi Kanan atau Kiri Blog  seperti gambar di bawah ini.,




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 :
masuk ke layout / Tata letak pada Dashboard Anda

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


UNTUK Shotbox/Buku tamu Di sebelah kanan masuk kan Java scrip berikut.,,

No Kode HTML / Scripts




<!-- right hidden chatbox by http://munir-houseproduction.blogspot.com/ START -->
<style>
#hcr {
position:fixed;top:150px;
z-index:+1000;
}
* html #hcr {position:relative;}
.hcrtab {height:250px;width:30px;
float:left;
cursor:pointer;
background:url('http://iconblog.googlecode.com/files/shoutbox-1%20upload2.png') no-repeat;
}
.hcrcontent {
float:left;
border:5px 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://munir-houseproduction.blogspot.com/2012/07/cara-membuat-buku-tamushoutbox-di-blog.html" target="_blank">
<span class="Apple-style-span" > Desaign by HOUSE Production</span>
</a></span>
<span style="float:right">
<a href="javascript:showHidehcr()">
[close]
</a>
</span>
</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://munir-houseproduction.blogspot.com/ END -->

Untuk yang di sebelah kiri masuk kan kode berikut.,


No Kode HTML / Scripts




<!-- left hidden chatbox by http://munir-houseproduction.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://i1227.photobucket.com/albums/ee440/danghilal/idesainer/shoutbox-1.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://munir-houseproduction.blogspot.com/2012/07/cara-membuat-buku-tamushoutbox-di-blog.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://munir-houseproduction.blogspot.com/ END -->

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

Untuk membuat kode shoutmix klik Disini  lalu daftar dan anda akan di beri kode javascript., nah kode itulah yang harus anda masukkan.,.

Gampang kan sekian tutorial dari saya.,., Semoga bermanfa'at.,.,