Cumulus swf - flash

Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Tips Cara Membuat Gambar-Image Berderet Horizontal

Menata gambar dalam sebuah posting memang merupakan kebutuhan vital yang harus tertangani dengan baik oleh blogger yang dengan sungguh-sungguh ingin memberikan sajian terbaik sebuah posting. Sebuah tampilan yang rapi pasti akan memberikan kepuasan batin tidak hanya bagi pemilik blog, namun juga memberikan kenyamanan tersendiri bagi pembaca blog untuk menikmati semua posting yang telah dibuat dengan kerja keras yang tidak hanya melelahkan secara fisik, namun sekaligus membuat pikiran terkadang terasa lunglai bagai tak bertulang! (He ... he ... memang ada otak bertulang?! Otak DinoPatiSaurus kali, ya?!). Ha ... ha ... rajin pangkal pandai, hemat pangkal kaya, rapi dan teliti bukan saja milik anak TK, namun juga menjadi milik ABRI (Asyiknya Blog Rajin dan Indah).

Menata beberapa gambar dalam sebuah posting memang berbeda dengan apabila kita hanya menampilkan sebuah gambar/image. Untuk satu gambar kita cukup letakkan saja dipojok kiri (float: left;) atau di pojok kanan (float:right;), maka semua selesai sudah dan posting mengalir bagai kali ciliwung. Deras dan suka menghanyutkan orang sekaligus bikin banjir! Iya, nggak?! He ... he ...! Ada cara yang cukup sederhana untuk membuat penataan gambar berderet/berjajar dalam arah horizontal dengan tampilan yang rapi. Satu yang perlu dipahami adalah dengan mengetahui kegunaan margin serta fungsi float. Secara sederhana margin merupakan jarak antara satu bidang dengan bidang yang lain dalam sebuah web/ blog, sedang float berfungsi untuk mengatur posisi gambar atau tag (DIV, p dll) supaya berada pada posisi kanan, kiri, tak dikanan dan/atau kiri dan sekaligus float mampu membuat sebuah tag secara otomatis mempunyai luas sebesar isi yang terkandung di dalamnya. Sifat yang seperti ini amat dibutuhkan untuk membuat materi (gambar atau tag lain) dapat tersusun secara berderet horizontal secara otomatis. Penggunaan float menguntungkan karena membuat width atau height terkadang tidak dibutuhkan untuk ditambahkan.

Untuk membangun sebuah desain yang bernilai lebih tentunya tidak hanya margin dan float yang harus dipahami fungsi dan kegunaanya. Kode CSS yang lain seperti border, padding, background serta beberapa yang lain akan banyak memberikan support hingga dihasilkan sebuah tampilan yang lebih cvcantik dan menarik. Hal yang sebenarnya tidak terlalu sulit untuk dilakukan, namun demikian satu hal yang utama adalah ketelatenan dan semangat serta kemauan yang keras untuk mencoba memahami satu demi satu setiap fungsi dan kegunaan kode HTML. Satu fasilitas (software) yang paling diperlukan untuk mempermudah pemahaman tentang kode HTML adalah dengan cara menggunakan software Dreamweaver atau yang kini lebih dikenal dengan Adobe Dreamweaver CS5. Cobalah untuk mencari software ini supaya lebih mudah dan cepat mempelajari kode CSS, xHTML, javascript ataupun PHP.

Sebagai langkah awal untuk memahami penataan gambar dalam posting, ada baiknya sampeyan juga membuka satu posting di blog ini yang mengupas tentang penggunaan margin untuk menata sebuah gambar yang terdapat dalam:


Kode utama untuk membuat sebuah gambar dalam bentuk deret horizontal :
- penggunaan margin
- float-left
- padding (untuk membentuk penataan ruang yang rapi)
- width dan height
- sebaiknya setiap gambar mempunyai tinggi yang sama, dimana ketinggian gambar bisa langsung diatur melalui kode CSS sekalipun gambar sebenarnya mempunyai tinggi yang tidak sama.
sebagai contoh: jika gambar asli tinggi= 200px, maka gambar bisa dibuat menjadi hanya bertinggi 100px atau misalnya 55px hanya dengan membuat kode CSS --> height: 100px; atau height: 55px;
- untuk border, background, border-radius, box-shadow atau yang lain akan dengan mudah dipelajari setelah pemahaman tentang kode-kode di atas sudah terpelajari dengan baik.



Setelah sampeyan membuka link posting berikut DEMO di atas, silahkan sampeyan coba pelajari kode pembentuk gambar berderet di bawah ini, yang dibuat dengan menggunakan 2 cara:
1. Mengatur gambar secara langsung dengan menyertakan setiap kode CSS yang berupa margin, width, height dan float, padding, border, border-radius dan background dalam tag img.
2. Membuat kode CSS terpisah dengan tag img.

Dengan Cara Pertama


Dengan cara pertama ini seluruh kode disertakan langsung saat posting dilakukan tanpa menambah kode lain di template blog.
- DIV berfungsi untuk membentuk boks image gallery.
- Kode CSS dalam tag img untuk mengatur posisi, jarak dan kerapian gambar.
- Margin berfungsi untuk mengatur jarak setiap gambar supaya sama.
- float-left pada tag img untuk membentuk deret gambar ke arah horizontal (ke kiri).
- Height: 100px; mengatur keseragaman tinggi gambar/image.
- width auto membuat gambar dalam skala sesuai aslinya (perbandingan height dan width-nya).
- width: ...px; Pemberian width dengan ukuran ditentukan (dalam px) dilakukan supaya box membentuk tatanan yang rapi dengan sisa margin atas, kanan, bawah dan kiri berukuran sama (pada boks). Perubahan ukuran width pada beberapa gambar ini bisa dalam bentuk pengurangan atau penambahan dengan tujuan sekedar supaya image gallery menjadi rapi. Tentu saja ada sedikit perubahan pada skala gambar jika dibandingkan dengan ukuran dan skala aslinya sehingga diharapkan perubahan tidak terlalu mencolok. Perubahan pada width ini juga dimaksudkan untuk lebih mempermudah penataan daripada harus dilakukan dengan cara memotong gambar menggunakan software seperti Adobe Photoshop.
<div style="width: 440px;float: left;margin: 10px;padding: 10px 0px 0px 10px;border: 2px solid #000;border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;background: #996600;background: -moz-linear-gradient(top, #996600, #99CCFF);background: -webkit-gradient(linear, 0% top, 100% bottom, from(#996600), to(#99CCFF));">
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://1.bp.blogspot.com/_550XeJhg_o8/TJYTvkSmS8I/AAAAAAAAAoU/zWFh8hb2jSc/s320/gbr1.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://3.bp.blogspot.com/_550XeJhg_o8/TJYTw-AvaPI/AAAAAAAAAos/vsLbByZomPs/s320/gbr9.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://2.bp.blogspot.com/_550XeJhg_o8/TJYULupTjpI/AAAAAAAAAo0/aWeSUN-9atM/s320/gbr13.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width:78px;" src="http://4.bp.blogspot.com/_550XeJhg_o8/TJYTwmapIqI/AAAAAAAAAok/7IbqpBp5Kw4/s320/gbr6.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 115px;" src="http://3.bp.blogspot.com/_550XeJhg_o8/TJYTwHFWOlI/AAAAAAAAAoc/mCFSJ2iO9a4/s320/gbr3.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://3.bp.blogspot.com/_550XeJhg_o8/TJYUM3o_0MI/AAAAAAAAApE/kTJ6o6TYdfs/s320/gbr11.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 170px;" src="http://2.bp.blogspot.com/_550XeJhg_o8/TJYV8bG09dI/AAAAAAAAApU/_TxLTyu-tAI/s320/gbr10.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://4.bp.blogspot.com/_550XeJhg_o8/TJYTUghFzSI/AAAAAAAAAoE/bPhfIRgdY64/s320/gbr114.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://2.bp.blogspot.com/_550XeJhg_o8/TJYUMVuEvAI/AAAAAAAAAo8/x9-6Q3npJQ4/s320/gbr7.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://1.bp.blogspot.com/_550XeJhg_o8/TJYUmK50DfI/AAAAAAAAApM/Exm6RGzhT0o/s320/gbr4.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 98px;" src="http://2.bp.blogspot.com/_550XeJhg_o8/TJYTvOwhFJI/AAAAAAAAAoM/G4nsncp6c0w/s320/gbr2.jpg" />
</div>

Seperti biasanya, supaya tidak terjadi perubahan pada desain atau rancangan image gallery, saat posting dilakukan seluruh kode harus dibuat dalam bentuk rapat sehingga kode di atas dirubah seperti di bawah ini.

<div style="width: 440px;float: left;margin: 10px auto;padding: 10px 0px 0px 10px;border: 2px solid #000;border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;background: #996600;background: -moz-linear-gradient(top, #996600, #99CCFF);background: -webkit-gradient(linear, 0% top, 100% bottom, from(#996600), to(#99CCFF));"><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://1.bp.blogspot.com/_550XeJhg_o8/TJYTvkSmS8I/AAAAAAAAAoU/zWFh8hb2jSc/s320/gbr1.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://3.bp.blogspot.com/_550XeJhg_o8/TJYTw-AvaPI/AAAAAAAAAos/vsLbByZomPs/s320/gbr9.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://2.bp.blogspot.com/_550XeJhg_o8/TJYULupTjpI/AAAAAAAAAo0/aWeSUN-9atM/s320/gbr13.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width:78px;" src="http://4.bp.blogspot.com/_550XeJhg_o8/TJYTwmapIqI/AAAAAAAAAok/7IbqpBp5Kw4/s320/gbr6.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 115px;" src="http://3.bp.blogspot.com/_550XeJhg_o8/TJYTwHFWOlI/AAAAAAAAAoc/mCFSJ2iO9a4/s320/gbr3.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://3.bp.blogspot.com/_550XeJhg_o8/TJYUM3o_0MI/AAAAAAAAApE/kTJ6o6TYdfs/s320/gbr11.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 170px;" src="http://2.bp.blogspot.com/_550XeJhg_o8/TJYV8bG09dI/AAAAAAAAApU/_TxLTyu-tAI/s320/gbr10.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://4.bp.blogspot.com/_550XeJhg_o8/TJYTUghFzSI/AAAAAAAAAoE/bPhfIRgdY64/s320/gbr114.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://2.bp.blogspot.com/_550XeJhg_o8/TJYUMVuEvAI/AAAAAAAAAo8/x9-6Q3npJQ4/s320/gbr7.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://1.bp.blogspot.com/_550XeJhg_o8/TJYUmK50DfI/AAAAAAAAApM/Exm6RGzhT0o/s320/gbr4.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 98px;" src="http://2.bp.blogspot.com/_550XeJhg_o8/TJYTvOwhFJI/AAAAAAAAAoM/G4nsncp6c0w/s320/gbr2.jpg" /></div>

Dengan Cara Kedua


Untuk menggunakan cara ke-2, silahkan simpan kode CSS dalam template setelah login dilakukan. Kode CSS diletakkan dan disimpan di atas kode ]]></b:skin>, dimana DIV dibentuk sebagai sebuah class (div class="bokskongbolang") dan berfungsi sebagai pembentuk boks Image Gallery. Hampir seluruh kode pengaturan gambar dilakukan di sini (kode CSS). Penambahan width: ..px; juga dilakukan pada beberapa gambar dengan tujuan seperti halnya di atas.

Kode CSS


.bokskongkubolang {
width: 440px;
float: left;
margin: 10px;
padding: 10px 0px 0px 10px;
border: 2px solid #000;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: #996600;background:
-moz-linear-gradient(top, #996600, #99CCFF);background: -webkit-gradient(linear, 0% top, 100% bottom, from(#996600), to(#99CCFF));
}
.bokskongkubolang img {
height: 100px;
width: auto;
margin: 0px 10px 10px 0px;
float: left;
}

xHTML

Gunakan xHTML di ruang posting. Dengan cara ke-2 ini maka kode HTML yang digunakan di halaman posting menjadi lebih irit. Sampeyan dapat memanfaatkan kode-kode ini setiap kali memerlukan bentuk tampilan yang sama dengan gambar berbeda tanpa perlu lagi membuat kode-kode HTML yang baru.
<div class="bokskongkubolang">
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://1.bp.blogspot.com/_550XeJhg_o8/TJYTvkSmS8I/AAAAAAAAAoU/zWFh8hb2jSc/s320/gbr1.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://3.bp.blogspot.com/_550XeJhg_o8/TJYTw-AvaPI/AAAAAAAAAos/vsLbByZomPs/s320/gbr9.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://2.bp.blogspot.com/_550XeJhg_o8/TJYULupTjpI/AAAAAAAAAo0/aWeSUN-9atM/s320/gbr13.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width:78px;" src="http://4.bp.blogspot.com/_550XeJhg_o8/TJYTwmapIqI/AAAAAAAAAok/7IbqpBp5Kw4/s320/gbr6.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 115px;" src="http://3.bp.blogspot.com/_550XeJhg_o8/TJYTwHFWOlI/AAAAAAAAAoc/mCFSJ2iO9a4/s320/gbr3.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://3.bp.blogspot.com/_550XeJhg_o8/TJYUM3o_0MI/AAAAAAAAApE/kTJ6o6TYdfs/s320/gbr11.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 170px;" src="http://2.bp.blogspot.com/_550XeJhg_o8/TJYV8bG09dI/AAAAAAAAApU/_TxLTyu-tAI/s320/gbr10.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://4.bp.blogspot.com/_550XeJhg_o8/TJYTUghFzSI/AAAAAAAAAoE/bPhfIRgdY64/s320/gbr114.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://2.bp.blogspot.com/_550XeJhg_o8/TJYUMVuEvAI/AAAAAAAAAo8/x9-6Q3npJQ4/s320/gbr7.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://1.bp.blogspot.com/_550XeJhg_o8/TJYUmK50DfI/AAAAAAAAApM/Exm6RGzhT0o/s320/gbr4.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 98px;" src="http://2.bp.blogspot.com/_550XeJhg_o8/TJYTvOwhFJI/AAAAAAAAAoM/G4nsncp6c0w/s320/gbr2.jpg" />
</div>
Saat posting dilakukan lakukan pemadatan kode (dibuat dalam bentuk rapat sehingga bentuknya menjadi seperti di bawah ini:
<div class="bokskongkubolang"><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://1.bp.blogspot.com/_550XeJhg_o8/TJYTvkSmS8I/AAAAAAAAAoU/zWFh8hb2jSc/s320/gbr1.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://3.bp.blogspot.com/_550XeJhg_o8/TJYTw-AvaPI/AAAAAAAAAos/vsLbByZomPs/s320/gbr9.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://2.bp.blogspot.com/_550XeJhg_o8/TJYULupTjpI/AAAAAAAAAo0/aWeSUN-9atM/s320/gbr13.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width:78px;" src="http://4.bp.blogspot.com/_550XeJhg_o8/TJYTwmapIqI/AAAAAAAAAok/7IbqpBp5Kw4/s320/gbr6.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 115px;" src="http://3.bp.blogspot.com/_550XeJhg_o8/TJYTwHFWOlI/AAAAAAAAAoc/mCFSJ2iO9a4/s320/gbr3.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://3.bp.blogspot.com/_550XeJhg_o8/TJYUM3o_0MI/AAAAAAAAApE/kTJ6o6TYdfs/s320/gbr11.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 170px;" src="http://2.bp.blogspot.com/_550XeJhg_o8/TJYV8bG09dI/AAAAAAAAApU/_TxLTyu-tAI/s320/gbr10.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://4.bp.blogspot.com/_550XeJhg_o8/TJYTUghFzSI/AAAAAAAAAoE/bPhfIRgdY64/s320/gbr114.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://2.bp.blogspot.com/_550XeJhg_o8/TJYUMVuEvAI/AAAAAAAAAo8/x9-6Q3npJQ4/s320/gbr7.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://1.bp.blogspot.com/_550XeJhg_o8/TJYUmK50DfI/AAAAAAAAApM/Exm6RGzhT0o/s320/gbr4.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 98px;" src="http://2.bp.blogspot.com/_550XeJhg_o8/TJYTvOwhFJI/AAAAAAAAAoM/G4nsncp6c0w/s320/gbr2.jpg" /></div>

Cara menyimpan Kode CSS

  • Login ke blogger
  • Setelah memasuki halaman dasboard kemudian KLIK link "Design (Rancangan)".
  • Lanjutkan dengan KLIK link "Edit HTML".
  • Cari kode ]]></b:skin> dan letakkan kode CSS di atasnya.
  • KLIK "Simpan Template"
  • Lanjutkan dengan posting menggunakan kode xHTML di halaman posting.
  • Lihat hasil posting dengan membuka blog.
  • Akan lebih baik jika lakukan percobaan terlebih dahulu melalui blog percobaan yang dapat sampeyan buat dengan membuat sebuah blog lagi atau beberapa buah yang dikhususkan untuk mencoba desain-desain yang baru!


Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :








» Happy Blogging - gubhugreyot «


15 komentar:

  1. wah blog anada sangat bagus,ajarin dong...cara membuat gmbar melayang tru bisa di close

    BalasHapus
  2. kalo di tambahin kaya info gambarnya gimana ?

    BalasHapus
  3. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  4. gan ane bleh boleh minta pencerahannya nga?.. kalo bleh aq mau nanya gi mna cara membuat postingan hanya gambar dan judul yang tampil berjejer dan saat kita mempostingkan postingan otomatis kaya ini gan
    http://3.bp.blogspot.com/-V56sQ8QQ6ik/UhyrBvysphI/AAAAAAAACbI/LSVWcdTSvDw/s1600/postingan.jpg
    mohon pencerahannya gan

    BalasHapus
  5. thanks gan tutornya

    BalasHapus
  6. Mampir gan http://teknoharian01.blogspot.co.id

    BalasHapus
  7. Mampir gan http://teknoharian01.blogspot.co.id

    BalasHapus
  8. Mampir gan http://teknoharian01.blogspot.co.id

    BalasHapus
  9. mantap sob .. salam kenal newbie ^___^ » https://mypos4u.blogspot.co.id

    BalasHapus
  10. Sebuah posting yang bagus, salam persahabatan.
    Saling berbagi itu indah
    Kunjungan baliknya saya tunggu di http://gusluthfy.blogspot.co.id

    BalasHapus
  11. nice inpo gan.. mantap buat ane yang masih belajar. jgn lupa mampir gan http://www.inponih.com/

    BalasHapus
  12. Selamat malam sahabatku Admin http://gubhugreyot.blogspot.co.id.
    Saya ingin tanya, bagaimana mengatur jarak vertikal antara "sidebar left 1" dengan "utama" dengan "sidebar right 1", sebagaimana yang sahabat admin terapkan dalam blog ini sehingga jarak antara sisi kiri - tengah - sisi kanan pada blog bisa rapih dan efisien tempat.

    BalasHapus
  13. Terimakasih ya info nya kunjungi blog saya
    http://jerukmarket.blogspot.com/

    BalasHapus
  14. Gan website saya tentang tiket wisata ( www.tiketwahana.co.id apa bisa seperti itu?

    BalasHapus

 
GR | Edited by | gubhug reyot