Cara Membuat Flux Slider Css3 Dan Jquery Buat Blog

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.

Untitled

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>

Catatan:

  • Tulisan yang berwarna biru dapat sobat ganti dengan Url yang akan dituju oleh gambar.
  • Tulisan yang berwarna merah silahkan sobat ganti dengan Url gambar yang sobat inginkan.

8. And finally Save/Simpan.

Selamat mencoba and Happy Blogging Smile

Tidak ada komentar:

Catatan:
Untuk menyisipkan video, gunakan tag <i rel="youtube">URL YOUTUBE ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Untuk menyisipkan kode panjang, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!"

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah ini.

Konversi Kode di Sini!OOT

 
Design by Juned al~Bughisy Copyright © 2012 ~ 2013 Powered by Blogger
Back to Top