Flux slider css3 dan jquery buat blog

Flux slider adalah slider gabungan dari CSS3 Dan Jquery ini slider keren banget menurut saya karena efeknya itu beuh keren banget memang kalau Css3 dan Jquery bertemu semua jadi Luar binasa hahahaha ada Efek 3D nya juga loh slider Flux ini keren dah pokoknya tapi kalau browser anda tidak support Css3 maka akan ada teks peringatan bahwa browser anda tidak support css3.

DEMO

1. Masukan script di bawah ini di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script src='http://sites.google.com/site/zyztem33/js/flux.min.js' type='text/javascript'></script>
<script src='http://sites.google.com/site/zyztem33/js/flux.main.js' type='text/javascript'></script>

2. Masukan css di bawah ini di atas kode ]]></b:skin>

#slider {
    padding:5px;
    margin: 0 auto 15px;
}
#slider > .fluxslider {
    margin: 0 auto !important;
    border: 3px solid #999;
    background: #C9C9C9;
    padding: 0 0 10px 0;
    max-width: 99% !important;
    overflow: hidden
    }
#slider .pagination {
    list-style:none outside none;
    padding:5px !important;
}
#slider .pagination li.current {
    background-color: dimGray
    }

#slider .pagination li {
    cursor: pointer;
    display: inline-block;
    margin-left: 0;
    background-color: silver;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    height: 8px;
    text-indent: -10000px;
    width: 8px;
    -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.31);
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.31);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.31)
    }
#transitions {
    overflow:hidden;
}
#transitions ul {
    float:left;
    list-style:none outside none;
    padding:0;
    width:33%;
}
#transitions ul#trans2D {
    text-align:right;
}
#transitions ul li {
    margin:0 10px;
}
/* Css Teks Warning jika browser anda tidak support css3*/
#warn {
    font-weight:bold;
    text-align:center;
}

3. Masukan kode html di bawah ini dalam Gadget HTML/Javascript

<div id="slider">
<div id='warn'></div>
<a href="URL anda"><img src='Url gambar1.jpg' /></a>
<a href="URL anda"><img src='Url gambar1.jpg' /></a>
<a href="URL anda"><img src='Url gambar1.jpg' /></a>
</div>

Catatan

Jika anda ingin menambahkan gambar usahakan gambarnya itu semuanya berukuran sama misalnya 400 x 200 Maka semua gambar harus berukuran seperti itu agar terlihat lebih rapi karena jika tidak maka slidernya akan terlihat berantakan, dan seperti yang saya bilang slider ini gabungan dari css3 dan jquery jadi jika slidernya diam yah berarti browser anda tidak support css3.