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 :
- Sign in di blogger
- Klik menu Template
- Klik menu Edit HTML
- Download template Anda terlebih dahulu atau copy seluruh template kedalam notepad (penting)
- 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 :
- Sign in
- Klik menu Layout
- Klik menu Edit HTML
- Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data
- Klik kotak kecil di samping tulisan Expand Template Widget
- Tunggu beberapa saat sampai proses selesai
- 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">
Contoh : <img src="http://amen24.googlepages.com/face5.gif" border="0">
Sepertinya sudah cukup jelas, oh iya, jika ingin meningkatkan trafic blog anda silahkan baca tutorial daftar blog dofollow serta direktori dan social bookmark doffolow.
0 komentar:
Posting Komentar