..:: Cara Membuat Buku Tamu dan Lencana FB yang Keren Lagi Imut di Blog ::..

buku tamu dan juga lencana FB yang bisa nongol ngilang,,,nongol ngilang dan tentunya bikin hemat tempat lah...dan seterusnya....yang pengen2 ajah silahkan sedot ajah ya...h he..he...he..bagi yang udah tau maap mungkin ni postingan udah basi kok diulang ulang,,,,he...he...yah sekedar sharing ilmu ajah nih...buku tamu dan lencana Facebook udah saya moderasi dengan desain saya sampek berbagai ragam desain saya buat...ampek moh moh pokoknya...untuk itu yuk kita ikuti langkah langkahnya.....
Tapi perlu diketahui sebelumnya sobat harus punya dulu BUKU TAMU entah shoutmix, cbox, shoutbox dan lain sebagainya...pokoknya harus punya dulu.
lansung aja ke TKP di bawah ini :

Silahkan Sobat masuk Tata Letak tambah Gadged kemudian HTML/Java Script dan masuk kan kode di bawah ini :

1. kode bawah ini untuk buku tamu yang ke 1

<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:200px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i846.photobucket.com/albums/ab26/arifins/shotmiqq.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #088A08;
background:#000000;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

<!-- Isi Dengan buku tamu yang sudah sobat punya? entah dari shoutmix,shoutbox,ataupun cbox dls </iframe>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Keterangan :
*untuk top:20px; :merupakan jarak keatas antara bukutamu dengan sidebar
*untuk height:200px; : merupakan panjang dari Ikon buku tamu
*untuk width:30px; : merupakan jarak kesamping ikon dengan buku tamu
*untuk yang ini http://i846.photobucket.com/albums/ab26/arifins/shotmiqq.gif merupakan tombol/ikon buku tamu...jika sobat mau dibawah ini koleksi nya silahkan diambil

-http://i846.photobucket.com/albums/ab26/arifins/Facebook.png
-http://i846.photobucket.com/albums/ab26/arifins/fb.gif
-http://i846.photobucket.com/albums/ab26/arifins/shotmiqq.gif
-http://i846.photobucket.com/albums/ab26/arifins/shotmiqq.gif
-http://i846.photobucket.com/albums/ab26/arifins/SMIX-1.png
-http://i846.photobucket.com/albums/ab26/arifins/OKE.gif

*untuk yang ini merupakan #088A08 warna garis, sesuaikan dengan beground teplate sobat
*untuk yang ini merupakan warna beground buku tamu #000000 silahkan diganti warna sesuai selera sobat, jika belum tau kode warna silahkan cari tau DISINI
*untuk yang ini silahkan isi dengan buku tamu milki sobat <!-- Isi Dengan buku tamu yang sudah sobat punya? entah dari shoutmix,shoutbox,ataupun cbox dls </iframe>

2. Kode yang kedua untuk lencana FB atau pun buku tamu yang kedua juga bisa

kodenya :

<style type="text/css">
#hitsukeFX{
position:fixed;
top:300px;
z-index:+1000;
}
.hitsukeFXtab{
height:200px;
width:30px; float:left;
cursor:pointer;
background:url('http://i846.photobucket.com/albums/ab26/arifins/fb.gif') no-repeat;
}

.hitsukeFXcontent{ float:left;
border:2px solid #088A08;
background:#000000;
padding:10px;
}

</style> <script type="text/javascript">
function showHidehitsukeFX(){
var hitsukeFX = document.getElementById("hitsukeFX");
var w = hitsukeFX.offsetWidth;
hitsukeFX.opened ? movehitsukeFX(0, 30-w) : movehitsukeFX(20-w, 0);
hitsukeFX.opened = !hitsukeFX.opened;
}

function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 10);} }

</script>
<div id="hitsukeFX"> <div class="hitsukeFXtab" onclick="showHidehitsukeFX()"> </div>
<div class="hitsukeFXcontent">



<div style="text-align:right">
<a href="javascript:showHidehitsukeFX()"> [close] </a>
</div>
</div>
</div>

<script type="text/javascript"> var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px"; </script>

keterangan :
*untuk top:300px; :merupakan jarak keatas antara bukutamu dengan sidebar
*untuk height:200px; : merupakan panjang dari Ikon buku tamu
*untuk width:30px; : merupakan jarak kesamping ikon dengan buku tamu
*untuk yang ini http://i846.photobucket.com/albums/ab26/arifins/fb.gif merupakan tombol atau ikon lencana fbnya jika ingin lebih bagus lagi silahkan sobat berkarya sendiri
*untuk yang ini merupakan #088A08 warna garis seuaikan dengan template sobat,agar lebih indah dan menarik
*untuk yang ini merupakan warna beground buku tamu #000000 silahkan diganti warna sesuai selera sobat, jika belum tau kode warna silahkan cari tau DISINI
*untuk yang ini  silahkan isi dengan lencana FB anda, jika sobat belum punya silahkan membuat lencana di Fb sobat , dan perlu diketahui sobat jika sobat membuat lencana Fb untuk sekarang ini gak tau kenapa gak muncul gambar foto seperti punya saya, kenapa bisa begitu...ya gak taulah....!!!tapi sobat pasti bertanya kenapa bisa punyaku ada fotonya? gini saya punya trik seketika itu bikin lencana Fb kok gak muncul2 terus gambarnya, saya akal aja gambar di lencana Fb waktu buat simpan dulu aja gambarnya jadi JPEG dan silahkan sobat simpan di photobucket cari aja kodenya seperti punya ku seperti ni http://i846.photobucket.com/albums/ab26/arifins/facebook-2.png dan ganti aja kode yang sudah sobat simpan tadi di photobucket,lihat hasilnya...