Cara Menghilangkan Bingkai /Border pada Gambar Postingan Blog

Santos el Salam

22 Agustus 2019

Jika blog anda menggunakan template bawaan dari blogger, biasanya tampilan gambar dalam artikel akan ada bingkai di tepi sekelilingnya. Settingan default blogger memang didesain untuk memberikan bingkai/ border pada setiap gambar atau foto dalam postingan blog. Bagi sebagian orang, bingkai/ border tersebut memang tidaklah mengganggu, bahkan dapat memperindah tampilan gambar blog. Namun bagi beberapa orang mungkin merasa kurang pas dan kurang sreg ketika melihat adanya bingkai atau border di gambar tersebut, terlebih jika bingkai terlalu lebar sehingga gambar jadi kurang enak dilihat. 

Contoh bingkai yang dihilangkan

Pada beberapa blog yang terlihat profesional, bingkai/ border pada gambar ini memang biasanya dihilangkan. Jika anda menginginkan untuk menghilangkan bingkai/ border pada gambar di postingan blog anda, caranya cukup mudah. Ada dua cara yang bisa anda terapkan untuk mengatasinya. Anda bisa mengikuti tutorial berikut ini. 

Cara pertama :

1. Login ke akun blogger anda

2. Buka Dashboard pilih Template dan klik Edit HTML

3. Kemudian cari kode seperti berikut ini:

.post-body img {

padding: 8px;

background:

$ (image.background.color);

border: 1px solid

$ (image.border.color);

Pada kode di atas, ganti nilai padding 8px menjadi 0px dan nilai border 1px menjadi 0px. Klik simpan tema dan lihat hasilnya.

Atau kode kadang juga seperti ini:

.post-body img  {

 border:1px 

 solid #ccc;

 margin:5px 

 }

Pada kode di atas, anda cukup ganti nilai border 1px menjadi 0px kemudian simpan tema dan lihat hasilnya.

Cara kedua :

Untuk cara kedua anda hanya perlu memasukan beberapa kode css kedalam template blogspot anda.

1. Login ke akun blogger anda

2. Buka Dashboard pilih Template dan klik Edit HTML

3. Back-up terlebih dulu jika perlu untuk menghindari kesalahan pemasangan kode, setelah itu cari kode ]]></b:skin>

4. Letakkan kode berikut ini tepat diatas kode ]]></b:skin> dan kemudian klik simpan tema

.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;

}

Selain memasukkannya langsung ke dalam template, anda juga dapat memasukkannya pada menu customize tema, caranya yaitu:

1. kembali ke dashboard blogger anda. 

2. pada deretan menu pilih tema/theme dan klik customize (ubahsuaikan). 

3. Pada deretan menu pilih andvance (tingkat lanjut) dan kemudian pilih Add CSS (Tambahkan CSS). 

4. Setelah kotak CSS terbuka tambahkan kode di atas ke dalamnya. 

5. Klik Apply to blog (Terapkan ke Blog), dan lihat hasilnya. 

Demikian Cara Menghilangkan Bingkai /Border pada Gambar Postingan Blog. Selamat mencoba, Semoga bermanfaat.

Labels: Blogging

Thanks for reading Cara Menghilangkan Bingkai /Border pada Gambar Postingan Blog. Please share...!

Facebook

Twitter