Tutorial Menyusun Gambar Sejajar Pada Postingan - Pembeli adalah RAJA, begitupun dalam blog pengunjung adalah segalanya, karena tanpa kehadiran mereka blog anda tidak akan ada artinya, untuk menghargai mereka yang singgah di blog anda, kita sebagai pemilik blog wajib memberikan yang terbaik untuk mereka komsumsi, agar nantinya mereka akan mengenali dan sayang dengan blog anda.
Dan salah satu hal yang terbaik dan menarik adalah terletak pada gambar postingan, itu sebabnya kenapa situs-situs dewasa yang menyediakan konten tentang nice HOT, SEX PICTURES dan semacamnya yang paling banyak dicari dikalangan browsing internet.

Sehubungan dengan itu kerapian dalam menyusun gambar pada postingan juga perlu diperhatikan, terlebih jika anda pemilik blog dengan GAMBAR SHARE sebagai tutorial utama, sehingga berapapun banyak gambar yang kita posting tidak akan memanjang kebawah, Gambar akan sejajar dan terlihat rapi pada postingan, andapun bisa menambahkan sedikit kalimat basa-basi setelahnya.

Lihat pola gambar dibawah ini

Obyek gambar sejajar

Pelajaran MATEMATIKA, menempatkan beberapa obyek pada 1 halaman, jika lebar halaman 900 dan obyek 250, maka berapa besar ukuran yang dibutuhkan untuk 1 obyek agar ketiga obyek tersebut dapat tersusun secara sejajar pada 1 halaman. Nah.! itu pelajaran Matematika, kalau untuk blog menggunakan KODE CSS Perhitungan ( Margin, Padding dan Float )

Dibawah ini hasil gambar setelah disusun menggunakan kode CSS Perhitungan, lebih terlihat rapi bukan.? dibanding memanjang kebawah. Dan gambarnya sudah saya sisipkan beberapa efek yang berbeda-beda, sehingga sedikit akan terlihat menarik saat klik pointer mouse.


obyek gambar sejajar

Obyek gambar sejajar

obyek gambar sejajar

Sedikit penjelasan tentang ketiga kode ini
  1. MARGIN - Kode ini untuk mengatur jarak sisi layout keseluruhan suatu obyek, sehingga kita akan tahu untuk menentukan value-nya dengan PIXEL, EM atau PERSEN
  2. PADDING - Sama dengan margin,tetapi kode ini hanya untuk menentukan jarak sisi pada isi obyek
  3. FLOAT - Kode ini untuk menentukan posisi suatu obyek (right, center, left dan sebagainya)
OK dech.! Berikut Tutorial Menyusun Gambar Sejajar Pada Postingan mengunakan kode CSS perhitungan (Margin, Padding dan Float).

KODE OBYEK (Gambar. I)
<style design [[csstype="http://sahabatblogger77.blogspot.com"]]>
.demo2 {-webkit-transition:opacity .5s ease-out;-moz-transition:opacity .5s ease-out;-ms-transition:opacity .5s ease-out;-o-transition:opacity .5s ease-out;transition:opacity .5s ease-out;}
.demo2:hover {opacity:0.2;}</style>
<div style="margin-left: 10%; margin-right: auto;">
<img class="demo2" src="http://2.bp.blogspot.com/-bJtFHpb55m0/Uw9JwqGm-jI/AAAAAAAAA2A/KAIRKdMTdzY/s1600/130.png" /></div>

KODE OBYEK (Gambar. II)
<style design [[csstype="http://sahabatblogger77.blogspot.com"]]>
.demo4 {-webkit-transition:all 0.5s ease-out;-moz-transition:all 0.5s ease-out;-ms-transition:all 0.5s ease-out;-o-transition:all 0.5s ease-out;transition:all 0.5s ease-out;}
.demo4:hover {-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);}</style>
<div style="margin-left: 40%; margin-top: -13.3em;">
<img class="demo4" src="http://3.bp.blogspot.com/-By8L3nXgqjk/Uw9J5RtbjDI/AAAAAAAAA2M/-RanlmfHU7U/s1600/1000.jpg" /></div>

KODE OBYEK (Gambar. III)
<style design [[csstype="http://sahabatblogger77.blogspot.com"]]>
.demo3 {-webkit-transition:opacity .5s ease-out;-moz-transition:opacity .5s ease-out;-ms-transition:opacity .5s ease-out;-o-transition:opacity .5s ease-out;transition:opacity .5s ease-out;opacity:0.2;}
.demo3:hover {opacity:1;}</style>
<div style="margin-left: 70%; margin-right: auto; margin-top: -13.5em;">
<img class="demo3" src="http://1.bp.blogspot.com/-Mh1owlUFHOk/Uw9J0ODCGEI/AAAAAAAAA2I/WmRl9Fg-GtE/s1600/010.jpg" /></div>

Kode ini untuk tampilan hasil gambar sejajar diatas, saya sesuaikan dengan kondisi lebar halaman postingan blog saya, jika anda ingin copy kodenya silahkan anda ganti dahulu kodenya dan sesuaikan dengan lebar halaman postingan anda, namun jika anda menggunakan kode auto width layout pada Tempalte anda, cukup ganti text MERAH dengan URL gambar anda. Jika ingin menyusun gambar sejajar 4 kekanan dan 3 kebawah, berarti jumlah gambar ada 12, anda cukup atur ulang kode value pada MARGIN dan PADDING, dan gunakan kode FLOAT pada susunan gambar 1,4,5,8,9 dan 12

Semakin banyak gambar termuat,maka hasil tampilan gambar akan terlihat mengecil, anda boleh gunakan kode CSS3 untuk membuat efek Hover pointer klik untuk ZOOM gambar.


Semoga Bermanfaat, dan jika mengalami kesulitan, yukk.!! tanyakan dikomentar, hehe..
HAPPY BLOGGING guys.!

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Tutorial Menyusun Gambar Sejajar Pada Postingan
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

18 komentar

  1. Wah asyik nih tutorialnya mbak..salam kenul

    BalasHapus
  2. Ini yang sering saya perlukan, kelihatan lebih rapi ya kalo dibikin sejajar :)

    BalasHapus
    Balasan
    1. begitulah bang, kalau rapi kan orang akan terkesan senang main keblog kita,bukan begitu bang.?hehe

      Hapus
  3. boleh nih tutor nya :) makasih ya mbak :D

    BalasHapus
  4. mantab mbak selama ini saya hanya menggunakan 1 gambar dalam postingan makasih mbak tutornya

    BalasHapus
  5. hehe saya sendiri masih sering kebalik antara margin dan padding, makasih mbak tutorialnya, bermanfaat sekali :D

    BalasHapus
  6. Selamat pagi Mak... BLKW :)

    BalasHapus
  7. Hasil nya bagus cuy,
    Kerapian suatu blog memang menjadi daya tarik tersendiri

    BalasHapus
  8. Segera akan saya terapkan, soalnya saya membutuhkan tampilan gambar yang bisa sejajar. terima kasih atas tipsnya ya mbak.

    BalasHapus
  9. Tutorial yang bagus biar blog jadi rapi ternyata ada caranya sendiri menyusun gambar

    BalasHapus
  10. sangat bermanfaat... terima kasih

    BalasHapus
  11. kalo pasang langsung 8 foto ada ga tutornya mbak, saya cermati tiap kode hanya bisa untuk satu foto, jadi kalau fotonya 8, berarti harus copas 8x kodenya, baru kita ganti url gambarnya, mohon pencerahanya

    BalasHapus
  12. kalo menambahkan add caption tanpa merubah susunan gambar gimana ya ?

    BalasHapus
  13. Saya sebenarnya butuh tutor diatas...tapi ketika saya coba untuk tampilan mobile..gambar jadi bertumpuk ditengah [-(...ya udah kembali kesemula...thanks share tutornya :)) (o)

    BalasHapus
  14. Mantap benar mas. thanks so much.

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK