Update 04-06-2008 : [quote]Perubahan : - penambahan fungsi utama getElementsByClassName - perubahan script (tak ada perubahan pada css) Perbaikan dari versi sebelumnya : - tidak tergantung dari
You are viewing a post by strezzpc. View all 273 posts in Update 04-06-2008 : [quote]Perubahan : - penambahan fungsi utama getElementsByClassName - perubahan script (tak ada perubahan pada css) Perbaikan dari versi sebelumnya : - tidak tergantung dari.
2008-03-04 08:49:36
- strezzpc
- » FTalkFreak
1691
0
1969-12-31
Re: Update 04-06-2008 : [quote]Perubahan : - penambahan fungsi utama getElementsByClassName - perubahan script (tak ada perubahan pada css) Perbaikan dari versi sebelumnya : - tidak tergantung dari
[quote=nopathz]Thread ini dibuat karena banyaknya permintaan dari temen2 tentang trik pada comment/testimonial di profile nopz ...
[b]Dalam thread ini saya buat 2 versi dari tooltips comment.[/b]
Script yang musti ada (untuk kedua versi ini) di ekternal js adalah script fungsi untuk menampilkan tooltips.
Kopas code fungsi tooltips ini ke js kalian (bagi yang udah ada fungsi tooltips di js nya gak usah melakukan bagian ini).
<">Script ini diletakkan pada bagian bawah dari js kalian atau pada BAGIAN C berdasarkan referensi tutorial Bang Kanal.
--------------------------------------------------------------------------------------
[b]VERSI 1[/b]
Preview : [url=http:http://profiles.friendster.com/deffanola]dummy[/url]
Tambahkan ini ke dalam external js kalian pada bagian mana saja. Boleh di atas boleh dibawah terserah, sebaiknya di BAGIAN A (menurut referensi Tutorial Bang Kanal).
<">Ganti nilai XXXX diatas dengan jumlah comment yang ada pada profile kalian. Karena biasanya ada 10 maka ganti nilai XXXX dengan angka 10. Ada juga yang baru dapet comment sedikit karena baru join FS maka nilai XXXX harus diganti sesuai dengan jumlah comment yang ada.
Kemudian proses terakhir adalah menambah/mengubah external CSS kalian.
[quote].publiccomments div div .dtd ul {
color:#000;
overflow: hidden;
width: 440px;
height: 50px;
border: 1px solid #000;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5; opacity: 0.5; border: 1px solid #000; -moz-border-radius: 10px;
padding: 10px;
}
.publiccomments div div .dtd ul:hover{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1; height: 100%; min-height: 100px;
border: 1px solid #FFF;
}
.publiccomments .title{
width:420px;
background:#000;
-moz-border-radius: 10px;
padding:10px;
}[/quote]
Jangan lupa sesuaikan background, color dan width sesuai dengan profile kalian.
--------------------------------------------------------------------------------------
[b]VERSI 2[/b]
preview :
[url]http://h1.ripway.com/nopathz/tracker/tooltipscommentver2.jpg[/url]
Di versi 2 ini kita butuh script image getar (credit to http://www.dynamicdrive.com) yang diletakkan di BAGIAN C (sesuai referensi Tutorial Bang Kanal) :
<">Kemudian, tambahkan ini ke dalam external js kalian pada bagian mana saja. Boleh di atas boleh dibawah terserah, sebaiknya di BAGIAN A (menurut referensi Tutorial Bang Kanal).
<">Ganti nilai XXXX diatas dengan jumlah comment yang ada pada profile kalian. Karena biasanya ada 10 maka ganti nilai XXXX dengan angka 10. Ada juga yang baru dapet comment sedikit karena baru join FS maka nilai XXXX harus diganti sesuai dengan jumlah comment yang ada.
kemudian letakkan ini di BAGIAN C (sesuai referensi Tutorial Bang Kanal) :
<">Ganti nilai XXXX diatas dengan jumlah comment yang ada pada profile kalian.
Kemudian proses terakhir adalah menambah/mengubah external CSS kalian.
<">Jangan lupa sesuaikan background, color dan width dan juga image sesuai dengan profile kalian.
---------------------------------------------------------------------------------
Gunakan salah satu versi saja. Jika ingin menggunakan versi 2 Anda musti menghapus yang versi 1. Demikian jjuga sebaliknya jika ingin menggunakan versi 1 Anda musti menghapus yang versi 2.[/quote]
boz... saya pake yang versi 2
it's work:thumbsup:
, tapi fotonya gak muncul n tooltipnya bwt icon2nya juga gak muncul 
mohon pencerahan.........
[b]VERSI 1[/b]
Preview : [url=http:http://profiles.friendster.com/deffanola]dummy[/url]
Tambahkan ini ke dalam external js kalian pada bagian mana saja. Boleh di atas boleh dibawah terserah, sebaiknya di BAGIAN A (menurut referensi Tutorial Bang Kanal).
<">Ganti nilai XXXX diatas dengan jumlah comment yang ada pada profile kalian. Karena biasanya ada 10 maka ganti nilai XXXX dengan angka 10. Ada juga yang baru dapet comment sedikit karena baru join FS maka nilai XXXX harus diganti sesuai dengan jumlah comment yang ada.
Kemudian proses terakhir adalah menambah/mengubah external CSS kalian.
[quote].publiccomments div div .dtd ul {
color:#000;
overflow: hidden;
width: 440px;
height: 50px;
border: 1px solid #000;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5; opacity: 0.5; border: 1px solid #000; -moz-border-radius: 10px;
padding: 10px;
}
.publiccomments div div .dtd ul:hover{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1; height: 100%; min-height: 100px;
border: 1px solid #FFF;
}
.publiccomments .title{
width:420px;
background:#000;
-moz-border-radius: 10px;
padding:10px;
}[/quote]
Jangan lupa sesuaikan background, color dan width sesuai dengan profile kalian.
--------------------------------------------------------------------------------------
[b]VERSI 2[/b]
preview :
[url]http://h1.ripway.com/nopathz/tracker/tooltipscommentver2.jpg[/url]
Di versi 2 ini kita butuh script image getar (credit to http://www.dynamicdrive.com) yang diletakkan di BAGIAN C (sesuai referensi Tutorial Bang Kanal) :
<">Kemudian, tambahkan ini ke dalam external js kalian pada bagian mana saja. Boleh di atas boleh dibawah terserah, sebaiknya di BAGIAN A (menurut referensi Tutorial Bang Kanal).
<">Ganti nilai XXXX diatas dengan jumlah comment yang ada pada profile kalian. Karena biasanya ada 10 maka ganti nilai XXXX dengan angka 10. Ada juga yang baru dapet comment sedikit karena baru join FS maka nilai XXXX harus diganti sesuai dengan jumlah comment yang ada.
kemudian letakkan ini di BAGIAN C (sesuai referensi Tutorial Bang Kanal) :
<">Ganti nilai XXXX diatas dengan jumlah comment yang ada pada profile kalian.
Kemudian proses terakhir adalah menambah/mengubah external CSS kalian.
<">Jangan lupa sesuaikan background, color dan width dan juga image sesuai dengan profile kalian.
---------------------------------------------------------------------------------
Gunakan salah satu versi saja. Jika ingin menggunakan versi 2 Anda musti menghapus yang versi 1. Demikian jjuga sebaliknya jika ingin menggunakan versi 1 Anda musti menghapus yang versi 2.[/quote]
boz... saya pake yang versi 2
it's work:thumbsup:, tapi fotonya gak muncul n tooltipnya bwt icon2nya juga gak muncul
mohon pencerahan.........
 |