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

0 Comment:

Posting Komentar