Hanya arsip

halaman asli ada di http://kolom-tutorial.blogspot.com

Photo Profile Berbingkai

Sobat Edelweis rupanya berkeinginan agar photo yang terpampang di profilemenjadi ada figura nya supaya tampak lebih sedap di pandang mata, Sebuah keinginanyang wajar kalau menurut saya. Yups..untuk itu akan saya bahas sedikit trik
agar photo tersebut menjadi ada figuranya.

Agar photo frofile menjadi berbingkai atau berfigura, langkahnya sangat sederhana
sekali,yaitu sobat hanya merubah nilai border pada stylee sheet css pada bagian untuk
photo frofile, contoh kode photo frofile untuk template lama seperti ini :

.profile-img img {
float:left;
padding:4px;
border:1px solid #ddd;
margin:0 8px 3px 0;
}

untuk template baru seperti ini :

.profile-img {
float: left;
margin: 0 5px 5px 0;
padding: 4px;
border: 1px solid $bordercolor;
}

Tugas sobat hanya merubah nilai bordernya saja dengan nilai yang lebih besar tentunya, biar lebih jelas, sedikit saya ulas tentang kode-kode diatas :

float:left; –> artinya photo akan di simpan di sebelah kiri pada tulisan frofile.

padding:4px; –> padding disini maksudnya adalah jarak antara photo dengan figura (border) sebesar 4 pixel, jika sobat tidak menginginkan ada jarak antara photo dengan bingkai, maka tinggal ganti nilainya dengan 0px (nol).

border:1px solid #ddd; –> nah ini yang menjadi bingkai photonya, nilai figura adalah sebesar 1 pixel, jika ingin figuranya tampak lebih lebar, ya tinggal ganti nilai 1px dengan nilai yang lebih besar, contoh 6px, 8px atau yang lainnya. kode #ddd –> adalah kode warna untuk abu-abu, silahkan ganti dengan kode warna lainnya jika tidak cocok.

Masih bingung cara merubahnya? silahkan ikuti langkah-langkah berikut!

Untuk template klasik :

  1. Sig in di blogger
  2. Klik menu Template
  3. Klik menu Edit HTML
  4. Copy seluruh kode template yang ada lalu paste pada notepad kemudian save. ini untuk backup data bila terjadi kesalahan editting
  5. Cari kode yang mirip dengan kode di bawah ini :
  6. .profile-img img {
    float:left;
    padding:4px;
    border:1px solid #ddd;
    margin:0 8px 3px 0;
    }

  7. Ganti nilai border dengan nilai yang lebih besar, contoh 8px, sehingga kodenya akan seperti ini :
  8. .profile-img img {
    float:left;
    padding:4px;
    border:8px solid #ddd;
    margin:0 8px 3px 0;
    }

  9. Klik tombol Pratinjau untuk melihat hasil perubahan
  10. Jika sudah OK, klik tombol Simpan Perubahan Template
  11. Selesai.

Untuk template baru :

  1. Sign in
  2. Klik menu Layout
  3. Klik menu Edit HTML
  4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data
  5. Klik kotak kecil di samping tulisan Expand Template Widget
  6. Tunggu beberapa saat sampai proses selesai
  7. Cari kode yang mirip dengan kode di bawah ini :
  8. .profile-img {
    float: left;
    margin: 0 5px 5px 0;
    padding: 4px;
    border: 1px solid $bordercolor;
    }

  9. Ganti nilai border dengan nilai yang lebih besar, contoh 8px, sehingga kodenya akan seperti ini :
  10. .profile-img img {
    float:left;
    padding:4px;
    border:8px solid $bordercolor;
    margin:0 8px 3px 0;
    }

  11. Klik tombol Pratinjau untuk melihat perubahan
  12. Bila sudah OK, klik tombol SIMPAN TEMPLATE
  13. Selesai.

Sebagai catatan, untuk melihat efek figura berfungsi, tentunya sobat harus terlebih dahulu memasang photo profile ( ya iya rek, kalo ga ada photonya, opo yang mau di buatin bingkai tho).

Jika penasasaran ingin melihat photo ganteng dengan figura yang antik, silahkan klik di sini !

Selamat mencoba deh !

11 Juli 2007 - Posted by | aksesori blog, blog tutorial

6 Komentar »

  1. Maaf Mas, sepertinya cara bertanya saya salah. Maksud saya bingkai untuk postingan gambar, bukan foto profile. Makasih atas perhatiannya. Btw; materi yang ini jg bermanfaat kok buat saya.

    Komentar oleh UKMPA Edelweis FSUH | 11 Juli 2007 | Balas

  2. MAS DURUNG MUDENG????????????????

    Komentar oleh J_LOnya PLANO | 18 November 2007 | Balas

  3. Mas cara ngeletakin marquee tepat di tengah header gimana ya?

    Komentar oleh Ghur4ba | 2 Agustus 2008 | Balas

  4. mas kalo ganti gambar profilnya gmn ya.

    Komentar oleh Nasirudin js | 11 Agustus 2008 | Balas

  5. bingung mas, ko ga berubah ya fotonya? huhu

    Komentar oleh DERY & INTAN | 15 Agustus 2008 | Balas

  6. aku dah praktekin … voila … berhasil euy …
    tks ya mas …
    btw, klo mau ganti bordercolor kode2 warnanya apa aja ya mas ? untuk yang template baru

    Komentar oleh Utami | 27 Agustus 2008 | Balas


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: