Pasang Nivo Slider untuk Web atau Blog

Jan 16, 2012

Nivo Slider merupakan plugin javascript jQuery yang berguna untuk menampilkan animasi image slide dengan bermacam efect. Image Slider sering kita jumpai di website penyedia templates-templates gratisan blogspot. Dengan adanya Image Slider, website atau blog kita akan terkesan menarik dan interaktif.

Contoh tampilan nivo slider

Nivo Slider sudah tersedia dalam bentuk plugin untuk WordPress, Joomla, Drupal, dll. Tetapi kalau anda membuat website tidak menggunakan CMS tersebut, alias membuat desain sendiri, maka langkah-langkah untuk memasang image slider menggunakan Nivo Slider adalah sbb:

1. Buat file nivo-slider.css

    /*
 * jQuery Nivo Slider v2.3
 * http://nivo.dev7studios.com
 *
 * Copyright 2010, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * March 2010
 */
 
 
/* The Nivo Slider styles */
.nivoSlider {
 position:relative;
}
.nivoSlider img {
 position:absolute;
 top:0px;
 left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 border:0;
 padding:0;
 margin:0;
 z-index:60;
 display:none;
}
/* The slices in the Slider */
.nivo-slice {
 display:block;
 position:absolute;
 z-index:50;
 height:100%;
}
/* Caption styles */
.nivo-caption {
 position:absolute;
 left:0px;
 bottom:0px;
 background:#000;
 color:#fff;
 opacity:0.8; /* Overridden by captionOpacity setting */
 width:100%;
 z-index:89;
}
.nivo-caption p {
 padding:5px;
 margin:0;
}
.nivo-caption a {
 display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
 position:absolute;
 top:45%;
 z-index:99;
 cursor:pointer;
}
.nivo-prevNav {
 left:0px;
}
.nivo-nextNav {
 right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
 position:relative;
 z-index:99;
 cursor:pointer;
}
.nivo-controlNav a.active {
 font-weight:bold;
}

2. Buat file demo.html

</pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
    <title>Nivo Slider Demo</title>
    <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
    <div id="wrapper">
    
        <a href="http://www.dailykurnia.com" id="dev7link" title="Go to dailykurnia[dot]com">dailykurnia</a>

        <div id="slider-wrapper">
        <div id="slider" class="nivoSlider">
 <img src="images/toystory.jpg" alt="toy story" title="Description here"/>
<a href="http://www.dailykurnia.com"><img src="images/up.jpg" alt="" title="This is an example of a caption" /></a>
                <img src="images/walle.jpg" alt="" title="Description here" />
                <img src="images/nemo.jpg" alt="" title="#htmlcaption" />
            </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>
        
        </div>

    </div>
    <script type="text/javascript" src="scripts/jquery-1.4.3.min.js"></script>
    <script type="text/javascript" src="jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
  
</body>
</html>
</pre><pre id="line298"></texarea></pre><br><div style="text-align: justify;">Kedua file diatas harus berada dalam satu folder. Kalo berbeda sih sebenarnya tidak apa-apa, tergantung keinginan. Selanjutnya download file jquery.nivo.slider.pack.js dan jquery-1.4.3.min.js. Downloadnya dimana? oke, kalo bingung anda dapat mendownloadnya langusng <a href="http://kurnia.horizon-host.com/download/nivo.zip">disini</a>. anda juga dapat melihat demo nya <a href="http://kurnia.horizon-host.com/nivo/demo.html">disini</a></div><pre id="line298"><br></pre></div></DIV>
Kedua file diatas harus berada dalam satu folder. Kalo berbeda sih sebenarnya tidak apa-apa, tergantung keinginan. Selanjutnya download file jquery.nivo.slider.pack.js dan jquery-1.4.3.min.js. Downloadnya dimana? oke, kalo bingung anda dapat mendownloadnya langusng disini. anda juga dapat melihat demo nya disini

Daily Kurnia

Pasang Nivo Slider untuk Web atau Blog

Kurnia Rahman Jan 16, 2012 edit Tags: tutorial blog, web design