Friday, May 8, 2009

Custom Mini Profile

Hmm.. Dalam kesempatan ini, saya ingin memberi tips untuk meng-custom mini profile. Tidak tahu bagian yang dimaksud? Ini dia yang saya maksud:

[sebelumnya, mohon maaf pada korban screenshotnya]

Mini Profile

Nah.. Mungkin untuk sebagian orang ada yang bertanya, "Bagaimana merubah bagian itu (alias mini profile)?"

Caranya, edit dan tambahkan kode berikut pada CSS Anda.

1. Background mini profile [by default]

table.miniprofilebodytable {
background-color:#EEEEEE;
border:1px solid #D7D9DD;
}

Pada bagian background, Anda bisa mengganti warnanya sesuai selera. Atau agar memberi kesan lebih, anda dapat menggantinya dengan gambar, menjadi background: url(INSERT_URL); .

2. Bag. relationship [by default]

div#miniprofile_div {
color:#FFFFFF;
}

Warna sesuaikan dengan kebutuhan, sebaiknya tidak bertabrakan dengan warna background.

3. Address [by default]

div.address {
color:#999999;
margin-bottom:2px;
}

Warna sesuaikan dengan kebutuhan, sebaiknya tidak bertabrakan dengan warna background.

4. Link [by default] + hover

div#miniprofile_div a, div#miniprofile_div a:visited, div#miniprofile_div a:link {
color:#0B5EB4;
font-family:Arial,sans-serif;
text-decoration:none;
}

[+] Sebetulnya sebelumnya tidak ada optional hover, namun Anda bisa menambahkannya seperti dibawah ini.

div#miniprofile_div a, div#miniprofile_div a:hover {
color:#CC0000;
}

Warna sesuaikan dengan kebutuhan, sebaiknya tidak bertabrakan dengan warna background.



Sekian tutorial dari saya. Mohon maaf apabila tutornya tidak dimengerti, karna saya masih dalam tahap belajar

Semoga bermanfaat.

23 comments:

  1. ehehe.. sama²
    semoga ngerti ya :D

    ReplyDelete
  2. aku suka yang transparant,jadi ga perlu nyoba deh
    :D

    ReplyDelete
  3. bagus... 2-2-na gerak... tinggal digelutkeun

    VS.

    ReplyDelete


  4. di tempat anda, dengan background transparent seperti ini
    Terlihat menarik. Bagus.Siip...

    ReplyDelete
  5. mau tanya 2 hal...

    supaya backgrund: url-nya no-repeat-y / menyesuaikan dengan height
    pokoknya ga numpuk 3 gambar kek gini... gimana?


    trus sudut yg di moz-border ilang juga gimana?
    supaya persis jadi begini...

    ReplyDelete
  6. 1 lagi...
    kalo costum bagian nama (di atas relationship) gimana?

    ReplyDelete
  7. 1. background yang kaya gitu, sebelumnya juga dah coba.. tapi ga bisa2 teruss.. huee.. jadi ga tau harus gimana ngeditnya.

    2. trus yang custom bagian nama, dah dapet ilham (asalnya ga tau)

    tinggal edit aja di bagian ini:

    h2 {
    font-family:Arial;
    font-size:20px;
    color:#000000;
    font-weight:normal;
    margin:0;
    }

    ReplyDelete
  8. hehe.. terima kasih mas! ini juga idenya diilhami postingan Mas Lilok (yang background transparent tanpa opacity) :D
    terima kasih banyak atas ilmunya :D

    ReplyDelete
  9. silakan diulik.. saya mah ga bisa yang itu :D

    ReplyDelete
  10. pada selector berikut ini :

    /* Mini Profile */
    table.miniprofilebodytable {
    background-color:grey;
    border:1px solid black;
    -moz-border-radius: 10px 10px 10px 10px;
    }

    edit, hingga seperti ini :

    /* Mini Profile */
    table.miniprofilebodytable {
    background:#040404 url(http://img139.imageshack.us/img139/83/bgminiprofilejl.png) repeat-x scroll 0 0;
    border:1px solid black;
    -moz-border-radius: 10px 10px 10px 10px;
    }

    box mini prfile kemungkinan akan tampil sebagai berikut :

    Contoh box mini profile.
    Background image telah saya siapkan
    pada URL di atas (imageshack.us).
    Semoga membantu.

    © 2009 Lilok http://dangdutkoplo.multiply.com

    ReplyDelete
  11. tidak jauh beda dengan yg tadi...
    sudut kiri & kanan atasnya ngga melekuk

    ReplyDelete
  12. contoh di bawah, ada lengkungan.
    saya pake code yg sama : -moz-border-radius: 10px 10px 10px 10px;

    udah dipasang apa belum ?
    mo dilihat bentar.

    ReplyDelete
  13. Waaa .... maaf.
    tadi saya cuman malas aja.
    copas dari CSS anda.
    coba ganti dengan ini :
    -moz-border-radius: 10px;

    ReplyDelete
  14. kayanya kalo pake gambar emang jadi gitu
    border melengkung, tapi pic tetep menyudut

    ReplyDelete
  15. ehm.. btw, yang aku bisa kok melengkung. pake yang 10 px itu. soalnya yang aku juga pake gambar!

    ReplyDelete