Hanya arsip

halaman asli ada di http://kolom-tutorial.blogspot.com

Membuat Gambar Horizontal Thumbnail Dengan CSS

Sambil menunggu blog Kang Rohman Dot Com siap untuk di tayangkan, kita iseng-iseng
bermain dengan CSS dulu deh. Kali ini kang Rohman akan coba mengulas tentang cara membuat gambar horizontal thumbnail dengan CSS. Apa
itu horizontal Thumbnail? untuk pengertian kang rohman rasa tidak penting karena memang tidak tahu, ini juga bikin judul asal-asalan
biar sedikit terdengar keren . Biar
tambah keren lagi sok atuh di sorot gambar-gambar di bawah ini :

 


Gambar Thumbnailgambar besar


Gambar Thumbnailgambar besar


Gambar ThumbnailGambar Thumbnail

 

 

 

 

 

 

Bagaimana bagus tidak? kalau anda ingin tahu cara membuatnya ya musti di baca sampai akhir biar
tambah seru. Begini nih caranya :

  • Pertamax. Buatlah terlebih dahulu gambar-gambar yang sekiranya mau di pajang di blog atau website
    milik anda. Misalkan gambar yang mau di pajang seperti ini :
  •  

    gambar besar

     

    gambar besar

     

    gambar besar

     

     

  • Keduax. Uploadlah gambar-gambar tersebut ke hosting untuk menyinpan gambar, mau di blogger atau
    pada hosting lainnya seperti google pages,
    photobucket, geocities, dll. Misalkan
    saya telah menguploag gambar-gambar diatas, dan masing-masing mempunyai mempunyai alamat gambar sebagai berikut :

     



     

  • Ketigax. simpanlah kode CSS berikut diantara style sheet css yang ada :
  •  

     



    #latar {
    padding:20px;
    margin:25px;
    float:left;
    background:#ebe9dc;
    border-right: 3px solid #ccc;
    border-bottom: 3px solid #ccc;
    }

    .tabel {
    padding:5px;
    margin:0;
    float:left;
    }

    .thumbnail {
    position:relative;
    z-index:100;
    }

    .thumbnail a.gambar-kecil, .thumbnail a.gambar-kecil1:visited {
    display:block;
    text-decoration:none;
    background:transparent;
    top:0;
    left:0;
    border:3px solid #000;
    }

    .thumbnail a img {
    border:0;
    }

    .thumbnail a.gambar-kecil:hover {
    text-decoration:none;
    background-color:#8c97a3;
    color:#000;
    border:3px solid #43b843;
    }

    .thumbnail a .gambar-besar1 {
    display:block;
    position:absolute;
    width:0;
    height:0;
    border:0;
    top:0;
    left:0;
    }

    .thumbnail a.gambar-kecil:hover .gambar-besar1 {
    display:block;
    position:absolute;
    top:100px;
    left:0px;
    width:400px;
    height:300px;
    border:5px solid #000;
    }

    .thumbnail a .gambar-besar2 {
    display:block;
    position:absolute;
    width:0;
    height:0;
    border:0;
    top:0;
    left:0;
    }

    .thumbnail a.gambar-kecil:hover .gambar-besar2 {
    display:block;
    position:absolute;
    top:100px;
    left:0px;
    width:400px;
    height:300px;
    border:5px solid #000;
    }

    .thumbnail a .gambar-besar3 {
    display:block;
    position:absolute;
    width:0;
    height:0;

    border:0;
    top:0; left:0;
    }

    .thumbnail a.gambar-kecil:hover .gambar-besar3 {
    display:block;
    position:absolute;
    top:100px;
    left:0px;
    width:400px;
    height:300px;
    border:5px solid #000;
    }


     

  • Keempax. Silahkan simpan kode di bawah ini di dalam body template ( mau lewat elemen halaman juga boleh ).
  •  


    <div id="latar">
    <span class="tabel">
    <span class="thumbnail"><a class="gambar-kecil" href="#nogo" title="Gambar Thumbnail"><img src="http://photos.friendster.com/photos/25/77/27287752/2553499759340l.jpg&quot; width="90" height="75" title="Gambar Thumbnail" alt="Thumbnail image" /><img class="gambar-besar1" src="http://photos.friendster.com/photos/25/77/27287752/2553499759340l.jpg&quot; title="gambar besar" alt="gambar besar" /></a></span></span>
    <span class="tabel">

    <span class="thumbnail"><a class="gambar-kecil" href="#nogo" title="Gambar Thumbnail"><img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg&quot; width="90" height="75" title="Gambar Thumbnail" alt="Thumbnail image" /><img class="gambar-besar2" src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg&quot; title="Enlarged view of image" alt="Enlarged view of image" /></a></span>
    </span>

    <span class="tabel">
    <span class="thumbnail"><a class="gambar-kecil" href="#nogo" title="Gambar Thumbnail"><img src="http://photos.friendster.com/photos/25/77/27287752/26659203510677l.jpg&quot; width="90" height="75" title="Gambar Thumbnail" alt="Thumbnail image" /><img class="gambar-besar2" src="http://photos.friendster.com/photos/25/77/27287752/26659203510677l.jpg&quot; title="gambar besar" alt="gambar besar" /></a></span>
    </span>
    </div>


  • Kelimax. Di saving aja biar datanya tersimpan. Trus ya udah, kan sudah klimaks, tinggal lemesnya aja deh .
  •  

    Masih bingung dengan cara di atas? begini deh kalau memang masih bingung, cara yang lebih detail adalah seperti ini :

    Langkah pertama :

    1. Sign in di blogger dengan ID anda tentunya dong.
    2. Klik menu Layout.
    3. Klik menu Edit HTML.
    4. Klik link Download full template, silahkan save untuk backup data (penting).
    5. Copy kemudian paste kode CSS berikut di atas kode ]]></b:skin>
    6. Klik tombol SIMPAN TEMPLATE

    Langkah kedua :

    1. Klik menu Elemen Halaman
    2. Klik tulisan Tambah sebuah Elemen Halaman
    3. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan JavaScript/HTML
    4. Copy paste kode berikut ke dalam elemen yang muncul
    5. Klik tombol Simpan
    6. Pindahkan elemen yang baru di buat ke tempat yang kira-kira tepat menurut anda.
    7. Klik tombol Simpan yang berada di sebelah atas
    8. Selesai.

    Tambahan dhenk, pada kode di atas ada tertulis seperti ini :


    <a class="gambar-kecil" href="#nogo" title="thumbnail image">

    Tulisan #nogo tidak usah di ganti apabila gambar yang di pajang
    tidak ingin nge link ke manapun, namun apabila photo yang di pajang ingin dalam bentuk link, silahkan
    ganti tulisan #nogo dengan alamat URL, misal di ganti dengan
    http://www.kangrohman.com atau apa saja dhenk terserah.

    Basa basi

    Kode-kode di atas saya buat dan boleh di pakai untuk umum secara gratis, namun apabila anda menginginkan
    kang rohman lebih eksis lagi dalam membuat kode-kode yang lainnya, silahkan yang mau mengirimkan donasi
    untuk sekedar uang jajan anak-anak kang rohman :

    yang mau beliin saya kopi, silahkan klik di sini

    I’m wait and see.

    Iklan

    24 Februari 2008 - Posted by | aksesori blog, blogspot tutorial

    17 Komentar »

    1. Wah, makin sukses aja ni kang. Ngomong2 blog yang baru tentang apa?

      Komentar oleh Anonymous | 24 Februari 2008 | Balas

    2. masih tetep aja tentang blogger, cuma pindahan rumah aja. cuma masih agak lama kayanya, soalnya harus edit lagi postingan saya yg di blogger agar sesuai dengan engine wordpress

      Komentar oleh Rohman | 24 Februari 2008 | Balas

    3. sip nih kang bisa di coba..caranya lengkap sekali. thanks

      oh iya kang, rencana kemaren nunggu mas iwan aja ya dia lagi bernangkat ke batam. di tunggu kelanjutannya πŸ™‚

      Komentar oleh Anonymous | 25 Februari 2008 | Balas

    4. maaf double, lupa masukin url πŸ™‚

      sip nih kang bisa di coba..caranya lengkap sekali. thanks

      oh iya kang, rencana kemaren nunggu mas iwan aja ya dia lagi bernangkat ke batam. di tunggu kelanjutannya πŸ™‚

      Komentar oleh oom | 25 Februari 2008 | Balas

    5. @oom : thanks ya om. iya deh ntar kita ketawa bersama lagi. heuheuheu

      Komentar oleh Rohman | 25 Februari 2008 | Balas

    6. semoga blog yang baru semakin rame daripada yang sudah ada. jangan lupa kang rohman ngasih free download atau free free yang lain. visitor sukanya yang free2 sih … πŸ˜€

      Dukung saya untuk menang di kompetisi SEO tingkat dunia di seocontest2008

      Komentar oleh dudemjk | 26 Februari 2008 | Balas

    7. Kang tolongin ya. aku lagi mulai bikin blog&masih gaptek. tlg bgmn meratakan sisi kanan&kiri sidebar biar rata&enak dilihat.punyaku berantakan.tlg liatin ya&minta petunjuknya.
      Terus kalo aku mau internetan dirumah pake laptop, yang murah koneksinya pake apa ya?
      Tks atas kesediaannya menjawab.

      Komentar oleh hery | 27 Februari 2008 | Balas

    8. pindahan rumah bikin nasi tumpeng nggak kang? pengen makan nasi kuning nih,he..he..

      Komentar oleh KRISTINA DIAN SAFITRY | 29 Februari 2008 | Balas

    9. Artikel di blog ini sangat bagus dan berguna bagi para pembaca. Anda bisa lebih mempromosikan artikel Anda di infoGue.com dan jadikan artikel Anda Topik yang terbaik bagi para pembaca di seluruh Indonesia. Nantikan segera plugin / widget kirim artikel & vote yang ter-integrasi untuk Blogspot dan WordPress dengan instalasi mudah & singkat. Salam Blogger!

      http://infogue.com/design/membuat_gambar_horizontal_thumbnail_dengan_css/

      Komentar oleh infogue | 1 Maret 2008 | Balas

    10. Aduh kang, permintaanku yang diatas itu kok tidak ditanggapi ya….?

      Komentar oleh hery | 4 Maret 2008 | Balas

    11. @hery : maaf sobat hery, akhir-akhir ini jadwal kegiatan saya padat sekali sehingga jarang mampir nengokin blog ini. Untuk pertaan isi postingan sudah pernah saya bahas di sini !. atau agar lebih praktis, di bagian cssnya biasa tertulis :

      #main-wrapper {
      …..
      …..
      text-align:left;
      }

      ganti left nya menjadi justify, sehingga jadi begini :

      #main-wrapper {
      …..
      …..
      text-align:justify;
      }

      maka semua postingan akan selalu rata kiri-kanan. Saran saya, coba pakai mesin yg ada di header untuk mencari tulisan yg mungkin sudah pernah saya posting, atau klik daftar isi untuk menampilkan semua posting yg pernah saya posting, atau cari di bagian footer ini.

      Komentar oleh Rohman | 4 Maret 2008 | Balas

    12. makasih kang. Maaf ni ganggu kesibukannya. Mungkin saya salah menuliskannya. Yang saya maksud perataan kolom-kolom (yg ada dikanan kolom postingan) sampai kolom terbawah seperti punya kang rohman yang kolom paling bawah dgn background biru itu.
      Kalau berkenan tengok sebentar ya kang. soalnya aku belajar dari nol pakai tutorial Kang Rohman

      Komentar oleh hery | 6 Maret 2008 | Balas

    13. terimakasih kang lengkap pisan, jd sy rada lancar belajarnya.thamk kang

      Komentar oleh die | 11 Maret 2008 | Balas

    14. pck.. pck.. pck… heran aku nge liat nya jempol empat untuk kang rohman

      Komentar oleh hacker inside | 25 Mei 2008 | Balas

    15. Kang, gimana cara bikin thumbnail buat suatu posting yang jumlah fotonya bisa nyampe 15 biji / lebih? Karena contoh yang ada di sini cuman sampe 3 biji aja. Puyeng neh….

      Komentar oleh Ferry | 8 Juli 2008 | Balas

    16. kirim atuuuh kang ke blog ku…
      thanks..

      Komentar oleh Ahmad shofi | 15 Juli 2008 | Balas

    17. thank’s

      Komentar oleh doez | 14 Oktober 2008 | Balas


    Tinggalkan Balasan

    Isikan data di bawah atau klik salah satu ikon untuk log in:

    Logo WordPress.com

    You are commenting using your WordPress.com account. Logout / Ubah )

    Gambar Twitter

    You are commenting using your Twitter account. Logout / Ubah )

    Foto Facebook

    You are commenting using your Facebook account. Logout / Ubah )

    Foto Google+

    You are commenting using your Google+ account. Logout / Ubah )

    Connecting to %s

    %d blogger menyukai ini: