Tutorial Menyusun Gambar Sejajar Pada Postingan

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

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.

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.

LIHAT KODE

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

HAPPY BLOGGING guys.!