Membuat Buku Tamu Ver. 2

Artikel kali ini adalah pesanan dari sahabat bloger saya, dia meminta saya agar di buatkan tutorial "Buku Tamu yg nempel di dinding" hehehehhe!! Sebenarnya punya saya itu hasil nyolong di blog orang kemudian saya rombak sendiri Cuman nyuri kodenya duank :D hehehhehe, tetapi lupa nyolongnya dimana (kalau ada yang merasa sebagai penciptanya saya berterima kasih dan minta maaf juga heheh )..,,

Fungsi dari buku tamu yang nempel di dinding ( cicak kaleeeee ) atau saya menamakannya Buku Tamu Slide adalah untuk mengirit tempat di blog sobat. Langsung saja cekidot dot

1. Seperti biasa pertama-tama login ke Blog sobat, jangan ke Facebook.

2. Klik tata letak atau layout.

3. Pilih Edit HTML.

4. Sebelum memulai pengeditan alahkah baiknya sobat membackup data sobat terlebih dahulu, caranya pilih Download Template Lengkap.

5. Cari kode ]]></b:skin> agar lebih mudah sobat bisa menekan Ctrl + F, kemudian paste kode tersebut di sebelah tulisan Find.


6. Copy code di bawah kemudian paste di atas kode ]]></b:skin>


#chat{position:fixed; top:20px; z-index:+1000}
* html #chat{position:relative}
.chat-click{height:191px; width:53px; float:left; cursor:pointer; background:url(http://remoxp.hostzi.com/th_Chatbox.png) no-repeat;}

.chatbox{float:left; border:0px solid #; background:  #faeba8 ; padding:25px 0 50px 25px}
.chatbox a {text-decoration: none;}

Catatan :

• Tulisan yang berwarna orange adalah jarak atas kotak surat 
• Kode yang berwarna hijau adalah lebar dan tinggi dari tombol slide
• Tulisan yang berwarna merah itu diganti dengan url gambar tombol milik sobat
• Tulisan yang berwarna biru adalah kode warna dari background Buku tamu milik sobat, jika sobat ingin menggantinya dengan gambar tinggal menyisipkan kode ini url(link background sobat letakkan disini)no-repeat

7. Simpan Template.

8 Kembali ke Elemen Laman.

9. Pilih HTML/JavaScript , kemudian masukkan kode di bawah.

<script type="text/javascript">
function showHidechat(){
var chat = document.getElementById("chat");
var w = chat.offsetWidth;
chat.opened ? movechat(0, 30-w) : movechat(20-w, 0);
chat.opened = !chat.opened;
}
function movechat(x0, xf){
var chat = document.getElementById("chat");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
chat.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("movechat("+x+", "+xf+")", 10);}
}
</script>
<div id="chat">
<div class="chat-click" onclick="showHidechat()"> </div>
<div class="chatbox">
<center>


<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe frameborder='0' height='465' scrolling='auto' src='http://www6.shoutmix.com/?m1rz4_4zr1m' title='m1rz4_4zr1m' width='300'>
<a href='http://www6.shoutmix.com/?m1rz4_4zr1m'>View shoutbox</a>
</iframe>
<br /><a href='' title='get your own free shoutbox chat widget at shoutmix!'/><br />
<!-- End ShoutMix -->


</center>
<span style="float:right">
<a href="javascript:showHidechat()">
close
</a></span>
</div></div>

<script>
var chat = document.getElementById("chat");
chat.style.right = (30-chat.offsetWidth).toString() + "px";
</script>

Catatan :
Ganti kode yang berwarna biru dengan kode Shoutmix atau kode - kode dari program lainnya.

10. Simpan (pelengkap :D)

Kalau ada kesalahan tolong dikoreksi.
Terima kasih atas pesenannya, heheh mayan nambah jumlah artikel.