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>
- Login ke Blogger.
- Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
- Tuliskan Password.
- Klik "Sign in"
- Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
Klik "Rancangan (Design)". - Kembali halaman baru akan terbuka, klik "Edit HTML".
- 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.
- Cari kode ]]></b:skin> pada "Box Edit Template".
- Copy kode CSS kemudian letakkan di atas ]]></b:skin>.
- Klik "Simpan Template (Save Template)".
- Gunakan xHTML melalui "Add a Gadget atau posting box.
Catatan/Keterangan :- Image berukuran : 480 x 710 (px) » URL-image1.jpg s/d URL-image10.jpg
- 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 �
