Selamat Datang di Fadilrubikers Blog

Selamat datang, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan di blog saya ini. Terima kasih telah berkunjung di blog saya, silahkan berkomentar dan follow blog saya, mari kita saling sharing pengetahuan disini.

Sekilas Tentang Penulis

Nama saya Fadil, seorang mahasiswa UIN Syarif Hidayatullah Jakarta prodi Matematika | umur : 19 tahun | Lahir : 07 november 1994 | Agama : Islam | Email: fadil.aidid@gmail.com(G-Talk) | Windows live: fadil.aidid@hotmail.com.

Social Stuff

  • FadiL - Rubikers
  • Twitter
  • Facebook
  • HOME
FadiL
Welcome to my blog
Enjoy this blog, if there is a question / message, please email me!

Sunday, August 15, 2010

Cara Membuat Shoutbox/Buku tamu Melayang

Langsung sajah yach!!!

1. Loginlah dulu di Blogger > Tata Letak > Elemen Laman > Klik Tambah Gadget>HTML/Java Scripts..
2. Jika sudah buatlah nama pada widget yang baru ini... lalu Copy-Paste kode dibawah ini ke dalam widget HTML/Java Scripts tadi...

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:150px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i466.photobucket.com/albums/rr22/wong284/GuestBook.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #FAFD02;
background:#FAFD03;
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">

<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe scrolling="auto" width="250" frameborder="0" src="http://www6.shoutmix.com/?ichal13051991" height="400" title="ichal13051991">
<a href="http://www6.shoutmix.com/?ichal13051991">View shoutbox</a>
</iframe>
<br/><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br/>
<!-- End ShoutMix -->

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></center></div></center></div></div></div>




Contoh di atas adalah 'Widget Melayang Shoutmix'

Keterangan :

Merah = Gantilah dengan kode Scripts Widget yang akan kamu tampilkan Misalnya kode Scripts Widget Shoutmix..

Ungu = Gantilah dengan URL Gambar Tab kamu (atau pakai saja url gambar tab diatas tdi) .. Gambarnya bisa kamu buat dengan Program seperti Photoshop.. lalu kamu Upload/simpan gambar tsb di Photobucket  ..baru kamu bisa mendapat kode url Direct Link gambar tdi.. 
Cokelat = Aturlah Tinggi & lebarnya sesuai ukuran Gambar Tab kamu..

.gbtab{ = Ini kode scripts untuk pengaturan tampilan gambar tab.

 Orange
gbcontent = Ini kode scripts untuk mengatur tampilan kontennya
float:left; = Ini utk mengatur posisi widgetnya melayang di kiri / kanan / atas / bawah
border:2px solid #FAFD02; = Memberi warna pada border konten...aturlah/ubahlah warnanya jika mau.. misalnya FAFFFF (sebaiknya gunakan pencari kode warna Photoshop)
background:#FAFD03; = Memberi warna pada isi konten.. disini saya menggunakan warna kuning


4. Simpanlah Widget Melayang ini...

~Selamat Mencoba~  

Bookmark and Share

1 comments:

tengku-daniel said...

bang kalau ganti ke kiri gimana ?

tolong balaske www.tengku-daniel.blogspot.com

Post a Comment