Membuat Slideshow CSS3 u Image Gallery Lightbox

Slideshow ini hanya dibuat dengan css3, namun demikian anda boleh bandingkan dengan yang dibuat menggunakan javascript. CSS3 transition, CSS3 transform, box-shadow, text-shadow dan border-radius mampu menciptakan slideshow yang sangat indah dan takkan mengecewakan untuk digunakan di blog. Dengan hanya menggunakan kode css tentu saja slideshow css3 ini menjadi sangat enteng bebannya. Membuatnyapun terhitung sangat mudah hingga dalam waktu singkat bisa menjadi salah satu bagian dari blog sampeyan. Seperti kata pepatah, tak kenal maka tak sayang, tak makan maka perut keroncongan (he.. he...ngawur, ya?!), kita langsung saja menuju tkp untuk menyaksikan demo css3 slideshow yang telah digabungkan dengan lightbox.

D E M O Slideshow CSS3

Sekalipun slideshow ini didesain untuk menjadi sebuah gallery bagi lightbox, namun anda tetap bisa menggunakannya secara bebas tanpa harus menggunakan lightbox. Untuk menghilangkan fungsi lightbox cukup dengan membuang kode rel="GRlightbox[mygallery-1]". Jika pada demo hanya digunakan untuk menampilkan 6 (enam) buah image, namun demikian anda bisa menambahnya hingga sebanyak yang anda mau. Tentu saja penambahan image ini harus dipertimbangkan dengan controll yang digunakan. Semakin banyak image maka akan semakin bertambah pula controllnya hingga mungkin saja akan membuat terlalu penuh box slideshow-nya. Hal lain yang harus dipertimbangkan adalah kecepatan loading. Semakin banyak image maka loading akan semakin lama yang kadang membuat pengunjung bosan menunggu.

Cara Membuat Slideshow CSS3

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard).
3. Klik Rancangan (Design).
4. Klik Edit HTML.
5. Lakukan backup template. Buka panduannya di sini!
6. Cari kode ]]></b:skin>. Panduan cara cepat mencari kode html di template bisa dibuka di sini!
7. Copy dan pastekan kode CSS tepat di atasnya.
8. Klik Simpan Template (Save Template).

Kode CSS Slideshow CSS3

#GRslideshow{
       margin:20px auto;
       text-align:center;
       position:relative;
       width:300px;
       height:225px;
       background:#ddd url(http://gubhugreyot.googlecode.com/files/bg_gubhugreyot-slideshow-css3.jpg) center no-repeat;
       background-size:300px 225px;
       border-radius:8px; 
       border:2px solid #555;
       padding:10px;
       box-shadow:0 0 4px #000; 
}
#GRslideshow:hover{box-shadow:-2px -2px 2px #555, 5px 5px 8px #222;}
#GRslideshow ul,#GRslideshow li,#GRcontroll,#GRcontroll li,#GRcontroll li a{list-style:none;margin:0;padding:0;border:0 solid;}
#GRpreview li{position:absolute;top:0;left:0;z-index:0;}
#GRpreview li a img{
       opacity:0;
       filter:alpha(opacity=0);
       transition:2s;
       -o-transition:2s;
       -moz-transition:2s;
       -webkit-transition:2s;
       -ms-transition:2s;
       border-radius:4px;
       width:300px;
       height:225px;
       margin:8px;
       border:1px solid #eee;
       box-shadow:0 0 8px #000;
}
#GRpreview li:target{z-index:5;}
#GRpreview li:target a img{opacity:0.6;filter:alpha(opacity=60);}
#GRslideshow:hover li:target a img{opacity:1.0;filter:alpha(opacity=100);}
#GRslideshow #GRcontroll{
       position:absolute;
       bottom:100px;
       left:0;
       width:95%;
       z-index:10;
       text-align:center;
       opacity:0;
       filter:alpha(opacity=0); 
}
#GRslideshow #GRcontroll,#GRcontroll li a{transition:0.6s;-o-transition:0.6s;-moz-transition:0.6s;-webkit-transition:0.6s;-ms-transition:0.6s;}
#GRslideshow:hover #GRcontroll{bottom:12px;opacity:1.0;filter:alpha(opacity=100); }
#GRcontroll li{display:inline-block;}
#GRcontroll li a{
       padding:1px 6px;
       margin:0;
       text-align:center;
       border-top:1px solid #aaa;
       border-bottom:1px solid #aaa;
       border-radius:2px;
       font-weight:500;
       font-size:12px;
       text-decoration:none;
       color:#fff;
       background:#555;
       text-shadow:1px 1px 1px #000;
}
#GRcontroll li a:hover, #GRcontroll li a:focus {
       box-shadow:0 0 6px #000;
       border-color:#00F;
       outline:none;
       color:#FF0;
       background:#333;
       transform:scale(1.2);
       -o-transform:scale(1.2);
       -moz-transform:scale(1.2);
       -webkit-transform:scale(1.2);
       -ms-transform:scale(1.2); 
}
#GRcontroll li a:active{
       transform:scale(0.8);
       -o-transform:scale(0.8);
       -moz-transform:scale(0.8);
       -webkit-transform:scale(0.8);
       -ms-transform:scale(0.8);
}
#GRcontroll li a:visited{color:red;}
#GRview1 a img,#GRview2 a img,#GRview3 a img,#GRview4 a img,#GRview5 a img,#GRview6 a img,#GRview7 a img,#GRview8 a img,#GRview9 a img,#GRview10 a img,#GRview11 a img,#GRview12 a img{margin:0;padding:0;border:0 solid;}

Gunakan kode berikut di halaman posting

xHTML Slideshow CSS3

<div id="GRslideshow"> 
    <ul id="GRcontroll"> 
        <li><a href="#GRview1">1</a></li> 
        <li><a href="#GRview2">2</a></li> 
        <li><a href="#GRview3">3</a></li>
        <li><a href="#GRview4">4</a></li> 
        <li><a href="#GRview5">5</a></li> 
        <li><a href="#GRview6">6</a></li> 
    </ul> 
    <ul id="GRpreview">
        <li id="GRview1"><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-bali-dance.jpg" rel="grsslightbox[mygallery-1]"><img alt="img1" src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-bali-dance.jpg" /></a></li>
        <li id="GRview2"><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-bridge-bw01.jpg" rel="grsslightbox[mygallery-1]"><img alt="img2" src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-bridge-bw01.jpg" /></a></li> 
        <li id="GRview3"><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-red-flower.jpg" rel="grsslightbox[mygallery-1]"><img alt="img3" src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-red-flower.jpg" /></a></li>
        <li id="GRview4"><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-night-01.jpg" rel="grsslightbox[mygallery-1]"><img alt="img4" src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-night-01.jpg" /></a></li> 
        <li id="GRview5"><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-bwbunga-01.jpg" rel="grsslightbox[mygallery-1]"><img alt="img5" src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-bwbunga-01.jpg" /></a></li>
        <li id="GRview6"><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot_burungku-01.jpg" rel="grsslightbox[mygallery-1]"><img alt="img6" src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot_burungku-01.jpg" /></a></li> 
    </ul>
</div>

Catatan/Keterangan:

1. Untuk membuat lightbox agar bisa dipadukan dengan slideshow css3, buka panduan cara membuatnya di sini
2. Gunakan image (thumbnail) slideshow dengan ukuran 300px(width)x225px(height).

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

Posting » Setu LEGI, January, 28, 2012

» Happy Blogging - gubhugreyot «