Cara Membuat Border Image/Bingkai Gambar pada Blog

Cara Membuat Border Image/Bingkai Gambar pada Blog » Pada kesempatan kali ini saya akan memberikan trik mengenai cara membuat bingkat pada gambar secara otomatis pada blog di dalam postingan. Border Image memberikan efek bingkai pada setiap gambar secara otomatis dengan border radius setiap sudutnya. Tampilan yang dihasilkan trik ini bisa Anda lihat pada postingan saya atau pada gambar di dalam postingan ini. Menggunakan border image dengan efek radius menampilkan kesan yang bagus dan agar postingan rapi dengan ditambahi gambar yang dihiasi border image radius. Nah jika Anda ingin menambahkan kode border image kedalam blog Anda silahkan simak tutorial di bawah ini.

Berikut ini contoh gambar/image dengan border image radius.
Perhatikan di sisi kanan, kiri, atas, dan bawah terdapat boder berwarna abu-abu dan dengan bingkai melengkung setiap sudutnya.

Lagkah-langkah memasang Border Image Radius Otomatis
  • Login ke blogger,
  • Pilih Template » Edit HTML
  • Silahkan cari kode di bawah ini,
]]></b:skin>
  • Selanjutnya, letakan CSS di bawah ini sebelum kode di atas,
.post-body img{background-color:#F0EFEF;border:2px solid #CACECF;margin:0 4px 2px 0;padding:4px;border-radius:5px;}
  • Terakhir, Simpan Template.
Jika Anda ingin mengganti warna pada CSS tersebut silahkan cari disini.
Cukup mudah bukan, hanya 2 menit sudah selesai membuat border image radius kedalam blog Anda.

Sekian artikel mengenai  Cara Membuat Border Image/Bingkai Gambar pada Blog
Semoga artikel ini dapat bermanfaat atau hanya sekedar info.
Catatan : Tidak lupa untuk selalu melihat Artikel Terkait pada seidebar.
Terima kasih.
4.5

8 komentar:

Anonim mengatakan...

Nice sharing Mas dan terima kasih untuk tutorialnya....saya sudah menerapkan dan berhasil....

Unknown mengatakan...

terimakasih mas, berhasil.
Sangat bermanfaat :)

Aditya mengatakan...

alhamdulillah berhasil diterapkan di blog saya, thanks sob...

Visit >> Super Refreshing

Anonim mengatakan...

makasih sob sudah berbagi sangat bermanfaat sukses sudah saya coba

Anonim mengatakan...

Artikel ini semua adalah hasil copy bin paste dari blog yang sudah terhapus oleh Kang Kosine.

ahmad rivai (UcingCorp) mengatakan...

apa apaan nih, keren banget lah (Y) kunjungannya ya ke otoriv.blogspot.com hasil dari css ini hehe

Al Bani HR mengatakan...

lengkap bgt tutorialnya

Ghost Boy mengatakan...

mantap sekali mas ijin test di blog saya Otoholic

Posting Komentar