Selasa, 22 Mei 2012

Cara Membuat Buku Tamu Tersembunyi part2

| |
Sebenarnya cara membuat buku tamu tersembunyi atau melayang ini sudah banyak blogger yang mempostingnya, tapi karena beberapa waktu yang lalu ada seorang teman yang bertanya pada saya cara membuatnya atau meminta kode scriptnya, maka kali ini saya akan coba menjawab pertanyaannya atau permintaannya lewat postingan ini.
Untuk contohnya, sobat bisa lihat di blog ini.
Gimana? Keren ga?? he..he..

Cara membuatnya:
1.Masuk ke account Blogger sobat, pilih " Rancangan"
2.Tambahkan widget baru dengan mengklik "Tambah Gadget" - "HTML/JavaScript"
3.Tidak usah diberi judul, dan copy kode di bawah ini sebagai konten widget sobat:

<style type="text/css">
#gb{position:fixed; top:50px; z-index:+1000}
* html #gb{position:relative}
.gbtab{height:100px; width:30px; float:left; cursor:pointer;

background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat}
.gbcontent{float:left; border:2px solid #A5BD51; background:#F5F5F5; 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">
<!-- Taruh kode buku tamu (shoutbox / shoutmix) disini -->
<div style="text-align:right">
|<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString()+"px";
</script></div>

•Posisi buku tamu dengan kode di atas adalah di bagian kanan atas. Kalau sobat mau menempatkannya di kiri, ubah right jadi left. Dan kalau sobat mau menempatkannya di bawah, ubah top jadi bottom,
•Kalau sobat mau mengganti gambar Tab /Tombolnya, sobat bisa mengganti source warna biru / url gambar di atas dengan gambar yang saya siapkan dibawah ini,
•Dan juga jangan lupa untuk mengganti kode <!-- Taruh kode buku tamu (shoutbox / shoutmix) disini --> dengan kode buku tamu sobat.
•Klik "Save" kalau sudah selesai.
•Dibawah ini adalah gambar Tab / Tombol yang bisa anda gunakan.


Semoga berhasil

0 komentar:

Posting Komentar

Blog Indonesia. Diberdayakan oleh Blogger.