Nivo Slider, jquery slider dengan 9 efek transisi

Javascript jQuery
Saya ingin memperkenalkan Nivo Slider jquery kepada Anda. Ini plugin Jquery mengagumkan untuk slider dengan 9 efek transisi yang unik, dan terlihat sangat profesional seperti slide show Flash. Salah satu slider yang paling mengesankan yang pernah saya lihat.



Bagaimana tentang efek? Keren? Plugin ini telah diuji untuk sebagian besar browser populer seperti IE 7.0 +, FireFox v3 +, Chrome, Opera, Safari ... jadi saya tidak berpikir Anda akan mendapatkan masalah dengan browser ketika menggunakan plugin ini.
Berikut adalah langkah-langkah untuk menginstal dan menggunakan plugin ini di Blogger Anda.

1, Download pluginnya Nivoslider dari situs ini. Atau Anda dapat men-download langsung dari link ini Jika Anda men-download plugin ini dari situs web, Anda akan melihat dua versi:. Produksi dan pengembangan. Produksi adalah versi di mana kode dienkripsi untuk perlindungan hak cipta. Dan pembangunan tidak dienkripsi. Anda dapat men-download keberduanya, tapi versi pengembangan lebih baik.

2, Upload file nivo-slider.css dan jquery.nivo.slider.js ke sebuah host. Saya sarankan code Google untuk kecepatan dan karena kehandalan hosting.

3, Buat HTML / Javascript widget di blog Blogger Anda.

4, Paste kode ini ke konten widget:

<link rel="stylesheet" href="hosting anda.../nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"> </ script>
<script src="hosting anda.../jquery.nivo.slider.pack.js" type="text/javascript"> </ script>

Kode di atas mencakup kerangka Jquery dan Plugin nivoslider ke situs Anda.

5, Paste kode di bawah ini tepat setelah kode pada langkah 3:

<style>
#slider {
    position:relative;
    -moz-box-shadow:0px 0px 10px #333;
    -webkit-box-shadow:0px 0px 10px #333;
    box-shadow:0px 0px 10px #333;
}
#slider img {
    position:absolute;
    top:0px;
    left:0px;
}
#slider a {
    border:0;
}
.nivo-controlNav {
    position:absolute;
    left:47%;
    bottom:-30px;
}
.nivo-controlNav a {
    display:block;
    width:10px;
    height:10px;
    background:url(http://nivo.dev7studios.com/images/bullets.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin-right:3px;
    float:left;
}
.nivo-controlNav a.active {
    background-position:-10px 0;
}

.nivo-directionNav a {
    display:block;
    width:32px;
    height:34px;
    background:url(http://nivo.dev7studios.com/images/arrows.png) no-repeat;
    text-indent:-9999px;
    border:0;
}
a.nivo-nextNav {
    background-position:-32px 0;
    right:10px;
}
a.nivo-prevNav {
    left:10px;
}
</style>

Kode CSS ini akan menambah panah dan peluru ikon untuk navigasi di NivoSlider. juga sebagai efek gambar berhenti berkedip sebelum plugin ini selesai di muat.

6, Kode slider content.Paste setelah kode pada langkah 5

<div id="slider">
    <img src="images/slide1.jpg" alt="" />
    <a href="http://simplexdesign.blogspot.com"><img src="images/slide2.jpg" alt="" /></a>
    <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
    <img src="images/slide4.jpg" alt="" />
    ...............
</div>

Seperti yang Anda lihat, dalam konten slider, Anda dapat menambahkan link dan keterangan ke gambar. Memodifikasi dan trik menambahkan kreasi agar lebih menarik dan sebanyak yang Anda inginkan.

7, Membuat plugin ini bekerja dengan menambahkan kode awal:

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>

Kode awal di atas masih sangat sederhana sederhana. Nivo slider memiliki banyak pilihan, dan di sini adalah kode awal dengan opsi penuh (dan deskripsi untuk setiap opsi)

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect:'random',
        slices:15,
        animSpeed:500,
        pauseTime:3000,
        directionNav:true, //tombol lanjut & kembali
        directionNavHide:true, //lihat dengan efek hover
        controlNav:true, //nomor 1,2,3...
        keyboardNav:true, //gunakan tanda panah
        pauseOnHover:true, //berhnti saat efek hover berjalan
        manualAdvance:false, //manual transitions
        captionOpacity:0.8, //Universal caption opacity
        beforeChange: function(){},
        afterChange: function(){},
        slideshowEnd: function(){} //Triggers after all slides have been shown
    });
});
</script>

setiap baris kode pilihan, dan Anda dapat menambah, mengubah atau menghapus nilai untuk menambahkan atau menghapus opsi. Misalnya, baris "keyboardNav: true, / / ​​Gunakan panah kiri & kanan" berarti itu memungkinkan menggunakan tombol panah kanan-kiri pada keyboard untuk navigasi slider. Jika Anda tidak mengizinkan menggunakan keyboard, atur nilainya menjadi "false".

8, Simpan widget dan lihat apa yang anda miliki ^ ^

Sebuah catatan untuk Anda: Ukuran menampilkan slider tergantung pada ukuran "# slider" elemen dan gambar dalam slider. Sebagai contoh: untuk membuat slider yang memiliki lebar: 700px, Anda harus mengatur lebar elemen slider untuk 700px; seperti ini

#slider {
width:700px;
}

gunakan css/ukuran gambar yang memiliki lebar: 700px untuk memenuhi unsur slider. Jika Anda menggunakan gambar yang lebih kecil, Anda akan melihat slider dengan ukuran yang lebih kecil.

Itu saja. Saya harap Anda akan menemukan sesuatu yang menarik dengan plugin ini.

Artikel Terkait

  • Show hide related post (perbaharuan)
    Hallo para sobat blogger, masih semangat ngeblog kali ini saya mau share bagaimana cara dan trik membuat show hide pada related post di blog. triknya cukup mudah dan mungkin berguna untuk blog sobat agar tampil lebih ringkas dan beda dari yang lainnya... kira kira nanti hasilnya akan seperti berikut ini jika sobat ingin menerapkan trik s…
  • jQuery Show Hide Checkboxes
    Kali ini saya akan share Show Hide sederhana menggunakan jQuery Checkboxes value, prinsip kerjannya sama saja dengan jQuery show hide hanya saja berbeda di medianya. trik ini juga sebelumnya pernah saya gunakan untuk membuat show hide emoticon, konversi kode dan halaman OOT di komentar blog saya, jika mungkin anda juga berminat menggunakan jQu…
  • Menu Tab dengan jQuery
    Untuk menghemat tempat, tab view menu sangat efisien untuk solusinya karena Ukuran yang relatif kecil tapi bisa memuat space yang lumayan. kali ini saya akan membagikan cara membuat tab menu, silahkan simak jika anda sedang mencari cara membuatnya. Jika setelah jadi nanti lebar atau tinggi menu tab ini tidak sesuai, silahkan anda sesuaikan se…
  • Background posting berbeda - beda di homepage
    buat sobat yang sedang mencari trik atau cara untuk membuat tampilan posting tampil dengan warna background yang berbeda beda di setiap lebel dan halaman depan blog saja dan suka dengan tampilan seperti ini bisa menggunakan trik mudah berikut ini. caranya pun juga cukup mudah, silahkan buka editor template blog sobat lalu cari kode </head&…
  • Memasang total post dan total comment
    Mungkin ini bukan trik baru, tapi saya coba terapakan kembali sedikit trik lama ini untuk menambah keunikan di dalam tampilan blog saya. memasang total post dan total comment bukan hal yang sulit, karena kita hanya perlu menggunakan sedikit script. script yang di gunakan seperti di bawah ini: Script untuk Total Posts <script style="text/j…
  • Membuat current page pada menu navigasi
    Current page atau Current menu adalah sebuah fungsi dimana di posisikan sebagai penanda halaman aktif pada menu navigasi yang sedang di buka atau di kunjungi, misalkan pada link menu navigasi Contact, maka link pada menu navigasi Contact yang akan di beri penanda berbeda dari link menu navigasi lainnya. biar sobat tidak bingung langsung saja l…

1 komentar

Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Back to Top
Loading...