Cara Membuat Buku Tamu Teresmbunyi

            Hy sobat blogger kali ini saya akan memposting bagaimana Cara Membuat Buku Tamu Teresmbunyi, pasti sudah tidak asing lagi bukan sebenarnya ini buat kalian yang bingung menaruh buku tamu karana terlalu banyak widget sehingga kalian binggung menaruh buku tamu, cara ini juga supaya kalian bisa hemat tempat dan dilihat agak indah he..... contohnya gambarnya bisa kalian lihat di sebelah kiri ini, contoh aslinya juga bisa dilihat di blog saya ini di sebelah kanan yang ada tulisan BUKU TAMU dalam kotak hijau jika kalian ingin komen tinggal diklik BUKU TAMU di dalam kotak dan sebaliknya jika ingin ditutup klik kembali. Jika kalian mau memasang buku tamu ini silahkan lenjutkan ke bawah, jika tidak mau pun tidak apa-apa karna saya hanya ingin bebagi ilmu dengan kalian, Ok langsung saja ke tutorialnya di bawah ini.

Gini nih caranya : 

1. Login dulu pastinya ke blog anda, setelah itu>>>Klik Rancangan pilih "Layout" kemudian "Page Elements".

2. Klik "Add a Gadget" (yang mana aja oke), lalu pilih "HTML/JavaScript",

3. Klik Open pada spoiler lalu copy kode didalamnya dan paste pada konten "HTML/JavaScript"

 

Spoiler:

<style type="text/css"><br />#gb{<br />position:fixed;<br />top:50px;<br />z-index:+1000;<br />}<br />* html #gb{position:relative;}<br /><br />.gbtab{<br />height:100px;<br />width:30px;<br />float:left;<br />cursor:pointer;<br />background:url('http://i1117.photobucket.com/albums/k587/amirhidayat/tabs-1.png') no-repeat;<br />}<br />.gbcontent{<br />float:left;<br />border:2px solid #A5BD51;<br />background:#F5F5F5;<br />padding:10px;<br />}<br /></style>

<script type="text/javascript"><br />function showHideGB(){<br />var gb = document.getElementById("gb");<br />var w = gb.offsetWidth;<br />gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);<br />gb.opened = !gb.opened;<br />}<br />function moveGB(x0, xf){<br />var gb = document.getElementById("gb");<br />var dx = Math.abs(x0-xf) > 10 ? 5 : 1;<br />var dir = xf>x0 ? 1 : -1;<br />var x = x0 + dx * dir;<br />gb.style.right = x.toString() + "px";<br />if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}<br />}<br /></script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()">   </div>

<div class="gbcontent">

GANTI DENGAN KODE BUKU TAMU KAMU



Mau punya buku tamu seperti ini?

Klik di
<a href="http://amirhidayat9.blogspot.com/2010/12/cara-membuat-buku-tamu-teresmbunyi.html">
sini (Info Blog)
</a>

<div style="text-align: left;">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

</div>

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

4. Pada kode diatasa, cari kode  GANTI DENGAN KODE BUKU TAMU KAMU, dan ganti dengan kode buku tamu kalian, jika kalian ingin membuat buku tamu bisa di shoutmix.com dll.

5. Kamu juga bisa atur posisinya. Ubah aja nilai atribut top-nya. Kalau mau lebih ke atas dikit, ubah jadi 30px atau 20px, terserah kamu. 
6. Selesai mudahkan....? jamgan lupa tinggalkan komentarnya.

Selamat mencoba, semoga berhasil dan bermanfaat