October 15, 2013

Cara Menghilangkan Border Image di Foto Blog - Garis Pembatas Gambar

October 15, 2013

border image blog
Cara Menghilangkan Border Image di Foto Blog - Garis Pembatas Gambar.

Gambar, foto, atau ilustrasi di blog dengan template bawaan Blogger biasanya ada border (pembatas) atau bingkai. Itu namanya "border image".

Sebagain blogger mungkin merasa kurang "sreg" dengan border image. Bagaimana cara menghilangkannya?

Fungsi border image itu hanya untuk memperindah, tidak ada kaitan dengan SEO blog ataupun loading blog. Namun, umumnya gambar di posting lebih baik tanpa border.

Cara Menghilangkan Border Image di Foto Blog

Ini dia Cara Menghilangkan Border Image di Foto Blog. Sebaliknya, ini pula Cara membuat Border Image di Foto Blog jika menginginkannya.

Intinya, cukup mengganti angka 1 (satu) atau 2 (dua) menjadi angka 0 (nol) di bagian kode, semisal "border: 1px solid #dddd;" menjadi "border: 0px solid #dddd;" atau dengan MENGHAPUSNYA . Hapus saja kode yang diawali dengan border itu di bagian kode img, post img, atau post-body img.

1. Login > Dashboard
2. Klik Template > Edit HTML
3. Cari kode di bawah ini (pastinya tiap template beda-beda, makanya dikasih banyak alternatif), namun umumnya diawali kode .post img

.post img {border:1pxsolid $bordercolor;margin:4px;padding:4px}

ATAU

.post img {padding:4px;border:1px solid $bordercolor;}

ATAU

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,.BlogList .item-thumbnail img {padding: $(image.border.small.size);background: $(image.background.color);border: 0px solid $(image.border.color);-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);box-shadow: 1px 0px 0px rgba(0, 0, 0, .1);}

ATAU

.post-body img, .post-body .tr-caption-container, .Profile img,.Image img, .BlogList .item-thumbnail img {border: 0px;-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);border-radius: 0px 0px 0px 0px;background: none;}

Untuk kemudahan pencarian kode di atas, gunakan tombol Find atau tekan Ctrl + F, masukan kode
.post img {

4. Ganti nilai border: 1px menjadi border:0px;
5. Save Tamplate!

Biasanya, gambar yang menggunakan border image juga ditambah kode padding, misalnya padding:5px. Nah, ubah pula kode padding itu menjadi padding:0.

Demikian Cara Menghilangkan Border Image di Foto Blog - Garis Pembatas Gambar. Good Luck & Happy Blogging! (www.contohblog.com).*

Previous
« Prev Post
Author Image

Romeltea

Recommended Posts

Related Posts

Show comments
Hide comments

7 comments on Cara Menghilangkan Border Image di Foto Blog - Garis Pembatas Gambar

  1. Thanx gan, tambah ilmu nheπŸ˜€πŸ˜€

    ReplyDelete
  2. Terima kasih atas infonya πŸ‘ πŸ‘ πŸ‘

    ReplyDelete
  3. penjelasannya lengkap....saya terapkan dan berhasil!! trims!

    ReplyDelete
  4. Eh...kalo yg ini komentar iseng saja ... kalo kita nulis misalnya www.contohblog.com di kotak komentar, bisa otomatis jadi link aktif nggak ya? :)

    ReplyDelete

Contact Form

Name

Email *

Message *