http://semua-adainfo.blogspot.com/
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
Login ke Blogger.
Halaman Dasbor (Dasboard).
Klik Rancangan (Design).
Klik Edit HTML.
Cari kode ]]></b:skin>.
Copy dan pastekan kode CSS tepat di atasnya.
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:Gunakan image (thumbnail) slideshow dengan ukuran 300px (width) 225px (height).
Posted in: EFEK IMAGE.jpg)
