Memberi Efek Border Pada Gambar Postingan Blog
Penulis Isrofi Achmad
Memberi Efek Border Pada Gambar Postingan Blog. Salah satu yang sering menjadi perhatian para blogger, selain artikel yang disajikan dalam blognya adalah tampilan blog. Tampilan blog yang menarik tentu akan mebuat pengunjung yang datang menjadi berkesan. Namun memberikan banyak efek tampilan yang berlebihan juga akan membuat pengunjung kadang merasa terganggu, untuk itu usahakan untuk memasang widget dan juga efek yang lain secara sewajarnya saja.
Pada kesempatan ini, saya akan membagikan sebuah efek yang bisa digunakan untuk sekedar mempercantik tampilan blog, terutama pada tampilan gambar yang ada didalam postingan. Efek border pada gambar postingan ini sedikit akan membuat gambar yang ada dalam postingan lebih menarik dan tentunya juga tidak akan memberatkan loading blog saat dibuka.
Adapun tampilan gambar dalam postinngan, bisa Anda lihat dalam gambar dibawah ini, pada tepi gambar terdapat border dengan warna abu-abu dan putih yang melingkari gambar.
Pada kesempatan ini, saya akan membagikan sebuah efek yang bisa digunakan untuk sekedar mempercantik tampilan blog, terutama pada tampilan gambar yang ada didalam postingan. Efek border pada gambar postingan ini sedikit akan membuat gambar yang ada dalam postingan lebih menarik dan tentunya juga tidak akan memberatkan loading blog saat dibuka.
Adapun tampilan gambar dalam postinngan, bisa Anda lihat dalam gambar dibawah ini, pada tepi gambar terdapat border dengan warna abu-abu dan putih yang melingkari gambar.
Cara Membuat Efek Border Pada Gambar Postingan
1. Silahkan masuk ke dashboard blogger Anda.
2. Pilih template lalu pilih edite template
3. Silahkan Tekan CTRL + F Untuk memudahkan pencarian
4. Cari kode : ]]></b:skin> atau kode : </style>
5. Setelah ketemu copy kode dibawah ini dan paste tepat di atas kode : ]]></b:skin> atau kode : </style>
/* border all images */
.post-body img{background-color:#F0EFEF;border:3px solid #CACECF;margin:0 4px 2px 0;padding:4px;border-radius:6px;}
.post-body img{background-color:#F0EFEF;border:3px solid #CACECF;margin:0 4px 2px 0;padding:4px;border-radius:6px;}
6. Untuk merubah warna border, silahkan ganti kode warna merah dan hidau dengan kode warna yang Anda inginkan.
7. Untuk memperbesar tampilan bordernya silahkan Anda rubah ukuran pixelnya.
Demikian postingan singkat kali ini, mengenai cara Memeberi Efek Border Pada Gambar Postingan Blog, semoga ada manfaatnya. Salam blogger and happy blogging.
7. Untuk memperbesar tampilan bordernya silahkan Anda rubah ukuran pixelnya.
Demikian postingan singkat kali ini, mengenai cara Memeberi Efek Border Pada Gambar Postingan Blog, semoga ada manfaatnya. Salam blogger and happy blogging.
9 COMMENT
Dengan tambahan efek border jadi semakin bagus tampilan gambarnya ya Mas
Iya mbak, sedikit memberi tampilan utuk lebih mensrik.
Saya belum pernah nyoba kang kalau memberi efek border apa bagus ini kang ?
Kalau di lihat dari cara ini sih cukup gampang juga ya tapi kenapa pas di lakukan suka blank dan lupa. mungkin harus di pelajari lebih lanjut ya jangan 1 kali baca :)
mas, makin byk nambahin script di template blog bs mempengaruhi beratnya loading blog gak ya mas? dipikir" byk jg ya mas script tambahan untuk ini itu..hehe
Setau saya kalau yang bukan javacript tidak akan terlalu memberatkan loading.
Aku juga menggunakan kode ini agar tampilan gambar murip photo sungguhan. Cuma aku tidak pakai border radius.
contoh tulisan efek bordernya yang mana atuh mang?
saya yang udah kebelet pasang juga jadi planga-plongo nih
Atau, kalau tidak mau menggunakan HTML bisa menggunakan aplikasi edit foto seperti photoshop dll, sebelum gambar di upload, lebih simpel.
Terima kasih atas kunjungan dan komentar Anda. Maaf link hidup tidak akan tampil disini, berkomentar yang baik itu salah satu cara mendapatkan backlink yang baik.
EmoticonEmoticon