Cari Artikel

Selamat datang! di blog The Kampoeng Blogger , silahkan tinggalkan pesan di kolom komentar bila terdapat kode yang error.

March 02, 2013

Menghilangkan Border/Bingkai Pada Gambar di Blog

Border pada gambar dalam Bahasa Indonesia seringkali disebut dengan bingkai gambar. Bingkai gambar ini tidak selalu bagus bila digunakan pada gambar di artikel. Dalam kondisi tertentu misalnya blog dengan latar belakang warna gelap, gambar yang memiliki bingkai tentu saja akan lebih baik dibandingkan gambar tanpa bingkai, akan tetapi, pada blog yang berlatar belakang warna cerah, gambar berbingkai seringkali terlihat kurang menarik. Sebagai contoh, perbandingan dua gambar di bawah ini.


Dengan BorderTanpa Border
gambar dengan bordergambar tanpa border

Nah, memilih menggunakan border pada gambar di artikel sepenuhnya tergantung dari keinginan anda. Namun bila anda berkeinginan untuk menghilangkan border/bingkai pada gambar di blog maka caranya adalah sebagai berikut.

Menghilangkan Border/Bingkai Pada Gambar

Catatan!
Sebelum anda melakukan perubahan pada template anda, ada baiknya anda mem-backup template anda terlebih dahulu.

Step 1

Masuk ke halaman dashboard > Template > HTML > Expand widget template

Step 2


Cari kode .post img { kode lengkap seperti di bawah ini
.post img {
padding:4px;
border:1px solid $bordercolor;
}

Ganti angka yang diberi warna merah dengan angka "0"

Step 3 

Bila anda tidak menemukan kode seperti di atas, coba anda mencari kode ini .post-body img kode lengkapnya


.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);
}
Ganti angka yang diberi warna merah dengan angka "0"

Step 4

Save Template

Catatan !
Kode di atas bisa jadi berbeda pada template yang berbeda juga.

Setelah selesai, coba perhatikan gambar yang ada di artikel anda, bordernya sudah hilang bukan?
Selamat mencoba!
Wassalam.

Written by: Rysmah Zainal Arifin
The Kampoeng Blogger, Updated at: 12:19 PM

5 comments :

Gloria Bayutiara said...

Terima kasih sudah membantu masalah di blog saya di http://momiglo.blogspot.com/ kalo sempet mampir yaa :)

Irfana Ardian said...

trimakasih bantuannya.. akhirnya hilang juga tuh border :D
mampir gan di blog saya
http://adukcampuraduk.blogspot.com/

Gee Magfilt said...

Terima kasih tutorialnya mas
Sudah saya coba dan alhamdulillah berhasil

Ummi Alediyo said...

Kok saya belum bisa ya ?

Priambudi Sutanto said...

thx banget nih problem solved

Tinggalkan Komentar Anda di Sini:

Komentar yang mengganggu, berbau SARA, porno, mengandung iklan dan mencantumkan link aktif akan segera kami hapus.
Terimakasih atas perhatiannya.