earth

Guestbook

/* Iklan google ads */
Meski hari ini keadaan spidi tengah error, tapi berhubung banyak sobat yang, setelah melihat susunan banner pada TabView SC, menanyakan cara bagaimana bisa terlihat rapih seperti itu (bahkan ada juga yang menanyakan bagaimana caranya supaya bisa menjadi tiga kolom), maka saya paksakan juga menulis artikel seputar itu.

Ada empat hal yang harus dilakukan pada pengaturan ini: Pertama, lebar image harus disesuaikan dengan ukuran sidebar, kedua, lebar dan tinggi untuk semua image disamakan, ketiga, menghapus perintah enter (<br/>) yang terdapat pada banner, dan keempat, mengganti perintah enter tersebut dengan perintah margin supaya ada jarak antara image yang satu dengan image lainnya.
Menyesuaikan Ukuran
Setiap kolom, baik sidebar maupun blog-post, memiliki ukuran yang berbeda-beda. Untuk itu perlu dilakukan penyesuaian ukuran gambar (image) dengan ukuran kolom tersebut. Misalnya kita akan menempatkan 3 buah image 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).
Cara menuliskan perintahnya seperti ini:
<center>
<img style="border:0px; width:120px; height:50px;" src="URL image 1"/>
<img style="border:0px; width:120px; height:50px;" src="URL image 2"/>
<img style="border:0px; width:120px; height:50px;" src="URL image dst."/>
</center>
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, misalnya seperti:
Memberi margin atas:
<center>
<img style="border:0px; width:120px; height:50px; margin-top:5px;" src="URL image 1"/>
<img style="border:0px; width:120px; height:50px; margin-top:5px;" src="URL image 2"/>
<img style="border:0px; width:120px; height:50px; margin-top:5px;" src="URL image dst."/>
</center>

Memberi margin atas-bawah dan kanan-kiri:
<center>
<img style="border:0px; width:120px; height:50px; margin:3px 1px;" src="URL image 1"/>
<img style="border:0px; width:120px; height:50px; margin:3px 1px;" src="URL image 2"/>
<img style="border:0px; width:120px; height:50px; margin:3px 1px;" src="URL image dst."/>
</center>

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.

Nah, segitu aja sob, semoga bermanfaat dan bisa dimengerti.
Selamat mencoba....
  • Artikel Terkait Dengan HTML Tutorials

    Terimakasih sudah membaca artikel SC Community's Blog

    26 komentar

    Nah akhirya... keluar jauga...artikel ini

    Lihat aja blog kami kami bingung ngatur gambar2nya

    26 Februari 2010 07.52  

    wah itu gw banget yang suka kasih perintah br ... ckckckckck... tau aj

    26 Februari 2010 07.57  

    Berarti kerja keras nih buat artikel nya ya... wah...SEMANGAT!

    26 Februari 2010 07.58  

    Hehehee...
    akhirnya diposting juga setelah banyak permintaan...
    tenkyu kang..

    26 Februari 2010 12.47  

    salam sobat
    trims ilmunya,
    jadi harus tahu ukuran sidebar ya,,bang
    agar sesuai dengan lebar imagenya..

    26 Februari 2010 15.29  

    Tutorial yang sangat berguna kang..
    makasih banyak.

    26 Februari 2010 15.41  

    informasinya sgt berguna...

    26 Februari 2010 20.19  

    Postingnya Mantap2, Nich... Btw, kiranya bersedia, alamat blog saya yang sebelumnya blogspot, boleh gak minta di ubah menjadi dot com.

    Yang sebelumnya ini:
    http://andriwiyasa.blogspot.com

    menjadi:

    AndriWiyasa.com

    Terimakasih sebelumnya.

    Dah lama nich, tak berkunjung di sini...

    27 Februari 2010 05.01  

    Assalamu'alaikum kang...
    wilujeng enjing...
    kang.. aduh gimna cara membuat scroll buat blogs sahabat jadi biar gak panjang...
    htur nuhun. Wass

    27 Februari 2010 10.52  

    rahasiana di buka oge...he...he....siplah...

    28 Februari 2010 12.07  

    tq bro tutorialnya mantap simpel tapi tepat sasaran, oh ya menu bar blog ini unik banget.
    sekali lagi tanks infonya bro.

    2 April 2010 08.02  

    waduuuh...masih gak paham ane...cb deh liat blog ane acak2an iklan bannernya...

    26 Agustus 2010 02.46  

    trima kasih brow... akhirnya aku bisa merapikan blogku skrg.

    7 Oktober 2010 09.39  

    bg,,,
    cara buat bingkai seperti win vista itu gmn bg..
    mhon solusinya..
    klo bs bles k blog saya y bg..

    nice blog..

    20 Desember 2010 20.56  

    terima kasih komentarnya ...
    ini sangat membantu saya

    27 Januari 2011 16.10  

    ... makasih, ini yg saya cari !

    6 Maret 2011 04.25  

    bos ko masih bisa di copy, kalo ga percaya coba pakai ctrl + c kalau pakai mouse mang ga bisa tapi kalo pakai yg td itu ttp bisa...
    cuma buat masukan bos...

    17 Maret 2011 20.59  

    sip booss lebih keren skrang

    5 April 2011 18.49  

    Hmmm....udah seratus tahun aku cari tips yg sprti ini,,baru ketemu..makasi bro!!Hmmm....udah seratus tahun aku cari tips yg sprti ini,,baru ketemu..makasi bro!!

    13 Agustus 2011 00.50  

    makasih mas, kunjungi juga blog adik ya http://prediksibola888.blogspot.com

    3 Desember 2013 13.57  

    Tambahkan Komentar

    • Dimohon untuk tidak mencantumkan link aktif pada komentar sobat.
    • Gunakan Ruang Tanya pada TabView Menu, jika ingin menanyakan sesuatu yang tidak ada kaitannya dengan artikel di atas.
    Kang eNeS

    Terimakasih atas semua apresiasi yang sobat berikan.

    10 Artikel Terbaru

    10 Artikel Terpopuler