Cari Artikel Blog Ini

Total Tayangan Laman

CARA MENGATUR PENAMPILAN IMAGE

Koleksi image yang ditampilkan pada blog, baik itu milik anda sendiri maupun dari situs lain yang dipasang pada blog anda, penampilannya dapat anda atur agar sesuai dengan penampilan bagian lainnya dari blog anda.
Caranya mudah, anda hanya perlu menambah kode-kode yang diperlukan.
  • Siapkan alamat URL sebuah image. Misalnya :

    http://4.bp.blogspot.com/_1j80TgNqd_8/Sh1KJa-HRZI/AAAAAAAAArA/Ei34XDyDjVU/S220/PDVD_207.BMP


  • Agar image tersebut dapat tampil, tambahkan kode ini <img src=" diawal kode diatas dan kode ini "/&gt; diakhir kode diatas.
  • Gabungkan alamat URL diatas dengan kode tambahan tadi menjadi seperti ini :
    <img src="http://4.bp.blogspot.com/_1j80TgNqd_8/Sh1KJa-HRZI/AAAAAAAAArA/Ei34XDyDjVU/S220/PDVD_207.BMP"/>


  • Image tersebut akan kelihatan seperti ini :



  • Image diatas tampil dalam ukuran aslinya. Jika anda ingin mengubah ukurannya, tambahkan kode pengaturan lebar dan tinggi yaitu kode width="ukuran lebar yang diinginkan" dan height="ukuran tinggi yang diinginkan"
  • Gabungkan kembali kode yang diperlukan menjadi seperti ini :

    <img width="100" src="http://4.bp.blogspot.com/_1j80TgNqd_8/Sh1KJa-HRZI/AAAAAAAAArA/Ei34XDyDjVU/S220/PDVD_207.BMP"height="100"/>


    Image diatas dipasang pada ukuran lebar 100 px dan tinggi 100 px

  • Image terlihat seperti ini :



  • Dengan berbekal uraian diatas, sekarang anda dapat mengatur ukuran image yang akan ditampilkan pada blog. Bahkan anda juga dapat menata beberapa image yang ditempatkan dalam satu deret. Sebagai contoh perhatikan kode-kode image dibawah ini :

    <center><img width="40" src="http://i639.photobucket.com/albums/uu118/gustihana/hijauaward2-2.gif" height="40"/> <a href="http://agusfauzy.co.cc/" target="_blank"><img border="0" alt="SAHABAT PENA" width="40" src="http://www.wargabisnis.com/image/award02.jpg" height="40"/></a> <img width="40" src="http://i639.photobucket.com/albums/uu118/gustihana/AwardKindlyBlogger1.png" height="40"/> <img width="40" src="http://i639.photobucket.com/albums/uu118/gustihana/Award2.jpg" height="40"/> <img width="40" src="http://i639.photobucket.com/albums/uu118/gustihana/iloveyourblog3.jpg" height="40"/> <img width="40" src="http://i639.photobucket.com/albums/uu118/gustihana/awardblogger20094.jpg" height="40"/> <img width="40" src="http://4.bp.blogspot.com/_U0NQtdELqVQ/Shequht8TQI/AAAAAAAAAXk/LHVrqFhkUaA/s200/New+Award+metode+kaya.png" height="40"/> </center>


    Tambahkan kode <center> pada bagian awal dan kode </center> pada bagian akhir agar image terletak ditengah.

    Agar kelihatan rapih, samakan ukuran seluruh image tersebut. Contoh diatas setiap image (7 image) dipasang pada ukuran lebar 40 px dan tinggi 40 px. Tampilannya seperti ini :

    SAHABAT PENA



Contoh image diatas merupakan image yang sifatnya pasif karena jika anda klik tidak menunjukan adanya perubahan.
Jika anda ingin image yang ditampilkan memiliki fungsi selain sebagai asesoris blog (misalnya jika diklik akan terbuka sebuah situs lain), maka anda harus menambahkan kode tambahan yang merupakan alamat situs yang diwakili oleh image tersebut.
Ikuti cara membuatnya.
  1. Siapkan alamat image yang telah dilengkapi dengan kode untuk menampilkan image tersebut, misalnya :

    <img width="100" src="http://4.bp.blogspot.com/_1j80TgNqd_8/Sh1KJa-HRZI/AAAAAAAAArA/Ei34XDyDjVU/S220/PDVD_207.BM"height="100"/>

  2. Tambahkan kode dibawah ini dan letakan dibagian depan dari alamat image diatas

    <a href="URL sebuah situs"></a>


    Gantilah URL sebuah situs dengan alamat situs yang akan diwakili oleh image tadi.Misalnya http://epg-studio.blogspot.com maka kodenya menjadi seperti ini :


    <a href="http://epg-studio.blogspot.com"></a>


  3. Gabungkan kedua kode diatas menjadi seperti ini :


    <a href="http://epg-studio.blogspot.com"><img width="100" src="http://4.bp.blogspot.com/_1j80TgNqd_8/Sh1KJa-HRZI/AAAAAAAAArA/Ei34XDyDjVU/S220/PDVD_207.BMP" height="100" /></a>
  4. Kode image diatas akan kelihatan seperti ini. Gambar dibawah ini jangan di klik karena akan menutup tips yang sedang anda pelajari sekarang.



  5. Tambahkan kode ini target="_blank" agar ketika anda klik situs yang terbuka akan muncul pada tab baru. Kodenya seperti ini :

    <a href="http://epg-studio.blogspot.com"target="_blank"><img width="100" src="http://4.bp.blogspot.com/_1j80TgNqd_8/Sh1KJa-HRZI/AAAAAAAAArA/Ei34XDyDjVU/S220/PDVD_207.BMP" height="100" /></a>
  6. Sekarang anda boleh klik image dibawah ini dan lihat hasilnya



Setelah anda memahami cara pengaturan penampilan image diatas. Sekarang coba anda buat pada beberapa image yang masing-masing image mewakili satu situs.
selamat mencoba....semoga bermanfaat.

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
5 Comments

5 komentar :

Desy Noer mengatakan...

Wooow kereen, okay aku coba dulu yaa..sekarang lagi tahap apload gambar-gambarnya. Anyway thanks a lot.

KANG_TATANG mengatakan...

Makasih banyak Pak atas trik-trik yang ada di blog Bapak , semoga saya bisa belajar banyak. Salam buat orang Sambas , Serambi Mekkah-nya Kalbar.

gusti&hana mengatakan...

ini dy bang...,mari saya cb dl ya

Tubagus Arief Gunawan mengatakan...

om tentang artikel gif lebih hidup kok punya saya ga mau lebar kaya punya om ades ya yang burung terbang di header punya saya cuma sekitar 10 cm ajalah dari header sebelah kanan

Ades mengatakan...

arief..agar burung terbangnya selebar blog..coba width nya kamu besarkan, klo perlu lebih lebar dari body

Posting Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!