Cara Membuat Buku Tamu Ninja

MaLam sobat setia 21 Siak, MaLam tahun baru ne, pada ke mana tahun baru neh?





Sayang Saya tahun baru hanya jaga komputer hha :D, tapi tak apa saya senang bila berposting dengan sampeyan (-_-") ?
di malam ini saya akan membuat sebuat entri yang saya ber juduL Cara Membuat Buku Tamu Ninja walau pun ini sama dengan buku tamu yang tersembunyi itu tapi saya tetap mau kreatif, maklum anak SMP 21 SIAK mana ada yang tidak kreatif. langsung ke pokok masalah.
Coba sobat lihat pandangan ke samping kanan atas blog saya disitu ada gambar yang ada tulisannya Buku Tamu nah... itulah Buku Tamu ninja, mana ada buku tamu yang nempel di monitor, yang kalau diklik akan keluar form isian Nama, Website dan Message. Buku Tamu atau bahasa saya dengan teman2 saya Guest Book tersebut nempel artinya tidak terpengaruh oleh scroll mouse, walaupun mouse digulir ke bawah Buku Tamu tersebut tetap terlihat.

Penasaran..penasaran..
Untuk membuatnya ikuti langkah berikut :
  • Masuk ke Blogger
  • Klik Rancangan
  • klik Elemen Laman
  • klik Tambah Gadget
  • Klik "HTML/JavaScript"
  • Kemudian Copy/Paste kode di bawah ini :


<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://1.bp.blogspot.com/_w-dfDljRV3Q/TRXJ-Ex
UXII/AAAAAAAAAn8/sl_ZVhQFU9c/s1600/buku+tamu.png') no-repeat; } .gbcontent
{ float:left; border:1px solid #B3B3B3; background:#E6E6E6; padding:5px; }
</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 CBOX - www.cbox.ws - v001 --> Code CBox milik 
sampeyan <!-- END CBOX -->  <br/>Mau buat buku tamu ini ?<br/>Klik 
<a href="http://004smpn21siak.blogspot.com/2012/01/cara-membuat-buku-tamu-ninja.html"target="_blank"> di sini </a> 
<div style="text-align:right"> <a href="javascript:showHideGB()"> [hide] </a> 
</div> </div> </div> <script type="text/javascript"> var gb = 
document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + 
"px"; </script>

Keterangan :
Yang berwarna merah ganti dengan kode yang sampeyan peroleh dari Cbox
Pada kode diatas Icon Buku Tamu-nya seperti gambar disamping. Gambar dapat dingganti sesuai dengan kreasi sampeyan sendiri dengan terlebih dahulu mendesainnya di CorelDRAW, Kemudian upload di blogger atau hosting lain kemudian ambil URLnya dan pasang sebagai background.

Sekian, ini ada ayam bakar dan secangkir kopi, mau sobat?...

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

3 komentar:

Ferdi mengatakan...

Makasih saranya ya sobat?

Arie Agustomi mengatakan...

maksud keterangan nya itu apa y ????

Keterangan : Yang berwarna merah ganti dengan kode yang sampeyan peroleh dari Cbox....

Ferdi mengatakan...

yang sobat dapat dari http://www.cbox.ws/
setelah itu sobat copy dan pastekan di situ.. .

semoga mengerti

Posting Komentar

Kawan Setia