Membuat Buku Tamu Slide, Unik, Keren (terbaru) di Blog

Satria Perwira    6/12/2011    Trixs Blogging   

Membuat Buku Tamu Slide, Unik, Keren (terbaru) di Blog

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>


MASUKKAN CODE CBOX, ATAU  CODE LAIN DARI PROGRAM PESAN LAIN DISINI

</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 :

Untuk mendapatkan code program pesan silahkan kunjungi alamat dibawah ini dan daftar :

http://www.cbox.ws/

http://www.shoutmix.com/
http://shoutcamp.com/


10. Simpan (pelengkap :D)

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

Artikel Dilindungi

by Rafi Aldiansyah Asikin