Membuat Buku Tamu Hidden yang Unik

Hmmm….buku tamu salah satu media berkomunikasi sekaligus media promosi blog kesayangan kita, apalagi kalau buku tamunya unik, enak dilhat, dan mudah digunakan orang lain. Dijamin pengunjung blog kita pasti mau kembali lagi, hehehe…
Untuk membuatnya kita tinggal memilih shoutmix, cBox dan lain sebagainya. Kalau saya sih pake cBox, habisnya kalau pake Shotmix awal tahun ini kudu bayar...
Ummmmm.....saya merasa beruntung sekali ada widget ini, tanpa ini blog saya tidak akan rame, hehehehe…

Apabila sobat-sobat mau buat buku tamunya hidden (sembunyi/menyelip di samping) seperti saya silahkan copy kode script dibawah ini yang dimasukkan ke dalam gadget/widget HTML .
<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://i39.tinypic.com/iqwo7a.jpg') 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">

<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="hendro_fadly" src="http://www.shoutmix.com/?hendro_fadly" width="150" height="400" frameborder="0" scrolling="auto">
<a href="http://www.shoutmix.com/?hendro_fadly">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 -->

<div style="text-align:right">
<a href="javascript:showHideGB()">
[CLOSE]
</a>
</div>

</div>

</div>

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


Nah…script dibawah <div class="gbcontent"> adalah kode adalah script dari buku tamu saya, sobat bisa mengganti script dibawah ini dengan script buku tamu sobat.
<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="hendro_fadly" src="http://www.shoutmix.com/?hendro_fadly" width="150" height="400" frameborder="0" scrolling="auto">
<a href="http://www.shoutmix.com/?hendro_fadly">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 -->

Apabila mau mengganti gambarnya, sobat harus membuat gambar buku tamunya sendiri, hehehe…
Hasil kreasi gambar punya sobat bisa di upload melalui http://tinypic.com atau photobucket dan lain sebagainya, yang penting uda dapat kode URL nya.
untuk gambar buku tamu blog saya berukuran 32x100. Apabila mau berkedip-kedip tulisannya silahkan klik link ini http://hendro-sinichi-kudo.blogspot.com/2011/08/membuat-banner-link-berkedip-kedip.html
Nah…setelah gambarnya uda jadi & selesai diUpload, sobat tinggal mengganti kode ini
background:url('http://i39.tinypic.com/iqwo7a.jpg') no-repeat;
Ganti  'http://i39.tinypic.com/iqwo7a.jpg' dengan kode link dari gambar yang selesai di ulpoad tadi. Ingat yang dicopy adalah alamat Direct Link for layout.
Semoga berhasil ^_^

15 komentar:

  1. ne lah yg aq cari"... hehehe makasih ea a'a...

    BalasHapus
  2. Wah....makasih banyak uda mau mampir nih...

    BalasHapus
  3. @Buana Tirta : Wah...kalau posisinya diatas, header bakalan tertutup & cBox nya akan menutupi menu diatas. kalo sobat tetap mau posisinya diatas, ubah kode HTML pada #gb{
    position:fixed;
    top:50px;
    z-index:+1000;
    }
    * html #gb{position:relative;}

    untuk mengaturnya harus merombak semua kode ini sob...

    BalasHapus
  4. Balasan
    1. Sama-sama mas...
      makasih uda singgah ^_^

      Hapus
  5. Thnks uda share cara membuat buku tamu hidden.. Info yg bermanfaat. salam kenal mas..

    BalasHapus
  6. Senang bisa singgah di situs ini.. hehe
    makasih karena anda tidak pelit berbagi ilmu.. :)

    BalasHapus
  7. Lengkap sob,, langsung di coba tips buku tamunya. Thanks

    BalasHapus
    Balasan
    1. Terima kasih kembali sudah berkunjung kesini, walau hanya promosi, hehe

      Hapus
  8. Terimakasih tipsnya mas.. jangan bosen2 berbagi ilmu ya..

    BalasHapus
  9. Makasih brow infonya, mantap pokoknya. salam kenal ya?

    BalasHapus

Berikan komentar yang sopan yah, hehehe.... ^_^

Related Posts Plugin for WordPress, Blogger...