Buku Tamu Slide

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(URL TOMBOL) 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 CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="300" height="145" src="http://www7.cbox.ws/box/?boxid=334764&amp;boxtag=9wsmre&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#00681A 1px solid;border-bottom:0px" id="cboxform"></iframe></div>
<div><iframe frameborder="0" width="300" height="400" src="http://www7.cbox.ws/box/?boxid=334764&amp;boxtag=9wsmre&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#00681A 1px solid;" id="cboxmain"></iframe></div>
</div>
<!-- END CBOX -->


</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 CBOX atau kode - kode dari program lainnya.

10. Simpan (pelengkap :D)

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

Revisi :
akhirnya seletah berkelana mencari sumber linknya, malam ney saya ketemu dengan orang yang telah memberikan ilmu ini....!! ini dia link dmn saya mendapatkan cara membuat Buku tamu nempel di dinding heheheh
http://www.tutorialblogging.co.cc/2010/04/membuat-kotak-chatting-tersembunyi.html

ada beberapa alasan knp saya lupa, dan tidak di muat disini, jika sobat ingin tahu silahkan hubungi saya lewat e-mail atau YM saya!! sekali lagi saya mohon maaf...!!

cari artikel lainnya, klik yang di bawah