Cara Menghilangkan Border atau Garis Pembatas Gambar Pada Blogspot

Secara default, seluruh foto yang ditampilkan pada blog memiliki garis tepi disetiap sisinya, atau bisa disebut juga dengan border (batas) yang memisahkan antara foto dan tulisan artikel yang ada di halaman blog, fungsinya hanya sebagai garis penanda batas pada setiap sisi foto yang ditampilkan di halaman artikel blog. Dengan adanya garis pembatas ini sering menjadi masalah bagi sebagian blogger yang ingin menampilkan fotonya apa adanya, sesuai hasil foto yang dia edit. Misalnya, jika foto tersebut berformat .PNG atau memiliki background transparan, tentunya dengan adanya garis border atau pembatas foto pastinya akan sangat mengganggu nilai estetika dari foto tersebut. Saya sendiri mengalami hal yang demikian, beberapa foto saya edit sedemikian rupa agar foto yang saya tampilkan di blog nantinya terlihat indah di mata pengunjung blog saya. Biasanya saya bikin transparan namun jika saya sedang males ngedit, fotonya hanya saya buat dengan background berwarna putih,  maksudnya agar ketika saya tampilkan di dalam artikel blog bisa menyamai warna background dari template blog saya yang berwarna putih juga, namun karena adanya border atau garis pembatas membuat foto jadi agak aneh dan gak enak dilihat.

Pada gambar di bawah ini saya akan memperlihatkan kepada sobat, perbedaan antara gambar yang memakai garis border, dan mana gambar yang tidak memakai garis border. Namun, mata sobat harus jeli melihat perbedaanya, sebab gambar yang memakai border kurang begitu jelas terlihat. Perhatikan dengan seksama ya sob, klik saja gambarnya untuk memperbesar tampilan fotonya:

Gambar diatas merupakan screenshot penampakan foto artikel saya, pada gambar yang sebelah kanan adalah screenshot ketika sebelum garis border dihilangkan, pada screenshot sebelah kiri border nya sudah saya hilangkan, bagaimana menurut sobat? Terlihatkah perbedaanya? Jika terlihat, kira-kira lebih bagus yang mana? Memakai border atau tidak? Kalau saya sih jelas, mending gak make border. Jika sobat sependapat dengan saya, saya akan memberikan tips tentang bagaimana cara menghilangkan garis border foto tersebut dengan satu langkah yang sederhana, sobat tinggal memasukkan kode CSS pada HTML template sobat. Masuk ke Editor Template blogger > Pilih Edit HTML > ketikan CTRL+F untuk mencari kode ]]></b:skin> 

Jika kodenya sudah ketemu, copy kode dibawah ini dan paste kan kode CSS tersebut tepat diatas kode ]]></b:skin> tadi.

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,.BlogList .item-thumbnail img {  padding: none !important;  border: none !important;  background: none !important;  -moz-box-shadow: 0px 0px 0px transparent !important;  -webkit-box-shadow: 0px 0px 0px transparent !important;  box-shadow: 0px 0px 0px transparent !important;}

Sekarang, coba sobat save template nya, dan cek apakah border foto nya sudah menghilang atau belum, jika belum, berarti ada kode yang perlu dihapus terlebih dahulu dari template sobat hal ini terjadi karena tidak semua template memiliki pengkodean yang sama. Coba cari kode dibawah ini dan hapus dari HTML template sobat:

border: 1px solid $(image.border.color);  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);  box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

Jangan lupa save kembali templatenya setelah kode diatas dihapus. Seharusnya sih sekarang border fotonya sudah gak nampak lagi, namun jika ternyata masih belum bisa juga, sobat bisa tanyakan masalahnya pada kolom komentar di bawah artikel ini, saya akan coba membantu dengan senang hati. Mungkin hanya ini saja, semoga bisa diterapkan juga pada template sobat. Terima kasih sudah berkunjung, jangan lupa subscribe blog saya yah. Sampai jumpa di artikel lainnya.