Cara Merubah Gambar Buku Tamu

Diposkan oleh Helmi Bagindaria

Sekarang pembahasan kita kali ini adalah bagaimana cara merubah tampilan buku tamu yang mempunya gambar yang standart seperti ini

jadi mugkin bukanlah hal yang penting tapi, ini juga bisa mempercantik blog kita.......
seperti punya saya sekarang, memang tidak terlalu cantik tapi ya saya mau tampil beda.....
hehehehehe....

ini punya saya....
tidak terlalu banyak gaya.... tapi ini wajib di coba.......
ada banyak jasa yang menyediakan gambar dari pada buku tamu ini.....
tapi bagi para ahlinya desain bisa buat sendiri......
kalau saya sih ambil dari gambar yang di sediakan.... itu karna saya tidak terlalu ahli dalam design \, masih tahap pembelajaran....
hehehehe......

ni code html buku tamu saya.......

  <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://i971.photobucket.com/albums/ae193/Zendrymaulana/Wallpaper%20For%20Template%20Blogger/Bukutamu6.gif') 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 CBOX - www.cbox.ws - v001 -->

<div id="cboxdiv" style="text-align: center; line-height: 0">

<div><iframe frameborder="0" width="200" height="305" src="http://www2.cbox.ws/box/?boxid=2258920&amp;boxtag=h4wz5p&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border: 0px solid;" id="cboxmain"></iframe></div>

<div><iframe frameborder="0" width="200" height="75" src="http://www2.cbox.ws/box/?boxid=2258920&amp;boxtag=h4wz5p&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border: 0px solid;border-top:0px" id="cboxform"></iframe></div>

</div>

<!-- END CBOX -->


<br/>

Mau punya buku tamu seperti ini?<br/>

Klik di

<a href="http://infotentangblog.blogspot.com/2009/07/membuat-buku-tamu-tersembunyi.html">

sini (Info Blog)

</a>


<div style="text-align:right">

<a href="javascript:showHideGB()">

[tutup]

</a>

</div>


</div>


</div>


<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script>

ganti code warna merah yang saya buat dengan gambar yang kamu inginkan...
jika kamu punya gambar sendiri kamu juga bisa meletakkannya disana....
caranya ...:
atur gambar yang ingin kamu masukkan baik dari url mapun gambar dari hasil karyamu sesuai besar kecilnya gambar pada buku tamu........ jika gambar sesuai gambar akan terganti.....
jadi kamu hanya perlu melakukan hal-hal yang saya terangkan tadi...
gampangkan..............