Cara Menghilangkan Border Gambar

Memecah kebuntuan saat saya mencoba untuk mengotak-atik template blog, yaitu bagaimana Cara Menghilangkan Border Gambar di blog. Setelah saya coba untuk setting template beberapa kali melalui perancangan template yang ada pada blogger ternyata hasilnya tidak ada perubahan, kemudian saya coba kolaborasikan dengan cara manual yaitu dengan menyisipkan kode border="0" pada url gambar dan hasilnya sama saja.

Sebenarnya border gambar tidaklah berpengaruh apa-apa, namun jika dilihat secara seksama terkadang risih, apalagi blog yang sering menggunakan gambar saat menerbitkan postingannya. Siapa sih yang tidak mau tampilan blognya kelihatan elegan dan profesional serta SEO friendly ?. Saya yakin semua belogger mau, begitu pula dengan Anda dan saya.

Untuk itu, pada kesempatan kali ini saya menyempatkan diri untuk memposting artikel ini, yang saya persembahkan untuk anda yang ingin tampilan blognya kelihatan lebih elegan dan menarik. Sebenarnya banyak blogger yang telah memposting mengenai menghilangkan border gambar saat memposting artikel, namun saya lebih memilih versi saya, karena sebelumnya ada yang berbeda dan perbedaan itu yang membuat saya tertarik untuk memposting tutorial ini.

Nah, sekarang bagaimana tertarik untuk mencobanya ? jika demikian perhatikan penjelasan dibawah ini sambil mempraktekannya kedalam blog Anda.

Untuk yang memakai template klasik :

1.  Sign in di blogger
2.  Klik menu Template
3. Klik menu Edit HTML
4. Download template Anda terlebih dahulu atau copy seluruh template kedalam notepad (penting)
5. Cari kode berikut pada css Anda (ini contoh saja):

.post img { <-- perhatikan kode ini

padding:4px;

border:1px solid $bordercolor; <-- yang di rubah kode yg ini

}

tentunya setiap template berbeda-beda, akan tetapi biasanya selalu ada kode .post img

6. Rubah angka 1 (satu) menjadi angka 0 (nol), sehingga kodenya menjadi seperti ini :

.post img {

padding:4px;

border:0px solid $bordercolor;

}

7. klik tombol Simpan Perubahan Template

8. Selesai.

Untuk yang memakai template baru :

1. Sign in
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data
5. Klik kotak kecil di samping tulisan Expand Template Widget
6. Tunggu beberapa saat sampai proses selesai
7. Cari kode berikut pada css sobat (ini contoh saja):

.post img { <-- perhatikan kode ini

padding:4px;

border:1px solid $bordercolor; <-- yang di rubah kode yg ini

}

Jika tidak ada, maka cari kode yang mirip dengan kode dibawah ini :

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

Tentunya setiap template berbeda, kemudian ganti angka yang berwarna merah dengan "0"

8. Klik tombol SIMPAN TEMPLATE

9. Selesai.

Selanjutnya jika anda ingin memasukkan gambar sisipkan kode border="0"  pada url gambar Anda.
Contoh : <img src="http://amen24.googlepages.com/face5.gif" border="0">