Selasa, 17 Maret 2015

Membuat Posisi Gambar di Samping Text


By on 23.25



Berikut ini ada cara Membuat Posisi Gambar di Samping Text.
Agar tampilan postingan blog bisa lebih menarik dengan membuat posisi gambar berada di samping text dengan cara menambahkan code di bahah ini :
tulis teks disini

Ket :
Ganti URL Gambar mmenjadi Url gambar kamu

Masih banyak mode lain yang bisa di coba..
Saya ambil dari blognya ciecek


Untuk membuat sebuah tulisan menjadi menarik, memberi tambahan gambar adalah salah satu caranya disamping memperkuat nilai SEOnya dari segi traffic, karena tulisan yang berisi gambar tidak hanya akan ditemukan melalui penelusuran web tapi juga melalui penelusuran gambar.

Juga dapat menambah nilai seni pada blog anda sehingga dapat membuat pengunjung blog anda betah melihat tampilan blog yang menarik
Ada tiga mode yang dapat saya bagikan, berikut ketiganya :

Cara membuat gambar ilustrasi berada di sisi kiri atau kanan awal teks


 Ini adalah contoh Postingan yang posisi Gambar si Samping Kiri
 Dengan cara menambahkan kode ini di bahian HTML :
 ________________________________________________


 ________________________________________________


Membuat posisi gambar disamping teks dengan beberapa modifikasi

Ini adalah yang KEDUA yang posisinya berada di samping kanan teks masih menggunakan tag , atribut dasar style="float:right;" pada gambar dan tambahan atribut perataan teks (text-align:justify). Margin, padding, dan width diatur secara default. Lihat format selengkapnya berikut ini :

Yang membedakan dengan mode yang dibawah adalah style="float: left;
Coba anda perhatikan kode ini dan bedakan :


Memodifikasi tampilan

Seperti tampilan bibagian atas kita bisa memodifikasi tampilan dengan menambah background dan garis batas



Keterangan :

  • Nilai atribut Style=”float:left” dipakai untuk menentukan posisi gambar disebelah kiri, ganti kata “left” dengan kata “right” untuk menentukan letak gambar disebelah kanan, untuk meletakan gambar di tengah-tengah teks saya juga belum bisa :mrgreen:
  • Nilai atribut style="text-align:justify;" dipakai untuk merapihkan posisi kanan dan kiri teks agar sejajar rata, tidak digunakan juga tidak apa2
  • Margin 0=atas gambar, 8=kanannya, 4= bawahnya, 0=kirinya di pakai untuk memisahkan jarak antara teks dengan gambar agar tidak menempel / terlalu dekat
  • Atribut width:75% dipakai untuk merubah ukuran lebar teks dan gambar. memperkecil atau memperbesar bila tidak dipakai maka ukuran lebar kembali ke pengaturan default seperti contoh gambar 1 dan 2
  • Untuk memberi ruang pada teks
  • disebelah gambar, tentu ukuran lebar gambar (width) harus dikecilkan. Seberapa kecil tergantung tema yang digunakan.
  • Kode tersebut berjalan baik untuk HTML5
Sumber : smartofpedia1.blogspot.com


About The Blogger

"Belumkah datang waktunya bagi orang-orang yang beriman, untuk tunduk hati mereka mengingat Allah dan kepada kebenaran yang telah turun (kepada mereka), dan janganlah mereka seperti orang-orang yang sebelumnya telah diturunkan Al Kitab kepadanya, kemudian berlalulah masa yang panjang atas mereka lalu hati mereka menjadi keras. Dan kebanyakan di antara mereka adalah orang-orang yang fasik." (QS. Al Hadid 57 : 16)

1 komentar: