Sabtu, 02 Januari 2010

Cara Membuat Buku Tamu Tersembunyi

Saya pengen banget buat buku tamu yang disematkan di dinding samping blog, tetapi saya gak tau cara buatnya gimana. Dan akhrnya pada suatu hari, saya berhasil karna saya belajar dari SC Community. Sebagai contohnya, silahkan aja liat di blog ini, ada kan???.

Nah...sekarang giliran saya yang menjadi guru buat Anda. Saya akan memberitahukan caranya setelah pesan-pesan yang berikut ini.


Ok, sampai dimana tadi??
Langsung saja dech ke pokok permasalahan, Anda bisa ikuti langkah-langkah ini.

1. Masuk ke akun blog Anda. (ya sudah pasti lah..)
2. Langsung terbang ke Tata Letak atau lebih populernya Layout, pilih Edit HTML.
3. Copy kan kode di baah ini tepat di atas kode <body>



<!-- Mulai Rolling Widget -->
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}


.gbtab{
height:100px; /*tinggi gambar*/
width:30px; /*lebar gambar*/
float:left;
cursor:pointer;
background:url("http://i30.tinypic.com/2cqh6yu.png") no-repeat; /*gambar*/
}
.gbcontent{
float:left;
border:2px solid #A5BD51; /*ketebalan dan warna kotak*/
background:#F0F0F0;
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">


Kode Buku Tamu Kamu


<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script><br/>
<span style='text-shadow:2px 2px 2px #adadad; float:right; margin-top:5px;'>
<a href='http://ilmukitakita-bermanfaat.blogspot.com/2010/01/cara-buat-widget-buku-tamu-tersembunyi.html' target='_blank' title='Click to get it !'>Guestbook Rolling Widget</a>
</span></div></div>
<!-- Selesai Rolling Widget -->

4. Ganti tulisan Kode Buku Tamu Kamu dengan script Shoumix kamu atau apalah, yang penting buku tamu.
5. Simpan dan lihat hasilnya.

Kode di atas adalah gambar buku tamu hijau, jika kamu mau warna biru, kamu tinggal ganti aja height, width, background URL, dan bordernya dengan data-data ini.





height: 130px
width: 35px
background URL: http://i25.tinypic.com/jl5dsg.png
border: 3px solid #003399





height: 100px
width : 30px
background URL: http://i30.tinypic.com/2cqh6yu.png
border: 2px solid #A5BD51



height: 100px
width: 30px
background URL: http://img22.imageshack.us/img22/8941/tabs2.gif
border: 2px solid #FF0033


Jika puas, silahkan berkomentar.....

28 komentar:

aa.art_gallery mengatakan...

wah bikin pinter ni artikel..makasih ya sob..

AriE ONLy mengatakan...

sip deh tutornya...ari dah pernah pake..tapi setelah pasang banyak pengunjung yg krg nyaman gitu..jdnya diganti lagi..

makasi sharingnya brother baru ^_^

ilmu kita-kita mengatakan...

makasi ya atas comment nya..

mas AriE, kok bisa gak nyaman mas...??

how much you know mengatakan...

hello..:)

ilmu kita-kita mengatakan...

hello juga...

aa.art_gallery mengatakan...

bos artikelnya bagus sekali tu..ditunggu artikel2 yg lain ya

pandu's blog mengatakan...

ma kasih inpo nya,,

kunjungi free download mp3 indo pandumusica.blogspot.com

Ahmad syah mengatakan...

aku udah coba tapi ngak jalan gimana ya ??
udah di paste diatas body juga>??

Fenomena Alam Semesta mengatakan...

thanks sob, kebetulan aku lagi cari

Fadliansyah(fo_fot) mengatakan...

keren gila...!?thanks shop..code warnanya...!?

Erwin Sinaga mengatakan...

masih bingung saya...

Z.MUZYANUR.R mengatakan...

mas salam kenl,,,,,,,,,,,,

nitip linknya ya mas
http://muzyanur.blogspot.com

Pakuban mengatakan...

bagus tak share ya

edy putra mengatakan...

Untuk yang mau membuat menu tersembunyi yang lain ,, silakan anda klik ,, TUTORIAL BLOG
dan yang butuh kode warna online klik <a href="http://edyputrajepara.blogspot.com/2009/09/kode-warna.html> KODE WARNA </a>

Smoga dapet bermanfa'at ,,,,, salam blogger,

spa mengatakan...

thx's 4 info,,

ilmu kita-kita mengatakan...

ok dech...

Distiwan mengatakan...

wah perlu dicoba neh

http://distiwan.blogspot.com

deny mengatakan...

trik yang bagus..lanjutkan

Putra mengatakan...

menarik.. menarik.. saya pake ini... makasih ya brader.... salam dari Problema Dan Solusi

Lucky.8 mengatakan...

kalaw sya pngennya di kiri..?? gimana??

Bintang Apriansyah mengatakan...

gwa kok aneh jadinya gan??? lihat nie blog gwa.. aneh Buku Tamu nya.. gak bisa chat.. kok gitu ya??? http://bintangsmarvile.blogspot.com/

Afif Muflih cii Takerut mengatakan...

huh. . .bordernya taruh mana, , , ,>??????

54P04NDIE mengatakan...

Makasih ya atas infonya...Semoga sukses selalu...

M RizZki mengatakan...

xcgsg

thomp mengatakan...

info nya sangat bermanfaat
sekali coba langsung jadi
terima kasih ya

Hatake Adam mengatakan...

baguss juga

syihab mengatakan...

IJin Copas gan,,suwun banget kie :D...

Bulu Perindu mengatakan...

Thnks uda share tips cara membuat buku tamu tersembunyi..

Posting Komentar

Komentar Anda sangat berarti

>

Guestbook Rolling Widget

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Grants For Single Moms