Scribd Logo
Unggah

Selamat datang di Scribd!

  • Membuat Slider Dengan JQuery Nivo Slider

    Diunggah oleh

    Saipul Rahman
    35 tayangan3 halaman
    Membuat Slider Dengan JQuery Nivo Slider

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    Membuat Slider Dengan JQuery Nivo Slider

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    35 tayangan3 halaman

    Membuat Slider Dengan JQuery Nivo Slider

    Diunggah oleh

    Saipul Rahman
    Membuat Slider Dengan JQuery Nivo Slider

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 3

    Posted By Reynold Erwandi on Aug 26, 2013 | 1 comment

    Nivo Slider adalah Plugins jQuery yang dapat membantu kita mempermudah dalam pembuatan Slider untuk
    website yang akan kita buat. Dengan fitur-fitur yang luar biasa dan penggunaan yang mudah dan gratis, Nivo
    Slider sudah sangat terkenal di dunia. Keuntungan penggunaan Nivo Slider selain penggunaan yang mudah
    adalah Nivo Slider mempunyai total 16 Efek Transisi yang indah.
    Dalam tutorial kali ini, saya akan mengajarkan kepada kalian bagaimana caranya menggunakan Nivo Slider
    dengan jQuery untuk membuat sebuah Slider yang indah. Sebelum kita mulai, kita membutuhkan file Nivo Slider
    yang dapat kalian download di website Nivo Slider dengan mengklik bagian download di bagian kanan atas.
    Langkah-Langkah :
    1. Buatlah sebuah folder website Anda.
    2. Kemudian, buatlah folder images didalam folder website anda untuk menempatkan gambar-gambar slider
    yang akan kita buat.
    3. Copy dan Paste 2 file (jquery.nivo.slider.pack & nivo-slider.css) dari folder nivo-slider yang telah kalian download
    & extract.
    4. Buatlah file index dengan berisikan kode seperti berikut
    Perhatikan kode yang saya highlight (baris no. 23~26). images/slider1.jpg dan seterusnya adalah tempat dimana
    saya meletakkan gambar yang akan saya buat di slider. ganti kode tersebut dimana kalian meletakkan gambar
    kalian.
    Cukup mudah bukan ? Sekarang saatnya kalian praktek, semoga berhasil.
    Home Home Featured Featured Membuat Slider dengan jQuery Nivo Slider Membuat Slider dengan jQuery Nivo Slider
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DuniaCoding.com | Membuat Slider dengan jQuery Nivo Slider</title>
    <!-- Menghubungkan file jquery dan Nivo Slider -->
    <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
    <!-- Script untuk membuat nivo slider berfungsi -->
    <script type="text/javascript">
    $(window).load(function() {
    $('#slider').nivoSlider();
    });
    </script>
    </head>
    <body>
    <!-- Code html untuk nivo slider -->
    <div class="slider-wrapper">
    <div id="slider" class="nivoSlider">
    <img src="images/slider1.jpg" alt="" />
    <a href="http://dev7studios.com"><img src="images/slider2.jpg" alt="" title="#htmlcaption" /></a>
    <img src="images/slider3.jpg" alt="" title="This is an example of a caption" />
    <img src="images/slider4.jpg" alt="" />
    </div>
    </div>
    <div id="htmlcaption" class="nivo-html-caption">
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
    </div>
    </body>
    </html>
    Membuat Slider dengan jQuery Nivo Slider
    Home Home HTML / CSS HTML / CSS Java Java Javascript / jQuery Javascript / jQuery Visual Basic Visual Basic Request Box Request Box I wanna be Author I wanna be Author
    Share This Post On
    Submit Comment
    Di tutorial selanjutnya saya akan membuat tutorial bagaimana cara menggunakan theme nivo slider sehingga
    slider yang kalian buat terlihat lebih bagus.
    1 Comment
    Trackbacks/Pingbacks
    Cara menggunakan Theme Nivo Slider | Dunia Coding - [] saya Cara menggunakan theme nivo slider ini adalah lanjutan dari
    post saya sebelumnya yaitu Membuat Slider dengan jQuery Nivo
    Submit a Comment
    Your email address will not be published. Required fields are marked *
    Name *
    Email *
    Website
    Comment
    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym
    title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del
    datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url="">
    <span class="" title="" data-url="">
    Author: Reynold Erwandi
    Seorang Web Developer yang lahir di Jakarta, 24 Mei 1997. Untuk saat ini saya sedang belajar di SMK
    Bakti Idhata di Jakarta Selatan.
    Post a Reply Post a Reply
    Jasa Pembuatan Website
    AUGUST 26, 2013
    Tutorial yang sangat bagus. cocok untuk penyedia jasa pembuatan website seperti saya untuk
    website yang akan saya buat.
    Recent Posts Recent Posts
    Java Source Code : Looping
    membentuk huruf Rey
    Belajar CSS From Zero to Pro
    Id dan Class Selector (Part
    3)
    Belajar CSS From Zero to Pro
    Belajar CSS From Zero to Pro
    Syntax CSS (Part 2)
    Belajar CSS From Zero to Pro
    Perkenalan CSS (Part 1)
    Archives Archives
    September 2013
    August 2013
    Categories Categories
    Featured
    HTML / CSS
    Java
    Javascript / jQuery
    Visual Basic
    Designed by Elegant Themes | Powered by WordPress

    Anda mungkin juga menyukai