Langsung ke konten utama

Cepat meski berantakan: Contoh memberi frame pada gambar

Memasukkan gambar pada blog/ web dengan frame gambar yang telah ditentukan sebelumnya bisa dikerjakan dengan cepat dan mudah.

Misal, kita ingin membuat gambar yang berukuran 320x240 pixel dan beralamat (URL) di https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqzgaXK0WFlL-KBcTP64qrIytNHmRVJcBcWSNIphKpWnZBZ2UV3Dbz9n0WzYSHxCbUZF2uxCScm-sffZHmnHltJvo9ikYGzwVLGqf0zLX1A1OYpcRhXu7O9_dw10IM1dyRtT8a6MdXhjA/s320/29062011165.jpg berikut ini sebagai frame


Dan juga telah menyiapkan gambar berukuran 290x200 pixel yang beralamat di http://2.bp.blogspot.com/-tA-ot6Og21w/TDPpVNOXQkI/AAAAAAAAABQ/O03yvzb2Qa8/s1600/Warung+sayur+lengkap berikut ini sebagai isinya


Maka yang perlu dilakukan adalah membuat blok div yang berukuran sama dengan gambar frame (320x240) sebagai tempat gambar tersebut dan menjadikan gambar frame tersebut sebagai background-nya

daftar style untuk yang digunakan:
StyleValue
background-imageurl('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqzgaXK0WFlL-KBcTP64qrIytNHmRVJcBcWSNIphKpWnZBZ2UV3Dbz9n0WzYSHxCbUZF2uxCScm-sffZHmnHltJvo9ikYGzwVLGqf0zLX1A1OYpcRhXu7O9_dw10IM1dyRtT8a6MdXhjA/s320/29062011165.jpg')
background-positioncenter center
background-repeatnone
height320px
width240px

kode:
<div style="background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqzgaXK0WFlL-KBcTP64qrIytNHmRVJcBcWSNIphKpWnZBZ2UV3Dbz9n0WzYSHxCbUZF2uxCScm-sffZHmnHltJvo9ikYGzwVLGqf0zLX1A1OYpcRhXu7O9_dw10IM1dyRtT8a6MdXhjA/s320/29062011165.jpg'); background-position: center center; background-repeat: none; height: 320px; width: 240px;"> 
</div>

Dan memasukkan gambar isi kedalam blok div tersebut dengan menggunakan tag img

PropertyValue
srchttp://2.bp.blogspot.com/-tA-ot6Og21w/TDPpVNOXQkI/AAAAAAAAABQ/O03yvzb2Qa8/s1600/Warung+sayur+lengkap

StyleValue
background-repeatnone
height290px
width200px
margin-left20px
margin-top13px
positionabsolute

kode:
<div style="background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqzgaXK0WFlL-KBcTP64qrIytNHmRVJcBcWSNIphKpWnZBZ2UV3Dbz9n0WzYSHxCbUZF2uxCScm-sffZHmnHltJvo9ikYGzwVLGqf0zLX1A1OYpcRhXu7O9_dw10IM1dyRtT8a6MdXhjA/s320/29062011165.jpg'); background-position: center center; background-repeat: none; height: 320px; width: 240px;"> 
<img src="http://2.bp.blogspot.com/-tA-ot6Og21w/TDPpVNOXQkI/AAAAAAAAABQ/O03yvzb2Qa8/s1600/Warung+sayur+lengkap" style="height: 290px; margin-left: 20px; margin-top: 13px; position: absolute; width: 200px;" /> 
</div>

Margin bisa dimainkan dengan mudah untuk mencoba variasi peletakan gambar isi.


Jika dirasa perbedaan antara frame dengan gambar didalamnya kurang jelas, bisa ditambahkan border pada gambar isi


Tambahan style:
StyleNilai
border2px solid black

kode:
<div style="background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqzgaXK0WFlL-KBcTP64qrIytNHmRVJcBcWSNIphKpWnZBZ2UV3Dbz9n0WzYSHxCbUZF2uxCScm-sffZHmnHltJvo9ikYGzwVLGqf0zLX1A1OYpcRhXu7O9_dw10IM1dyRtT8a6MdXhjA/s320/29062011165.jpg'); background-position: center center; background-repeat: none; height: 320px; width: 240px;"> 
<img src="http://2.bp.blogspot.com/-tA-ot6Og21w/TDPpVNOXQkI/AAAAAAAAABQ/O03yvzb2Qa8/s1600/Warung+sayur+lengkap" style="height: 290px; margin-left: 20px; margin-top: 13px; position: absolute; width: 200px;" /> 
</div>

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Memasang Android 4.4 KitKat di Samsung Galaxy W (Wonder) GT-I8150

Membuat backup Singkronisasikan handphone (contact, dll) Saya membuat backup SMS dengan SMS To Text, dan riwayat panggilan dengan Call Logs Backup and Restore Download Download Android SDK Tools Windows: http://dl.google.com/android/installer_r22.3-windows.exe Linux: http://dl.google.com/android/android-sdk_r22.3-linux.tgz Android SDK Tools juga terdapat dalam pake Android SDK Windows 32 bit: http://dl.google.com/android/adt/adt-bundle-windows-x86-20131030.zip Linux 32 bit: http://dl.google.com/android/adt/adt-bundle-linux-x86-20131030.zip Download ClockworkMod (CWM) Recovery Versi minimal untuk memasang CM 11 adalah versi 6.0.4.4. Jika menggunakan versi yang dibawah/sebelum itu, akan muncul pesan kesalahan "set_metadata_recursive: some changes failed" pada saat memasang CM nantinya. Download versi versi 6.0.4.5 di http://goo.im/devs/arco/ancora/cwm/recovery-clockwork-6.0.4.5-ancora.zip Download CyanogenMod (CM) 11 http://goo.im/devs/arco/ancor...
Posting Komentar
Baca selengkapnya

Rekomendasi Untuk Mempersingkat Waktu Eksekusi Katalon Web Test

Latar Belakang Permasalahan Salah satu kriteria test yang baik adalah memiliki coverage yang baik. Tetapi lamanya waktu eksekusi seringkali jadi salah satu alasan untuk men- take out case - case yang ada agar test menjadi layak untuk ditunggu eksekusinya dan layak untuk dieksekusi sesering kebutuhan yang men- trigger -nya. Untuk itu diperlukan langkah-langkah untuk mempersingkat waktu tunggu test semaksimal mungkin tanpa harus mengeluarkan case - case yang telah disiapkan sebelumnya. Designed by Freepik Lingkungan Eksekusi Tes Pada tulisan ini diasumsikan test dieksekusi pada lingkungan CI/CD yang: 1. menggunakan commandline katalonc dari KRE (Katalon Runtime Engine). 2. Tiap job pipeline CI/CD bisa mengeksekusi beberapa test suite yang berbeda secara berurutan Rekomendasi Kesepakatan Sepakati dengan user , batas waktu test maksimum Batas waktu test perlu disepakati agar test bisa diakhiri dengan kesimpulan FAILED, jika melebihi batas waktu yang disepakati Sepakati dengan user , ...
Posting Komentar
Baca selengkapnya

vi / emacs keybinding di abiword

vi / emacs keybinding di abiword vi / emacs keybinding di abiword Author: Indra Ginanjar < indraginanjar@gmail.com > Title: vi / emacs keybinding di abiword Date: 2014-04-12 (Sabtu, 12 April 2014) Pendahuluan abiword telah memiliki fungsi keybinding (fungsi keyboard dan shortcut ) vi dan emacs meskipun belum secara lengkap. Karena belum lengkap dan kekurangan tenaga developer untuk menyempurnakannya, kemampuan keybinding ini tidak ditampilkan untuk user umum dan juga tidak disupport oleh developer -nya. Sehingga untuk menggunakannya user harus mengubah file konfigurasi abiword sendiri. Pada tulisan ini akan dijelaskan langkah-langkah yang diperlukan untuk mengaktifkan fungsi keybinding vi atau emacs pada abiword. Langkah-langkah Jalankan abiword minimal sekali agar ia menghasilkan file konfigurasi ~/.config/abiword/profile Catatan: ~ sama dengan lokasi folder home Edit file ~/.config/abiword/profile di dalam tag <AbiP...
Posting Komentar
Baca selengkapnya