ariesz moenandar: Membuat Shoutbox/ Buku Tamu di Samping Kanan dan Kiri Blog

Hai Sobat Blogger apa kabar ??? Berhubung tadi saya mencoba membuat shoutbox di blog saya dan berhasil tampil,sekarang giliran saya membagi-bagikan hasilnya atau tutorial-tutorialnya kepada sobat sekalian. Mungkin Sebaiknya baca juga tentang Bagaimana Membuat Breaking News di Blog.
Membuat Shoutbox/ Buku Tamu memang bisa di buat dengan berbagai cata ada yang langsung kita dapatkan di penyedia layanan shoutbox itu sendiri dan tinggal memasang script itu di blog kita, 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 Ini Tutorialnya :
Pertama :

Kedua :

Masuk ke Menu Rancangan / Design pada Dashboard Anda

Ketiga :

Untuk Meletakkan Buku Tamu Disisi Kanan Blog :

Tambahkan Script/ Kode berikut di blog Sobat

<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://i1227.photobucket.com/albums/ee440/danghilal/idesainer/shoutbox-1.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">

<br />
<div class="hc-credit">
<span style="float:left">

<span >
<span > Get this</span>
<a href="http://idesainer.blogspot.com/2012/02/cara-membuat-buku-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>

Untuk Memasang buku tamu di sisi sebelah kiri blog anda :
Tambahkan Script/ Kode berikut di blog Sobat

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

<br />
<div class="hc-credit">
<span style="float:left">

<span >
<span > Get this</span>
<a href="http://idesainer.blogspot.com/2012/02/cara-membuat-buku-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>

Keterangan :
1. ubah kode KODE SHOUTMIX ANDA DISINI dengan kode buku tamu / shoutbox Anda
2. Jika Anda Belum Punya Kode Shoutbox anda bisa membuatnya disini atau di Fibox.
Terakhir :
Save Template / Rancangan Blog Anda