Siapkan 2 buah box image. [color=blue][b]IMAGE 1[/b][/color] berukuran lebar 550px tinggi 110px(untuk mainbar) dan [color=red][b]IMAGE 2[/b][/color] berukuran lebar 400px tinggi 110px(untuk sidebar). Kemudian masing-masing image dipotong menjadi 3 bagian : - bagian [b]ATAS[/b] (tinggi 50px), untuk header - bagian [b]TENGAH[/b] (tinggi 10px), untuk content - bagian [b]BAWAH[/b] (tinggi 50px), untuk tambahan bagian bawah dari box tersebut Untuk mengganti background header dan content, kita bisa melakukannya melalui external CSS. [quote]/* MASTER BOXES */ /* BOX SEBELAH KIRI (MAINBAR) */ .ltd .commonbox { border:none; background-image: url([color=blue][b]IMAGE 1 TENGAH[/b][/color]); background-repeat: repeat-y; color: #[b]XXXXXX[/b]; } .ltd .commonbox .evenrow { border:none; background:transparent; color: #[b]XXXXXX[/b]; } /* BOX SEBELAH KANAN (SIDEBAR) */ .rtd .commonbox { border:none; background-image: url([color=red][b]IMAGE 2 TENGAH[/b][/color]); background-repeat: repeat-y; color: #[b]XXXXXX[/b]; } .rtd .commonbox .evenrow { border:none; background:transparent; color: #[b]XXXXXX[/b]; } /* MASTER HEADERS */ /* CONTROLPANEL BOXHEADER */ .commonbox h1 { font-family: Arial, Helvetica, SunSans-Regular, sans-serif; font-weight: bold; color: #[b]XXXXXX[/b]; !important; text-transform: uppercase; background:transparent; background-image: url([color=blue][b]IMAGE 1 ATAS[/b][/color]); text-align: center; padding-top:10px; height:36px; } /* BOXHEADER SEBELAH KIRI (MAINBAR) */ .ltd .commonbox h2 { font-family: Arial, Helvetica, SunSans-Regular, sans-serif; font-weight: bold; color: #[b]XXXXXX[/b] !important; text-transform: uppercase; background:transparent; background-image: url([color=blue][b]IMAGE 1 ATAS[/b][/color]); text-align: center; padding-top:10px; height:36px; } /* BOXHEADER SEBELAH KANAN (SIDEBAR) */ .rtd .commonbox h2 { font-family: Arial, Helvetica, SunSans-Regular, sans-serif; font-weight: bold; color: #[b]XXXXXX[/b] !important; text-transform: uppercase; background:transparent; background-image: url([color=red][b]IMAGE 2 ATAS[/b][/color]); text-align: center; padding-top:10px; height:36px; }[/quote] Atur warna [b]XXXXXX[/b] sesuai selera masing-masing. Untuk meletakkan potongan image bagian bawah dapat digunakan script yang dimasukkan kedalam file JS external. Script ini diletakkan di [color=green][b]BAGIAN C[/b][/color](sesuai [url=http://theftalk.com/t15339-TUTORIAL-Kombinasi-Addbox-%28UPDATE-20-11%29.html][b]REFERENSI[/b][/url]). <">contoh, untuk menambah image bawah dari photo gallery box : [quote]imagebawah("[b]1[/b]","[b]kiri[/b]");[/quote] untuk addbox, gunakan addbox yang sudah dimodifikasi ini : <">jangan lupa mengubah IMAGE 1 BAWAH dan IMAGE 2 BAWAH. Selamat mencoba. Preview : [url=http://profiles.friendster.com/nopathz]profileku[/url] Kalau ingin mencoba-coba tapi gak punya imagenya, ini saya kasi contoh image supaya bisa nyoba2. Untuk box mainbar (sebelah kiri): - [url=http://h1.ripway.com/nopathz/image_1_atas.jpg][color=blue][b]IMAGE 1 ATAS[/b][/color][/url] - [url=http://h1.ripway.com/nopathz/image_1_tengah.jpg][color=blue][b]IMAGE 1 TENGAH[/b][/color][/url] - [url=http://h1.ripway.com/nopathz/image_1_bawah.jpg][color=blue][b]IMAGE 1 BAWAH[/b][/color][/url] Untuk box sidebar (sebelah kanan): - [url=http://h1.ripway.com/nopathz/image_2_atas.jpg][color=red][b]IMAGE 2 ATAS[/b][/color][/url] - [url=http://h1.ripway.com/nopathz/image_2_tengah.jpg][color=red][b]IMAGE 2 TENGAH[/b][/color][/url] - [url=http://h1.ripway.com/nopathz/image_2_bawah.jpg][color=red][b]IMAGE 2 BAWAH[/b][/color][/url] Preview : [url=http://profiles.friendster.com/nopathz]MY FS[/url] versi 2 nya (yang lebih fleksibel) kapan2 menyusul.

Last edited by nopathz (2008-06-05 19:37:21)