Home » » Cara Membuat Buku Tamu Model Sliding

Cara Membuat Buku Tamu Model Sliding

Hello pengunjung oktri Blog,,,Seperti yang Anda semua ketahui bahwa ada berbagai cara untuk membuat tampilan buku tamu atau shoutmix chat saat terbuka.

Pada tutorial kali ini kita coba membuat tampilan shoutmix chatnya dengan model
sliding. Contohnya bisa Anda lihat diblog klik disini pada sisi sebelah kiri.

Berikut ini langkah untuk membuatnya :

1. Rancangan -> Tambah Gadget ->
Pilih HTML/JavaScript.

2. Masukkan ke dalam kontennya
kode berikut ini lalu simpan.


<style type="text/css">
#shout{
position:fixed;
bottom:1px;
left:1px;
z-index:+2000;
}
* html #shout{position:relative;}
.shouttab{
height:45px;
width:30px;
float:right;
background:url('http://3.bp.blogspot.com/-K1lgUE-WzoQ/TfbSMs74MDI/AAAAAAAAB8A/lzayq1jVHaM/s1600/arrayfloat.gif') no-repeat;}
.shoutcontent{
float:right;
border:2px solid #ccc;
background:#FFFFFF;
padding:5px;}
</style>
<script type="text/javascript">
function showHideSHOUT(){
var shout = document.getElementById("shout");
var w = shout.offsetWidth;
shout.opened ? moveSHOUT(20-w, 0) : moveSHOUT(0, 35-w);
shout.opened = !shout.opened;}
function moveSHOUT(x0, xf){
var shout = document.getElementById("shout");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
shout.style.left = x.toString() + "px";
if(x0!=xf){setTimeout("moveSHOUT("+x+", "+xf+")", 70);}
}
</script>
<div id="shout">
<div class="shouttab" onclick="showHideSHOUT()" title="Show/Hide"> </div>
<div class="shoutcontent">

KODE SHOUT ANDA LETAKKAN DI SINI.

<script type="text/javascript">
var shout = document.getElementById("shout");
shout.style.left = (30-shout.onsetWidth).toString() + "px";
</script></div></div>


KETERANGAN :
Masukkan kode buku tamu Anda pada
tempat yang disediakan.

Selamat mencoba dan tetap good luck!



Artikel Terkait:

3 komentar:

  1. kode buku tamunya apa gan?..
    ane gak ngertii !!

    BalasHapus
  2. Gan kode bukuu tamu tu yg mna?????

    BalasHapus
  3. Menurutku ini info yang menarik dan mudah diterapin.

    BalasHapus

Fivers

Selamat Datang Di OKTRI BLOG

Selamat datang di Blog saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya,apabila berkenan silahkan berkomentar dan follow blog saya,mari kita saling berbagi ilmu tentang apa saja...Selengkapnya tentang Tutorial Ini

Sekilas tentang penulis

Nama saya Oktri darmadi,saya seorang Mahasiswa S1 Teknik Informatika Di IBI DARMAJAYA Bandar Lampung.

Social Stuff

  • RSS
  • Twitter
  • Facebook
  • HOME
Oktri