Cara Menghilangkan Border Gambar dalam Postingan

Thanks telah berkunjung...

Tahukah teman-teman apa itu border gambar? Border, dapat kita sebut juga sebagai garis tepi, oleh karena itu border gambar adalah garis tepi suatu gambar. Di postingan kali ini kita membahas bagaimana cara menghilangkan border atau garis tepi gambar tersebut, dan tentunya yang terdapat di dalam postingan kita. Kalau teman-teman bertanya mengapa border harus dihapus? Sebenarnya border tidak harus dihapus, hanya saja bagi teman-teman yang menginginkannya monggo diperaktekkan, masalahnya menurut saya pribadi kalau suatu gambar yang ada di postingan tu ada bordernya keliatannya kurang bagus (ingat, ini pendapat saya lho) dan kelihatan kaku jika dipandang. Agar lebih jelas, teman-teman bisa melihat contoh tampilan berikut ini:






Setelah teman-teman mengamati 2 gambar di atas maka pertanyaannya adalah "Adakah perbedaan antara dua gambar di atas?

Jawabannya adalah: ADA, yaitu gambar satu memiliki border, sedangkan gambar dua tidak memiliki border.

Dengan begitu sekarang kita sudah tahu pasti bahwa kegunaan border gambar hanya untuk sekedar pemisah antara suatu gambar dengan dinding posting, entah itu pemisah objek gmbar atau warna gambar.

Nah, bagi teman-teman yang ingin membuat tampilan gambar postingannya yang tadinya seperti nomor satu dan sekarang berubah menjadi no. dua, silahkan diperaktekkan langkah2 berikut:


1. Login ke Blogger >> klik Tata Letak >> Edit HTML

2. Lalu cari kode berikut: (cukup cari "post img" dgn Ctrl+F)

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



3. Selanjutnya, yang perlu teman-teman perhatikan adalah pada bagian yang telah ditandai dengan warna biru (border: 1px), maka tulisan "1px" tersebut bisa teman-teman ganti dengan "0px", dengan begitu seluruh border gambar yang terdapat di dalam postingannya teman-teman akan hilang semua.

4. bagi teman-teman yang ingin memunculkan border gambarnya kembali, maka caranya gampang. Tinggan diubah nilai "0px" menjadi angka di atas "0/nol". Dan ingat, semakin besar angkanya, maka semakin tebal bordernya.

5. Selesai, jangan lupa disimpan hasil kerjaannya.


Coba sekarang teman-teman tengok gambar-gambar yang terdapat dalam postingannya teman-teman...





Semoga Bermanfaat []

Tags: cara menghilangkan border gambar pada postingan, menghilangkan garis tepi gambar blogger, cara cepat menghilangkan border post, cara meghilangkan garis tepi gambar blogspot






Bagikan informasi ini ke teman-teman sobat

Postingan menarik lainnya...



18 comments:

"Terima kasih untuk tidak spam di sini"

  1. kaga ada bos .post img {
    padding: 4px;
    border: 1px solid $borderColor; di template aku , blogger

    ReplyDelete
  2. Makasih bos... mampir ke blog baru ane yang english.. :)
    @boy: barangkali membantu, CTRL+F trus cukup ketik .post img aja ga usah dipaste semua kadang memang tiap template beda-beda.. thx

    ReplyDelete
  3. maaf gan template blog saya tidak bisa, gimana nih ?

    adanya gini scriptnya

    .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
    .BlogList .item-thumbnail img {
    padding: 5px;

    background: #fff;

    -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, .5);
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
    }

    .post-body img, .post-body .tr-caption-container {
    padding: 8px;

    trus yang di edit bagian mana nya?

    ReplyDelete
  4. woo . .taq gan info sukses dah gw . .slm bloger eheheheh

    ReplyDelete
  5. makasih gan atas artikelnya, akhirnya saya berhasil menghilangkan garis tepinya

    ReplyDelete
  6. @boyTak harus mirip kode di atas. Cukup nyari .post img lalu nyari nilai border-nya. Jika nilai border di atas "0"/nol, maka usahakan nilai tersebut tetap di angka "0px". Semoga membantu....
    Keep blogging
    :D

    ReplyDelete
  7. @HKimagineAne liat di blog sobat nggak ada border tuh sob...tapi kalau sobat risi dengan bayangan gambar yang ada di post sobat...sobat bisa mengotak-atik nilai yang ada di kode berikut:
    -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, .5);
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
    }
    Semoga membantu.
    :D

    ReplyDelete
  8. Artikel yg bermanfaat gan..

    ReplyDelete
  9. berhasil gan, pertama memang gak bisa nyari .post img {
    berhubung template punya ane pake yg custom
    ane nyari border: 1px, ternyata ada.
    makasih tutor simple nya gan, sukses.

    ReplyDelete
    Replies
    1. Sama-sama sob,..
      Keep blogging :)
      Thanks telah berkunjung

      Delete
  10. Sudah bisa gan, thanks infonya.
    Kalau mau menghilangkan gambar pada postingan halaman muka gimana ya? Maksudnya biar loadingnya bisa lebih cepat.

    ReplyDelete
    Replies
    1. sama-sama sob,...
      InsyaAllah akan saya bahas di blog ini nanti.
      Thanks telah berkunjung

      Delete