Membuat Buku Tamu Menarik

Tutorial ini masih berhubungan dengan postingan saya Membuat Garis Tepi Gambar Berdisko. Buku tamu menarik yang saya maksud adalah buku tamu melayang yang merupakan widget shoutmix atau cbox tersembunyi di sisi kiri blog dan ditampil jika diklik. Contohnya bisa Anda lihat di sebelah kiri blog kesayangan saya ini.

Cara membuatnya adalah sebagai berikut:

Pilih Rancangan, lalu Tambah gadget HTML/Javascript.

Masukkan script berikut ke dalam gadget HTML/javascript tersebut:

<style type="text/css">
#gb{
position:fixed;
right:450px;
z-index:+1000;
}
#tabGb {
position:fixed;_position:relative;top:35px; left:0;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollright+ document.documentElement.clientWidth - offsetWidth); }
* html #gb{position:relative;}

.gbcontent{
float:left;
border:4px solid #fff;
background:#666;
-moz-border-radius:8px;
-webkit-border-radius:8px;
padding:3px;
}

</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 1500-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">

<div class="gbcontent">



<center><a href="javascript:void(0);" onclick="showHideGB()"><input type="button" value="Tutup Buku Tamu" class="close" /></a>

</center></div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.top = (-400-gb.offsetWidth).toString() + "px";
</script>

<div id="tabGb"><a href="javascript:void(0);" onclick="showHideGB()" title="Buku Tamu"><img alt="Buku Tamu" heigth="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif9Fx1b9gT7lvfVqLz3K9S4LLHWn59YMa4IwrcD4fOjU83LvBet5pvZ8dm3-lrTkViyZHYZT3DTzgC3jJQzl-d54t1P1SWN7mwqBLlUN4u3mit7k2ioNGljloZTErikX9-BSWfJQ-Gzbw/" id="flash0" class="flashgroup" /></a></div>

<style type='text/css'>
img.flashgroup {border:5px solid white;}
</style>

<script type='text/javascript'>
//<![CDATA[

/*
Script By http://www.javascriptkit.com/script/script2/flashimage.shtml
*/

//Warna garis yang berkelap-kelip
var flashcolor="#00FF00"
//Kecepatan garis berkelap-kelip (semakin rendah, semakin cepat)
var speed=150

/////No need to edit below here////
var curborder=new Array()
var increment=0
var flashobject=new Array()

if (document.all||document.getElementById){
while (document.getElementById("flash"+increment)!=null){
flashobject[increment]=document.getElementById? document.getElementById("flash"+increment).style : eval("document.all.flash"+increment+".style")
curborder[increment]=0
increment++
}
}

function flash(which){
if (curborder[which]==1){
flashobject[which].borderLeftColor=flashcolor
flashobject[which].borderBottomColor=flashobject[which].borderRightColor
}
else if (curborder[which]==2){
flashobject[which].borderTopColor=flashcolor
flashobject[which].borderLeftColor=flashobject[which].borderBottomColor
}
else if (curborder[which]==3){
flashobject[which].borderRightColor=flashcolor
flashobject[which].borderTopColor=flashobject[which].borderLeftColor
}
else if (curborder[which]==4){
flashobject[which].borderBottomColor=flashcolor
flashobject[which].borderRightColor=flashobject[which].borderTopColor
}

if (curborder[which]<=3)
curborder[which]++
else
curborder[which]=1
}

if (document.all||document.getElementById){
for (z=0;z<flashobject.length;z++){
var temp='setInterval("flash('+z+')",'+speed+')'
eval(temp)
}
}

//]]>
</script>

Simpan Gadgetnya dan selesai.

Penting: Perhatikan script yang saya beri warna. Tulisan berwarna kuning harus Anda ganti dengan kode shoutbox/chatbox Anda. Yang berwarna merah ganti dengan URL gambar yang terletak di sisi blog Anda. Tulisan yang berwarna hijau ganti dengan warna kelap-kelip gambar di samping blog Anda dan angka 150 ganti sesuai selera Anda.