CSS Gallery Spesial

CSS Image Gallery didesain untuk memuat 10 buah image. Controll gallery berupa thumbnail serta button next dan previous. Untuk menampilkan setiap image dalam gallery dilakukan dengan meng-klik thumbnail contoll yang menampilkan 5 buah thumbnail dalam bentuk deret horizontal. Thumbnail controll sendiri sebenarnya berisikan 10 thumbnail, sehingga agar setiap thumbnail dapat terlihat maka pergeseran thumbnail dilakukan melalui button prev dan next.

Kode CSS :

#album{
        width:750px;
        height:1025px;
        margin:0 auto;
        position:relative;
        font-family:verdana, arial, sans-serif;
        background:#f8f8f8;
        border-top:1px solid #ddd;
        border-bottom:1px solid #ddd;
}
#album #thumbs{position:absolute; left:0; top:0; height:190px; width:750px; overflow:hidden; text-align:center; z-index:500;}
#album #thumbs div{width:750px; height:270px; position:relative; padding-top:10px;}
#album #thumbs div ul{padding:0; margin:0 auto; list-style:none; width:684px;}
#album #thumbs div ul li{float:left; padding:10px 0 5px 1px; margin:0 1px 0 1px;}
#album #thumbs div ul li a{display:block; width:88px; height:139px; float:left; border:3px solid #FFFFCC;} /* tinggi - lebar bingkai thumnail */
#album #thumbs div ul li a b{display:none;}
#album #thumbs div ul li a.prev{background:url(https://lh6.googleusercontent.com/-buPnfhNt5Y8/T2vuVYNNpaI/AAAAAAAAAec/W7SmcpIU-aM/h120/prev-css-gallery.jpg) no-repeat center center;}
#album #thumbs div ul li a.next{background:url(https://lh3.googleusercontent.com/-SXF_VlYzPjU/T2vuWQAu22I/AAAAAAAAAek/0jUqBQok8u8/h120/next-css-gallery.jpg) no-repeat center center;}
#album #thumbs div ul li a img{display:block; width:88px; height:139px; border:0; opacity:0.4;-moz-opacity:0.4;filter:alpha(opacity=50);} /* tinggi-lebar thumbnail dan transparansi */
#album #thumbs div ul li a:hover img{  opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100); } 
#album #thumbs div ul li a:focus{outline:0;}
#album #fullsize{position:absolute; left:0; top:0; height:1025px; width:750px; overflow:hidden; text-align:center; z-index:200;} /* tinggi - lebar seluruh kolom album */ 
#album #fullsize div{width:750px; height:1025px; padding-top:170px; position:relative; background:#333333;} /* bingkai image preview */
#album #fullsize div img{clear:both; display:block; margin:0 auto; border:10px solid #fff; width:480px; height:710px; position:relative;} /* tinggi - lebar image show/preview */
#album #fullsize div h3{padding:10px 0 0 0; margin:0; font-size:18px; color:#33FF66;} /* h3 */
#album #fullsize div p{padding:5px 0; margin:0; font-size:12px; line-height:18px; color:#33CCFF;}

xHTML :

<div id="album">
<div id="thumbs">
<div id="thumb1">
<ul>
<li><a href="#thumb10" class="prev"><b>prev</b></a></li>
<li><a href="#gbr1"><img src="URL-image1.jpg" alt="Title Image-1" /></a></li>
<li><a href="#gbr2"><img src="URL-image2.jpg" alt="Title Image-2" /></a></li>
<li><a href="#gbr3"><img src="URL-image3.jpg" alt="Title Image-3" /></a></li>
<li><a href="#gbr4"><img src="URL-image4.jpg" alt="Title Image-4" /></a></li>
<li><a href="#gbr5"><img src="URL-image5.jpg" alt="Title Image-5" /></a></li>
<li><a href="#thumb2" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="thumb2">
<ul>
<li><a href="#thumb1" class="prev"><b>prev</b></a></li>
<li><a href="#gbr2"><img src="URL-image2.jpg" alt="Title Image-2" /></a></li>
<li><a href="#gbr3"><img src="URL-image3.jpg" alt="Title Image-3" /></a></li>
<li><a href="#gbr4"><img src="URL-image4.jpg" alt="Title Image-4" /></a></li>
<li><a href="#gbr5"><img src="URL-image5.jpg" alt="Title Image-5" /></a></li>
<li><a href="#gbr6"><img src="URL-image6.jpg" alt="Title Image-6" /></a></li>
<li><a href="#thumb3" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="thumb3">
<ul>
<li><a href="#thumb2" class="prev"><b>prev</b></a></li>
<li><a href="#gbr3"><img src="URL-image3.jpg" alt="Title Image-3" /></a></li>
<li><a href="#gbr4"><img src="URL-image4.jpg" alt="Title Image-4" /></a></li>
<li><a href="#gbr5"><img src="URL-image5.jpg" alt="Title Image-5" /></a></li>
<li><a href="#gbr6"><img src="URL-image6.jpg" alt="Title Image-6" /></a></li>
<li><a href="#gbr7"><img src="URL-image7.jpg" alt="Title Image-7" /></a></li>
<li><a href="#thumb4" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="thumb4">
<ul>
<li><a href="#thumb3" class="prev"><b>prev</b></a></li>
<li><a href="#gbr4"><img src="URL-image4.jpg" alt="Title Image-4" /></a></li>
<li><a href="#gbr5"><img src="URL-image5.jpg" alt="Title Image-5" /></a></li>
<li><a href="#gbr6"><img src="URL-image6.jpg" alt="Title Image-6" /></a></li>
<li><a href="#gbr7"><img src="URL-image7.jpg" alt="Title Image-7" /></a></li>
<li><a href="#gbr8"><img src="URL-image8.jpg" alt="Title Image-8" /></a></li>
<li><a href="#thumb5" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="thumb5">
<ul>
<li><a href="#thumb4" class="prev"><b>prev</b></a></li>
<li><a href="#gbr5"><img src="URL-image5.jpg" alt="Title Image-5" /></a></li>
<li><a href="#gbr6"><img src="URL-image6.jpg" alt="Title Image-6" /></a></li>
<li><a href="#gbr7"><img src="URL-image7.jpg" alt="Title Image-7" /></a></li>
<li><a href="#gbr8"><img src="URL-image8.jpg" alt="Title Image-8" /></a></li>
<li><a href="#gbr9"><img src="URL-image9.jpg" alt="Title Image-9" /></a></li>
<li><a href="#thumb6" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="thumb6">
<ul>
<li><a href="#thumb5" class="prev"><b>prev</b></a></li>
<li><a href="#gbr6"><img src="URL-image6.jpg" alt="Title Image-6" /></a></li>
<li><a href="#gbr7"><img src="URL-image7.jpg" alt="Title Image-7" /></a></li>
<li><a href="#gbr8"><img src="URL-image8.jpg" alt="Title Image-8" /></a></li>
<li><a href="#gbr9"><img src="URL-image9.jpg" alt="Title Image-9" /></a></li>
<li><a href="#gbr10"><img src="URL-image10.jpg" alt="Title Image-10" /></a></li>
<li><a href="#thumb7" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="thumb7">
<ul>
<li><a href="#thumb6" class="prev"><b>prev</b></a></li>
<li><a href="#gbr7"><img src="URL-image7.jpg" alt="Title Image-7" /></a></li>
<li><a href="#gbr8"><img src="URL-image8.jpg" alt="Title Image-8" /></a></li>
<li><a href="#gbr9"><img src="URL-image9.jpg" alt="Title Image-9" /></a></li>
<li><a href="#gbr10"><img src="URL-image10.jpg" alt="Title Image-10" /></a></li>
<li><a href="#gbr1"><img src="URL-image1.jpg" alt="Title Image-1" /></a></li>
<li><a href="#thumb8" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="thumb8">
<ul>
<li><a href="#thumb7" class="prev"><b>prev</b></a></li>
<li><a href="#gbr8"><img src="URL-image8.jpg" alt="Title Image-8" /></a></li>
<li><a href="#gbr9"><img src="URL-image9.jpg" alt="Title Image-9" /></a></li>
<li><a href="#gbr10"><img src="URL-image10.jpg" alt="Title Image-10" /></a></li>
<li><a href="#gbr1"><img src="URL-image1.jpg" alt="Title Image-1" /></a></li>
<li><a href="#gbr2"><img src="URL-image2.jpg" alt="Title Image-2" /></a></li>
<li><a href="#thumb9" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="thumb9">
<ul>
<li><a href="#thumb8" class="prev"><b>prev</b></a></li>
<li><a href="#gbr9"><img src="URL-image9.jpg" alt="Title Image-9" /></a></li>
<li><a href="#gbr10"><img src="URL-image10.jpg" alt="Title Image-10" /></a></li>
<li><a href="#gbr1"><img src="URL-image1.jpg" alt="Winterbranches" /></a></li>
<li><a href="#gbr2"><img src="URL-image2.jpg" alt="Title Image-2" /></a></li>
<li><a href="#gbr3"><img src="URL-image3.jpg" alt="Title Image-3" /></a></li>
<li><a href="#thumb10" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="thumb10">
<ul>
<li><a href="#thumb9" class="prev"><b>prev</b></a></li>
<li><a href="#gbr10"><img src="URL-image10.jpg" alt="Title Image-10" /></a></li>
<li><a href="#gbr1"><img src="URL-image1.jpg" alt="Title Image-1" /></a></li>
<li><a href="#gbr2"><img src="URL-image2.jpg" alt="Title Image-2" /></a></li>
<li><a href="#gbr3"><img src="URL-image3.jpg" alt="Title Image-3" /></a></li>
<li><a href="#gbr4"><img src="URL-image4.jpg" alt="Title Image-4" /></a></li>
<li><a href="#thumb1" class="next"><b>Next</b></a></li>
</ul>
</div>
</div>
<div id="fullsize">
<div id="gbr1">
<img src="URL-image1.jpg" alt="Title Image-1" />
<h3>Title Image-1</h3>
<center><h2><p>Anda bisa melihat berbagai effect gambar dan album di bloggerstars1</p><p><a href="http://bloggerstuars.blogspot.com/">bloggerstars1 - Tutorial Blogger</a>.</p></h2></center>
</div>
<div id="gbr2">
<img src="URL-image2.jpg" alt="Title Image-2" />
<h3>Title Image-2</h3>
<center><h2><p>Anda bisa melihat berbagai effect gambar dan album di bloggerstars1</p><p><a href="http://bloggerstuars.blogspot.com/">bloggerstars1 - Tutorial Blogger</a>.</p></h2></center> 
</div>
<div id="gbr3">
<img src="URL-image3.jpg" alt="Title Image-3" />
<h3>Title Image-3</h3>
<center><h2><p>Anda bisa melihat berbagai effect gambar dan album di bloggerstars1</p><p><a href="http://bloggerstuars.blogspot.com/">bloggerstars1 - Tutorial Blogger</a>.</p></h2></center> 
</div>
<div id="gbr4">
<img src="URL-image4.jpg" alt="Title Image-4" />
<h3>Title Image-4</h3>
<center><h2><p>Anda bisa melihat berbagai effect gambar dan album di bloggerstars1</p><p><a href="http://bloggerstuars.blogspot.com/">bloggerstars1 - Tutorial Blogger</a>.</p></h2></center> 
</div>
<div id="gbr5">
<img src="URL-image5.jpg" alt="Title Image-5" />
<h3>Title Image-5</h3>
<center><h2><p>Anda bisa melihat berbagai effect gambar dan album di bloggerstars1</p><p><a href="http://bloggerstuars.blogspot.com/">bloggerstars1 - Tutorial Blogger</a>.</p></h2></center> 
</div>
<div id="gbr6">
<img src="URL-image6.jpg" alt="Title Image-6" />
<h3>Title Image-6</h3>
<center><h2><p>Anda bisa melihat berbagai effect gambar dan album di bloggerstars1</p><p><a href="http://bloggerstuars.blogspot.com/">bloggerstars1 - Tutorial Blogger</a>.</p></h2></center>
</div>
<div id="gbr7">
<img src="URL-image7.jpg" alt="Title Image-7" />
<h3>Title Image-7</h3>
<center><h2><p>Anda bisa melihat berbagai effect gambar dan album di bloggerstars1</p><p><a href="http://bloggerstuars.blogspot.com/">bloggerstars1 - Tutorial Blogger</a>.</p></h2></center>
</div>
<div id="gbr8">
<img src="URL-image8.jpg" alt="Title Image-8" />
<h3>Title Image-8</h3>
<center><h2><p>Anda bisa melihat berbagai effect gambar dan album di bloggerstars1</p><p><a href="http://bloggerstuars.blogspot.com/">bloggerstars1 - Tutorial Blogger</a>.</p></h2></center>
</div>
<div id="gbr9">
<img src="URL-image9.jpg" alt="Title Image-9" />
<h3>Title Image-9</h3>
<center><h2><p>Anda bisa melihat berbagai effect gambar dan album di bloggerstars1</p><p><a href="http://bloggerstuars.blogspot.com/">bloggerstars1 - Tutorial Blogger</a>.</p></h2></center>
</div>
<div id="gbr10">
<img src="URL-image10.jpg" alt="Title Image-10" />
<h3>Title Image-10</h3>
<center><h2><p>Anda bisa melihat berbagai effect gambar dan album di bloggerstars1</p><p><a href="http://bloggerstuars.blogspot.com/">bloggerstars1 - Tutorial Blogger</a>.</p></h2></center>
</div>
</div>
</div>

Cara membuat image gallery :

1. Login ke Blogger.
   
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Kembali halaman baru akan terbuka, klik "Edit HTML".
4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
   
   • Backup/Restore Template » berisi fitur untuk melakukan backup template.
     Lakukan Backup template setiap kali akan melakukan penambahan atau pengurangan kode (xHTML, kode CSS dan javascript) melalui "Box Edit Template".
   • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
   • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
5. Cari kode ]]></b:skin> pada "Box Edit Template".
6. Copy kode CSS kemudian letakkan di atas ]]></b:skin>.
7. Klik "Simpan Template (Save Template)".
8. Gunakan xHTML melalui "Add a Gadget atau posting box.

Catatan/Keterangan :

1. Image berukuran : 480 x 710 (px) » URL-image1.jpg s/d URL-image10.jpg
2. Thumbnail berukuran : 88 x 139 (px) » URL-thumb1.jpg s/d URL-thumb10.jpg

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Update » Jemuah LEGI, Maret, 23, 2012

» Happy Blogging - gubhugreyot «