Membuat Gambar Horizontal Thumbnail Dengan CSS

Dengan CSS kita akan coba mengulas tentang cara membuat gambar horizontal thumbnail dengan CSS. Apa itu horizontal Thumbnail? 

Langsung aja  kita lihat hasilnya

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

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

Kedua :Uploadlah gambar-gambar tersebut ke hosting untuk menyinpan gambar, mau di blogger atau pada hosting lainnya seperti google pages, photobucket, geocities, dll.

Ketiga :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;
}


Keempat:  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" 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" 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" width="90" height="75" title="Gambar Thumbnail" alt="Thumbnail image" /><img class="gambar-besar2" src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" 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" 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" title="gambar besar" alt="gambar besar" /></a></span>
</span>
</div>

Kelima :  Di save aja biar datanya tersimpan. Trus ya udah, kan sudah klimaks, tinggal lemesnya aja deh .

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>
#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; width:90px; height:75px; text-decoration:none; background:#fff; 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; }
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
<div id="latar"> <span class="tabel"> <span class="thumbnail"><a class="gambar-kecil" href="#nogo" title="thumbnail image"><img src="http://photos.friendster.com/photos/25/77/27287752/2553499759340l.jpg" width="90" height="75" title="Gambar Thumbnail" alt="Gambar Thumbnail" /><img class="gambar-besar1" src="http://photos.friendster.com/photos/25/77/27287752/2553499759340l.jpg" title="gambar besar" alt="gambar besar" /></a></span></span> <span class="tabel"> <span class="thumbnail"><a class="gambar-kecil" href="#nogo" title="thumbnail image"><img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" width="90" height="75" title="Gambar Thumbnail" alt="Gambar Thumbnail" /><img class="gambar-besar2" src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" title="Gambar besar" alt="gambar besar" /></a></span> </span> <span class="tabel"> <span class="thumbnail"><a class="gambar-kecil" href="#nogo" title="thumbnail image"><img src="http://photos.friendster.com/photos/25/77/27287752/26659203510677l.jpg" width="90" height="75" title="Gambar Thumbnail" alt="Gambar Thumbnail" /><img class="gambar-besar2" src="http://photos.friendster.com/photos/25/77/27287752/26659203510677l.jpg" title="Gambar Thumbnail" alt="Gambar Thumbnail" /></a></span> </span> </div>
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 , 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,

Selamat mencoba dan berkreasi

Leer más