[b]Credit[/b] : Angell de Ville & Crazy Davinci [b]Preview[/b] : [url]http://profiles.friendster.com/bangkanal[/url] (view with FF) [b]NB[/b] : Tidak bentrok dengan script mini maxi ataupun one column profile [b]Note :[/b] Untuk membuat default box FS kalian hidden sementara dan agar bisa tampil kembali ketika dipanggil menggunakan script load unload box, pelajari tutorial hide box disini [url]http://theftalk.com/t47244-%28TUTORIAL%29-JS-Hide-Default-Box-FS.html[/url] Disini abang akan share tutorial load & unload boxes. Kalau dilihat dari scriptnya gak terlalu susah kok tapi disini yang penting adalah ketelatenan dan ketelitian kalian karena kita harus mengidentifikasikan ID serta link setiap box Tapi kalian tidak usah khawatir karena link serta ID setiap mainBox nya sudah abang editkan dalam tutorial ini jadi kalian tinggal pakai saja scriptnya OK untuk tutorial ini akan abang buatkan dalam 2 post [b]1. Post pertama : Tutorial untuk load & unload mainBox[/b] [b]2. Post kedua : Tutorial untuk load & unload addBox (box2 tambahan kita di FS)[/b] Mari kita mulai Tambahkan script ini ke dalam CSS extension kalian. Gunanya adalah untuk membuat CP Buttons kalian dalam 1 kolom [spoiler]#controlPanelButtons a, #controlPanelButtons a:link, #controlPanelButtons a:visited{font-family:Arial,Sans-serif; color:#F8F8FF; font-size:11px; border-width:0px; border-color:#F8F8FF; border-style:solid; background-color:transparent; text-align:center; text-decoration:none} #controlPanelButtons a:hover{font-family:Arial,Sans-serif; color:#F8F8FF; font-size:11px; border-width:0px; border-color:#F8F8FF; border-style:solid; background-color:transparent; text-align:center; text-decoration:underline} #controlpanelbuttons a{width:200px!important; background-image:url([b]URL BG[/b])!important; background-repeat:no-repeat; background-attachment:fixed; background-position:top center; height:16px!important; border-width:1px!important; border-color:black!important; border-style:solid!important} #newButtons { width:200 !important; height:16; overflow:hidden; }[/spoiler] [u]Ket[/u] : [b]URL BG[/b] = ganti dengan URL pic untuk BG CP buttons kalian Tambahkan script JS extension ini ke dalam [b]onload handler[/b] JS utama kalian dan taruh di Bagian A (kalau menurut tutorial abang). JS extension ini berguna utk menentukan lokasi pemunculan box di profile kita. Sebagai contoh, di FS abang yg ditampilkan hanyalah CP saja sehingga nanti box2 yg dihide akan dimunculkan dibawah CP abang. Kenapa abang hanya tampilkan utk 3 box saja? Karena box kanan kita itu kan biasanya terdiri dari 3 box yaitu kolom Friends, Fans Of dan Groups. Box2 yg lain seperti Photo Gallery, More About Me, Blogs, Reviews, Testimonial dan Media Box akan berada otomatis dibawah CP [spoiler]document.getElementById("0").parentNode.appendChild(document.getElementById("2")) document.getElementById("0").parentNode.appendChild(document.getElementById("7")) document.getElementById("0").parentNode.appendChild(document.getElementById("8"))[/spoiler] Setelah itu, tambahkan 2 script ini ke dalam JS extension kalian dan taruh persis diatas tracker object (jika kalian menggunakan WVM). Jika kalian tidak menggunakan WVM, taruh di Bagian C paling atas (menurut tutorial abang) Script ini akan membuat CP Buttons tambahan dibawah CP Buttons defaut kalian (Send Message, Add Comment, dll). Guna CP Buttons tambahan ini adalah sebagai buttons untuk show & hide mainBox kalian [spoiler][img]http://img516.imageshack.us/img516/3196/cpyi0.jpg[/img][/spoiler] JS extension utk penambahan CP Buttons : [spoiler]controlPanelButtons.innerHTML+="<li id='photoLink'><a href='javascript:loadphoto()'>View Photo Gallery</a></li>" +"<li id='friendLink'><a href='javascript:loadfriend()'>View Friends</a></li>" +"<li id='moreLink'><a href='javascript:loadmore()'>Read About Me</a></li>" +"<li id='fanLink'><a href='javascript:loadfan()'>View Fans Of</a></li>" +"<li id='groupLink'><a href='javascript:loadgroup()'>View Groups</a></li>" +"<li id='commentLink'><a href='javascript:loadcomment()'>Read Comments</a></li>"[/spoiler] JS extension load & unload mainBox nya : [spoiler]function loadphoto(){ showhide("1") photoLink.innerHTML="<a href='javascript:unloadphoto()'>Hide Photo Gallery</a>" } function loadfriend(){ showhide("2") friendLink.innerHTML="<a href='javascript:unloadfriend()'>Hide Friends</a>" } function loadmore(){ showhide("6") moreLink.innerHTML="<a href='javascript:unloadmore()'>Hide About Me</a>" } function loadfan(){ showhide("7") fanLink.innerHTML="<a href='javascript:unloadfan()'>Hide Fans Of</a>" } function loadgroup(){ showhide("8") groupLink.innerHTML="<a href='javascript:unloadgroup()'>Hide Groups</a>" } function loadcomment(){ showhide("18") commentLink.innerHTML="<a href='javascript:unloadcomment()'>Hide Comments</a>" } function unloadphoto(){ showhide("1") photoLink.innerHTML="<a href='javascript:loadphoto()'>View Photo Gallery</a>" } function unloadfriend(){ showhide("2") friendLink.innerHTML="<a href='javascript:loadfriend()'>View Friends</a>" } function unloadmore(){ showhide("6") moreLink.innerHTML="<a href='javascript:loadmore()'>Read about Me</a>" } function unloadfan(){ showhide("7") fanLink.innerHTML="<a href='javascript:loadfan()'>View Fans Of</a>" } function unloadgroup(){ showhide("8") groupLink.innerHTML="<a href='javascript:loadgroup()'>View Groups</a>" } function unloadcomment(){ showhide("18") commentLink.innerHTML="<a href='javascript:loadcomment()'>Read Comments</a>" }[/spoiler] Selesai deh load & unload utk mainBox FS kalian

Last edited by KaNaLiTnUk (2008-12-30 12:30:32)