Cara Membuat Bingkai Pada Gambar di Postingan

Bagikan :

Tweet

Bagaimana meletakan kotak bingkai pada gambar? Meletakan atau memberinya itu mudah, anda hannya perlu menambahkan bolder di gambar Artikel anda.

Border serdiri banyak jenis nya, Yang saya ketahui

1. Dashed adalah border untuk garis putus-putus panjang
2. Doted kebalikan dari Dashed putus-putus pendek
3. Solid border untuk garis biasa garis lurus dan masi banyak lagi saya hanya tau 3, hihi ^^

Tanpa panjang lebar kita langsung saja ketopik pembahasan kita tentang 

~ Cara Membuat Bingkai Pada Gambar di Postingan blogger/blogspot

• Pertama siab kan dahulu url gambar, Misalkan Kalo di contoh ini saya mengunakan url berikut

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi66aQsSH2uKTFN1RdUZz8dMdqw2on8cjxQq2yMH5eOzmhNmuohn8nAoJGqnIPpBey4PvzAAMxJty1QmrwWq1EyBhv0Dv-6Cn7V-ZCN_nQ13pttylFicTTBQg111LH0F8StfndDurVuYjc/s1600/AAA.jpg

• Untuk menampilkan gambar mengunakan kode html

<img style="padding:3px;border:6px solid #ea6153; background:#fafafa;" src="http://url gambar"/>

+Keterangan
- Padding:3px jarak border dengan gambar
- Border:6px ketabalan garis
- Slolid #ea6153 warna garis border dan
- Background:#fafafa adalah warna latar belakang bingkai

Jika semua kode saya gabungkan menjadi seperti berikut:



Anda juga bisa mengedit nya sesuka anda, Contoh saya merubah border menjadi 8 dan solid saya ubah #4c4747



Bonues : Code untuk menampilkan bayangan atau box shadow, Hanya tinggal menambahkan code ini setelah titik koma pada code html img

box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.6); -moz-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.6); -webkit-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.6); height: auto;

Tag : blogger, Tutorial