Gallery photo dengan CSS dan HTML

Artikel ini di ambil dari Vilat Lines, Tips ini cukup bagus untuk anda yang mempunyai banyak koleksi photo dan lebih bagus lagi kalau anda menyediakan blog khusus untuk photo-photo anda.

Hasilnya akan tampak seperti di bawah ini :

• Gambar Technology
  
  
  
  
  • 
  
  
  • 
  
  
  • 
  
  
  
  
  
  
  



• Judul tab nya
  
  
  
  
  • 
  
  Biar rapih buat seperti ini 16 buah, tapi kalau kurang juga ga apa-apa.
  
  
  
  


• Judul tab nya
  
  
  
  
  • 
  
  Biar rapih buat seperti ini 16 buah, tapi kalau kurang juga ga apa-apa.
  
  
  
  
  


• Judul tab nya
  
  
  
  
  • 
  
  Biar rapih buat seperti ini 16 buah, tapi kalau kurang juga ga apa-apa.
  
  
  
  


• Judul tab nya
  
  
  
  
  
  • 
  
  Biar rapih buat seperti ini 16 buah, tapi kalau kurang juga ga apa-apa.
  
  
  
  
  

Cara membuatnya seperti ini,
Pada edit html template anda :
Masukkan kode CSS ini didalam tag CSS blog anda atau agar mudah diingat letakkan saja diatas ]]>


/* slides styling */

.photo {width:635px; text-align:left; position:relative; margin:0 auto;}

.photo ul.topic {padding:0; margin:0; list-style:none; width:635px; height:auto;
position:relative; z-index:10;}

.photo ul.topic li {display:block; width:125px; height:31px; float:left;}
.photo ul.topic li a.set {display:block; font-size:11px; width:124px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; border:1px solid #fff; border-width:1px 1px 0 0; background:#ccc; font-family:verdana, arial, sans-serif;}

.photo ul.topic li a ul,
.photo ul.topic li ul
{display:none;}

.photo ul.topic li.active a
{color:#000; background:#bbb;}

.photo ul.topic li a:hover,
.photo ul.topic li:hover a
{color:#fff; background:#aaa;}

.photo ul.topic li.active ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px; border:20px solid #bbb; z-index:1;}

.photo ul.topic li a:hover ul,
.photo ul.topic li:hover ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px; border:20px solid #aaa; z-index:100;}

.photo ul.topic li ul li
{display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;}

.photo ul.topic li ul li a
{display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;}

.photo ul.topic li ul li a img
{display:block; width:100px; height:75px; border:5px solid #eee;}

.photo ul.topic li a:hover ul li a:hover,

.photo ul.topic li:hover ul li a:hover
{white-space:normal; position:relative;}

.photo ul.topic li a:hover ul li a:hover img,
.photo ul.topic li:hover ul li a:hover img
{position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;}

Selanjutnya klik save template.


Pindah ke elemen halaman kilk add gadget dan pilih html/javascript lalu masukkan kodenya seperti ini :

<div class="photo"><div class="photo">
<ul class="topic">
<li><a class="set" href="#link">Judul tab nya<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="link target gambar anda"><img alt="" src="link gambar anda" title=""/></a></li>
Biar rapih buat seperti ini 16 buah, tapi kalau kurang juga ga apa-apa.
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a class="set" href="#link">Judul tab nya<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="link target gambar anda"><img alt="" src="link gambar anda" title=""/></a></li>
Biar rapih buat seperti ini 16 buah, tapi kalau kurang juga ga apa-apa.
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="set" href="#link">Judul tab nya<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="link target gambar anda"><img alt="" src="link gambar anda" title=""/></a></li>
Biar rapih buat seperti ini 16 buah, tapi kalau kurang juga ga apa-apa.
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>
<li><a class="set" href="#link">Judul tab nya<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="link target gambar anda"><img alt="" src="link gambar anda" title=""/></a></li>
Biar rapih buat seperti ini 16 buah, tapi kalau kurang juga ga apa-apa.
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="set" href="#link">Judul tab nya<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>
<li><a href="link target gambar anda"><img alt="" src="link gambar anda" title=""/></a></li>
Biar rapih buat seperti ini 16 buah, tapi kalau kurang juga ga apa-apa.
</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<br class="clear"/>
</div>

Bookmark this post: