Cara Membuat Flux Slider CSS3 dan Jquery Buat Blog

Flux Slider adalah gabungan CSS3 dan JQuery sehingga membuatnya terlihat nampak lebih keren dan menarik. Jadi bagi sobat yang menginkan blognya terlihat lebih keren saya sarankan untuk memasangnya pada blog sobat.

Bagi sobat yang ingin menambahkan Flux silder pada blognya silahkan ikuti langkah-langkah di bawah ini.

1. Login ke blogger atau klik disini»
2. Pilih template » Edit Html » Lanjutkan.
3. Jangan lupa centang Expand wiget template.
4. Copy Script di bawah ini dan letakkan di atas code </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>

5. Copy code Css di bawah ini dan letakkan di atas code ]]></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;
}

6. Kemudian sobat kembali lagi ke dashboard dan pilih tata letak » Tambah gadget » Html/JavaScript.
7. Setelah itu copy paste code Html di bawah ini.

<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>

8. And finally Save/Simpan.

Selamat mencoba dan jika mengalami kendala silahkan tanyakan pada kolom komentar.