Rabu, 03 Agustus 2011

Cara Membuat Tampilan Gallery Foto

Berikut instruksi dalam pembuatannya (copy paste kode berikut dibawah ini):
Tapi ingat yach kalo Code di bawah ini sudah di copy, masukan dalam Edit HTML bukan Compose

<div class='snap_preview'><div><center><font color="#0066FF" size="4"></font></center></div>
<style type='text/css'>
.gallery {
margin: auto;
}
.gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%; }
.gallery img {
border: 2px solid #cfcfcf;
}
.gallery-caption {
margin-left: 0;
}
</style>
<div class='gallery snap_nopreview'><dl class='gallery-item'>
<dt class='gallery-icon'>
<img src="http://sujufemm.files.wordpress.com/2010/12/snsd-etude.jpg" width="128" height="96" class="attachment-thumbnail" >
</dt></dl><dl class='gallery-item'>
<dt class='gallery-icon'>
<img src="http://valorsite.files.wordpress.com/2011/04/snsd_gubne_cf_2.jpg" width="128" height="96" class="attachment-thumbnail">
</dt></dl><dl class='gallery-item'>
<dt class='gallery-icon'>
<img src="http://3.bp.blogspot.com/-0m1-1XoheRs/TdEvYKqFObI/AAAAAAAAABU/jHT-padk8wI/s1600/snsd-3.jpg" width="127" height="96" class="attachment-thumbnail">
</dt></dl><br style="clear: both" /><dl class='gallery-item'>
<dt class='gallery-icon'>
<img src="http://1.bp.blogspot.com/-XgfCFzY-Ixs/TfY_Aj7xKgI/AAAAAAAAA94/nmRpgGtF2uE/s400/foto-SNSD-korea-4.jpg" width="127" height="96" class="attachment-thumbnail">
</dt></dl><dl class='gallery-item'>
<dt class='gallery-icon'>
<img src="http://4.bp.blogspot.com/-0SDP34qKr9Y/TfY_F7feknI/AAAAAAAAA-Q/CBLXlAmBkZk/s1600/foto-SNSD-korea-10.jpg" width="128" height="96" class="attachment-thumbnail">
</dt></dl><dl class='gallery-item'>
<dt class='gallery-icon'>
<img src="http://naqquiah.files.wordpress.com/2011/08/snsd157.jpg" width="128" height="96" class="attachment-thumbnail">
</dt></dl><br style="clear: both" />
<br style='clear: both'/>
</div>
</div>

(stop!! copy paste sampai disini)

Tugas Anda berikutnya,
Bila hanya ingin mengganti tampilan foto saja, Anda bisa rubah alamat gambar yang berwarna merah dengan alamat gambar yang Anda inginkan, kalo kamu ingin memperbanyak tampilan gambarnya yach kamu Copy/Paste aja Codenya.......

Nah kalo udah jadi maka akan terlihat seperti ini :









Namun Anda juga dapat mengotak-atiknya, bila sudah mengetahui/mempelajari bahasa HTML.

Tidak ada komentar:

Posting Komentar