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 :
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 :
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 :
http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg
http://photos.friendster.com/photos/25/77/27287752/26659203510677l.jpg Ketigax. simpanlah kode CSS berikut diantara style sheet css yang ada :
Keempax. Silahkan simpan kode di bawah ini di dalam body template ( mau lewat elemen halaman juga boleh ).
Kelimax. Di saving aja biar datanya tersimpan. Trus ya udah, kan sudah klimaks, tinggal lemesnya aja deh .
Langkah pertama :
Langkah kedua :
Tambahan dhenk, pada kode di atas ada tertulis seperti ini :
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 :
I'm wait and see.
Bagaimana bagus tidak? kalau anda ingin tahu cara membuatnya ya musti di baca sampai akhir biar tambah seru. Begini nih caranya :
http://photos.friendster.com/photos/25/77/27287752/2553499759340l.jpg
http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg
http://photos.friendster.com/photos/25/77/27287752/26659203510677l.jpg
#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;
}
<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>
Masih bingung dengan cara di atas? begini deh kalau memang masih bingung, cara yang lebih detail adalah seperti ini :
Langkah pertama :
- Sign in di blogger dengan ID anda tentunya dong.
- Klik menu Layout.
- Klik menu Edit HTML.
- Klik link Download full template, silahkan save untuk backup data (penting).
- Copy kemudian paste kode CSS berikut di atas kode ]]></b:skin>
- Klik tombol SIMPAN TEMPLATE
Langkah kedua :
- Klik menu Elemen Halaman
- Klik tulisan Tambah sebuah Elemen Halaman
- Klik tombol TAMBAHKAN KE BLOG di bawah tulisan JavaScript/HTML
- Copy paste kode berikut ke dalam elemen yang muncul
- Klik tombol Simpan
- Pindahkan elemen yang baru di buat ke tempat yang kira-kira tepat menurut anda.
- Klik tombol Simpan yang berada di sebelah atas
- 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 :
I'm wait and see.
Di tulis oleh : Kang Rohman pada 24 Februari 2008
Description: Membuat Gambar Horizontal Thumbnail Dengan CSS, Rating: 5
Reviewer: Rohman, ItemReviewed: Membuat Gambar Horizontal Thumbnail Dengan CSS
0 komentar pada Membuat Gambar Horizontal Thumbnail Dengan CSS :
Posting Komentar
Tolong komentarnya berhubungan dengan artikel yang ada. Komentar yang mengarah ke tindakan spam akan di hapus atau terjaring secara otomatis oleh spam filter.