Home » » Cara Mengatur Dan Merapikan Gambar pada sidebar

Cara Mengatur Dan Merapikan Gambar pada sidebar

Written By Cholil Smart on Monday, 28 November 2011 | 01:02

Mengingat pentinganya mengatur dan merapikan tampilan pada sidebar, baik gambar ataupun nongambar, kali ini saya bermaksud untuk berbagi tentang Cara Mengatur Dan Merapikan Gambar pada sidebar. saya rasa blog akan tampak indah dan menarik jika tampilan gambarnya tertata rapi baik pada sidebar ataupun dalam postingan itu sendiri.

Ada empat hal yang harus dilakukan pada pengaturan ini:
  1. lebar image harus disesuaikan dengan ukuran sidebar
  2. lebar dan tinggi untuk semua image disamakan
  3. menghapus perintah enter (<br/>) yang terdapat pada banner.
  4. mengganti perintah enter tersebut dengan perintah margin supaya ada jarak antara image yang satu dengan gambar yang lain.
Menyesuaikan Ukuran
Setiap kolom, baik sidebar maupun postingan, memiliki ukuran yang berbeda. Untuk itu perlu dilakukan penyesuaian ukuran gambar dengan ukuran kolom tersebut. Misalnya kita akan menempatkan 3 buah gambar secara berjajar pada sebuah sidebar yang lebarnya 400px, maka kita harus mengatur ukuran gambar menjadi sekitar 120px (360px:3), dengan asumsi bahwa lebar sidebar telah dikurangi oleh padding kiri-kanan sehingga menjadi sekitar 360px (tergantung pengaturan padding yang ada di CSS-nya).
berikut cara menulis perintahnya

Perintah border:0px supaya gambarnya tidak dibingkai dan perintah center digunakan supaya gambar-gambar tersebut diletakkan di tengah-tengah jika masih ada ruang kosong di sebelah kanannya.

Mengatur Jarak
Ada sebagian sobat blogger yang menambahkan perintah enter (<br/>) pada script banner-nya supaya banner-nya diberi jarak dengan banner berikutnya. Padahal untuk memberi jarak, kita bisa menambahkan perintah margin-top (margin atas) atau margin atas-bawah dan kanan-kiri,
Contohnya sebagai berikut :

Memberi margin atas:


Memberi margin atas-bawah dan kanan-kiri:

Perintah margin: 3px 1px mengandung arti bahwa gambar akan diberi margin ke atas dan ke bawah sebesar 3px, serta ke kanan dan ke kiri sebesar 1px.

Angka-angka di atas bukanlah ukuran baku. Kamu bisa mengaturnya sesuai dengan image-image yang kamu pasang. Itu hanya sekedar contoh yang hasilnya bisa kamu lihat pada menu Banner Teman yang ada di bawah.
Share this article :

12 komentar:

  1. lngsng aq coba ah..
    makasi om tuk infonya

    ReplyDelete
  2. mantap kang... hehehehe.... nice post... salam kenal... :)

    ReplyDelete
  3. infonya keren... langsung disedot... matur sakalangkong kak

    ReplyDelete
  4. terima kasih mas infonya, ini yang saya cari.. tapi saya agak kesulitan untuk posisi tetep kebawah dan ketika saya rubah malah jadi berantakan

    ReplyDelete
  5. betul banget neh caranya om agus sip..
    oh ya tugas saya dah kelar semua om ^_^

    ReplyDelete

Komentar anda saya butuhkan
Komentar anda akan sangat membantu saya
Komentar anda menjadi kebanggaan saya
komentar anda lebih berharga dari berlian

Jangan menyertakan URL pada kotak komentar
karena akan saya anggap sebagai SPAM

Popular Posts

 
Support : Petotu | Pondok Template
| Penyejuk Hati
Copyright © 2013. PETOTU - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger