Memberi Efek Border Pada Gambar Postingan Blog
01.36
9 Comments
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.
Aku bukan siapa-siapa, Aku hanyalah orang biasa, Bahkan terlalu biasa, Bukan Anak orang berada, Bukan juga orang yang sudah berada, Aku hanyalah pemimpi, Yang terus akan bermimpi, Hingga mimpi itu menjadi nyata.
Dengan tambahan efek border jadi semakin bagus tampilan gambarnya ya Mas
BalasHapusIya mbak, sedikit memberi tampilan utuk lebih mensrik.
HapusSaya belum pernah nyoba kang kalau memberi efek border apa bagus ini kang ?
BalasHapusKalau 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 :)
BalasHapusmas, 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
BalasHapusSetau saya kalau yang bukan javacript tidak akan terlalu memberatkan loading.
HapusAku juga menggunakan kode ini agar tampilan gambar murip photo sungguhan. Cuma aku tidak pakai border radius.
BalasHapuscontoh tulisan efek bordernya yang mana atuh mang?
BalasHapussaya 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.
BalasHapus