Kode HTML dan CSS untuk Memasukkan Gambar di Postingan Blog, Terlengkap 2018
Untuk gambar di dalam postingan blog dapat dimasukkan dengan beberapa cara, dua diantaranya yaitu dengan cara upload langsung dan yang kedua dengan cara manual memasukkan url image diantata tag HTML.
Langsung saja ini caranya.
Pertama kamu masuk editor postingan untuk membuat artikel.
Cari gambar di pencarian Gogle dan salin url dafi gambar.
Selanjutnya sisipkan url gambar yang kamu salin diantat tag image berikut.
<img src="URL GAMBAR KAMU DISINI" />
Atau salin dan tempel kode di atas pada laman editor postingan, jangan lupa ganti tulisan merah (URL GAMBAR KAMU DISINI) dengan url gambar kamu.
Adapun atribut style css untuk mengatur dan menambahkan beberapa efek pada gambar seperti berikut.
1. width = untuk merubah ukuran lebar gambar.
Gambar dengan Lebar 200px + tinggi auto.
2. height = untuk merubah ukuran tinggi gambar.
Gambar dengan Tinggi 200px + lebar 210px.
3. border = untuk menambahkan garis pada gambar.
Gambar dengan Garis 1px red + tinggi 210px + lebar 220px.
4. border-radius = untuk mengatur lekuk pada sudut gambar.
Gambar dengan Kelengkungan sudut 15px + garis 2px blue + tinggi 220px + lebar 230px.
5. box-shadow = untuk memberikan efek bayangan pada gambar.
Gambar dengan Kotak bayangan 10px 10px 10px grey + garis 3px lime + kelengkungan sudut 20px + tinggi 230px + lebar 240px.
6. margin = untuk membatasi jarak luar pada gambar.
Gambar dengan Jarak luar 10px (At&Ba), 20px (Ki&Ka) + garis 4px brown + kelengkungan sudut 25px + kotak bayangan 15px 15px 15px grey + tinggi 240px + lebar 250px.
7. padding = untuk membatasi jarak dalam suatu gambar.
Gambar dengan Jarak dalam 20px + garis 5px green + kelengkungan sudut 30px + kotak bayangan 20px 20px 20px grey + jarak luar 15px 25px + jarak dalam 20px + tinggi 250px + lebar 260px.
8. alt = untuk keterangan gambar berupa teks.
Gambar dengan Keterangan Gambar 100% Full Responsive + garis 6px pink + kelengkungan sudut 35px + kotak bayangan 25px 25px 25px grey + jarak luar 20px 30px + jarak dalam 25px + tinggi 260px + lebar 270px.
Nanti jika gambar tidak dapat dimuat karena suatu alasan kesalahan pada url atau sudah dihapus dari hosting tempat awal gambar diupload, maka yang terihat adalah keterangan yang dimasukkan sebelumnya pada keterangan gambar.
9. a = untuk menambahkan link suatu gambar.
Gambar dengan Link url tujuan + garis 8px chocolate + kelengkungan sudut 44px + kotak bayangan 35px 35px 35px grey + jarak luar 10px 10px + jarak dalam 10px + tinggi 280px + lebar 290px.
Maka hasil lengkapnya akan diperole seperti berikut ini.
<a href="https://2.bp.blogspot.com/-zz6el17lSj4/WhlPBTWVrBI/AAAAAAAAAiA/2qIjjtLdZ6g5g-P6w7rLVnUrLRHvuGudwCPcBGAYYCw/s1600/gambar%2B100%2525%2Bfull%2Bresponsive.png"><img alt="Gambar 100% Full Responsive" src="https://2.bp.blogspot.com/-zz6el17lSj4/WhlPBTWVrBI/AAAAAAAAAiA/2qIjjtLdZ6g5g-P6w7rLVnUrLRHvuGudwCPcBGAYYCw/s1600/gambar%2B100%2525%2Bfull%2Bresponsive.png" width="275" height="265" style="border:8px solid orange;border-radius:41px;box-shadow:7px 8px 10px #ddd;margin:7px 12px;padding:14x;"/></a>
Langsung saja ini caranya.
Pertama kamu masuk editor postingan untuk membuat artikel.
Cari gambar di pencarian Gogle dan salin url dafi gambar.
Selanjutnya sisipkan url gambar yang kamu salin diantat tag image berikut.
<img src="URL GAMBAR KAMU DISINI" />
Atau salin dan tempel kode di atas pada laman editor postingan, jangan lupa ganti tulisan merah (URL GAMBAR KAMU DISINI) dengan url gambar kamu.
Adapun atribut style css untuk mengatur dan menambahkan beberapa efek pada gambar seperti berikut.
1. width = untuk merubah ukuran lebar gambar.
Gambar dengan Lebar 200px + tinggi auto.
2. height = untuk merubah ukuran tinggi gambar.
Gambar dengan Tinggi 200px + lebar 210px.
3. border = untuk menambahkan garis pada gambar.
Gambar dengan Garis 1px red + tinggi 210px + lebar 220px.
4. border-radius = untuk mengatur lekuk pada sudut gambar.
Gambar dengan Kelengkungan sudut 15px + garis 2px blue + tinggi 220px + lebar 230px.
5. box-shadow = untuk memberikan efek bayangan pada gambar.
Gambar dengan Kotak bayangan 10px 10px 10px grey + garis 3px lime + kelengkungan sudut 20px + tinggi 230px + lebar 240px.
6. margin = untuk membatasi jarak luar pada gambar.
Gambar dengan Jarak luar 10px (At&Ba), 20px (Ki&Ka) + garis 4px brown + kelengkungan sudut 25px + kotak bayangan 15px 15px 15px grey + tinggi 240px + lebar 250px.
7. padding = untuk membatasi jarak dalam suatu gambar.
Gambar dengan Jarak dalam 20px + garis 5px green + kelengkungan sudut 30px + kotak bayangan 20px 20px 20px grey + jarak luar 15px 25px + jarak dalam 20px + tinggi 250px + lebar 260px.
8. alt = untuk keterangan gambar berupa teks.
Gambar dengan Keterangan Gambar 100% Full Responsive + garis 6px pink + kelengkungan sudut 35px + kotak bayangan 25px 25px 25px grey + jarak luar 20px 30px + jarak dalam 25px + tinggi 260px + lebar 270px.
Nanti jika gambar tidak dapat dimuat karena suatu alasan kesalahan pada url atau sudah dihapus dari hosting tempat awal gambar diupload, maka yang terihat adalah keterangan yang dimasukkan sebelumnya pada keterangan gambar.
9. a = untuk menambahkan link suatu gambar.
Gambar dengan Link url tujuan + garis 8px chocolate + kelengkungan sudut 44px + kotak bayangan 35px 35px 35px grey + jarak luar 10px 10px + jarak dalam 10px + tinggi 280px + lebar 290px.
Maka hasil lengkapnya akan diperole seperti berikut ini.
<a href="https://2.bp.blogspot.com/-zz6el17lSj4/WhlPBTWVrBI/AAAAAAAAAiA/2qIjjtLdZ6g5g-P6w7rLVnUrLRHvuGudwCPcBGAYYCw/s1600/gambar%2B100%2525%2Bfull%2Bresponsive.png"><img alt="Gambar 100% Full Responsive" src="https://2.bp.blogspot.com/-zz6el17lSj4/WhlPBTWVrBI/AAAAAAAAAiA/2qIjjtLdZ6g5g-P6w7rLVnUrLRHvuGudwCPcBGAYYCw/s1600/gambar%2B100%2525%2Bfull%2Bresponsive.png" width="275" height="265" style="border:8px solid orange;border-radius:41px;box-shadow:7px 8px 10px #ddd;margin:7px 12px;padding:14x;"/></a>
0 Response to "Kode HTML dan CSS untuk Memasukkan Gambar di Postingan Blog, Terlengkap 2018"
Posting Komentar