Membuat slide gambar dengan CSS3

Mungkin ini cocok buat anda yang suka memasang widget gambar

untuk caranya

log in ke blog anda

klik rancangan / layout

klik tambah gadget

klik html / javascript

lalu masukan kode di bawah ini

---

<style>
#images {
-webkit-box-shadow: #131313 0px 2px 10px;
-moz-box-shadow: #131313 0px 3px 10px;
box-shadow: #131313 0px 3px 10px;
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 0s;
width: 720px;
height: 400px;
overflow: hidden;
position: relative;}

#images img {
background:#ccc;
width: 720px;
height: 400px;
position: absolute;
top: 0;
left: -400px;
z-index: 1;
opacity: 0;

transition: all linear 500ms; 
-o-transition: all linear 500ms;
-moz-transition: all linear 500ms;
-webkit-transition: all linear 500ms;}

#images img:target {
left: 0;
z-index: 9;
opacity: 1;}

#images img:first-child {
left: 0;
opacity: 1;}

#slider {
widht:720px;
float:left;
text-decoration: none;
background: ;
padding: 8px 10px;
color: #222;}

#slider a {
text-decoration: none;
background: #E3F1FA;
border: 1px solid #C6E4F2;
padding: 8px 10px;
color: #222;}

#slider a:hover {
background: #C6E4F2;}

</style>


<div id="images">
<a href="http://wallpaper4xp.blogspot.com/2010/07/3d-graphics-graffiti.html"> <img id="image1" src="http://1.bp.blogspot.com/_lh4qH1cW0XQ/TEl41-OaS4I/AAAAAAAAB_Y/5vUu7hu43g0/s400/3D+graphics+Graffiti.jpg" /></a>

<a href="http://wallpaper4xp.blogspot.com/2010/07/girls-field-on-bicycle.html"> <img id="image2" src="http://1.bp.blogspot.com/_lh4qH1cW0XQ/TEP0seDCLoI/AAAAAAAAB7Q/gL_03zLKXyM/s400/Girl+field+bicycle.jpg" /></a>

<a href="http://wallpaper4xp.blogspot.com/2010/09/music-box.html"> <img id="image3" src="http://2.bp.blogspot.com/_lh4qH1cW0XQ/TIxELRCiAZI/AAAAAAAACPI/AoL6c1jJMNk/s400/music+Box.jpg" /></a>

<a href="http://wallpaper4xp.blogspot.com/2010/09/glamor-rock-sensation.html"> <img id="image4" src="http://2.bp.blogspot.com/_lh4qH1cW0XQ/TIXotYo5PGI/AAAAAAAACM4/vJUlKZmQvfY/s400/VAIN+Glam+rock+Wallpaper.jpg" /></a>

<a href="http://wallpaper4xp.blogspot.com/2010/06/fire-custom-chopper-motorcycle.html"><img id="image5" src="http://2.bp.blogspot.com/_lh4qH1cW0XQ/TCljHSoRohI/AAAAAAAAByU/qwSeFjGd8sg/s400/Black+Fire+Custom.jpg" /></a></div>
<div id="slider">
<a href="#image1">1</a>
<a href="#image2">2</a>
<a href="#image3">3</a>
<a href="#image4">4</a>
<a href="#image5">5</a>
</div>

---

Ganti kode warna biru dengan alamat link yang akan anda gunakan, 
ganti juga kode warna hijau dengan kode gambar milik anda.



simpan dan tes