Step Carousel Viewer

Cara Pembuatan nya sebagai berikut:

1. Login
2. Setelah masuk pada halaman dasbor pilih rancangan
3. Klik edit Html
4. Centang expad widget dan cari kode ]]></b:skin>agar pencarian kode lebih cepat tekan Ctrl+F atau F3
5. Salin Kode Css di bawah ini dan letakkan di atas kode yang anda cari tadi

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"> </script><br /> <br /> <script src="http://nickenkartika.googlecode.com/files/stepcaurosel.js" type="text/javascript"> /*********************************************** * Step Carousel Viewer script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts * This notice must stay intact for legal use ***********************************************/ </script><br /> <br /> <style type="text/css"> .stepcarousel{ position: relative; /*leave this value alone*/ border: 10px solid black; overflow: scroll; /*leave this value alone*/ width: 270px; /*Width of Carousel Viewer itself*/ height: 200px; /*Height should enough to fit largest content's height*/ } .stepcarousel .belt{ position: absolute; /*leave this value alone*/ left: 0; top: 0; } .stepcarousel .panel{ float: left; /*leave this value alone*/ overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/ margin: 10px; /*margin around each panel*/ width: 250px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */ } </style><br /> <br /> <br /> <br /> <script type="text/javascript"> stepcarousel.setup({ galleryid: 'mygallery', //id of carousel DIV beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs panelclass: 'panel', //class of panel DIVs each holding content autostep: {enable:true, moveby:1, pause:3000}, panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true}, defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://www.dynamicdrive.com/dynamicindex4/leftnav.gif', -5, 80], rightnav: ['http://www.dynamicdrive.com/dynamicindex4/rightnav.gif', -20, 80]}, statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file'] }) </script>

Markah Html

<div class="stepcarousel" id="mygallery"> <div class="belt"> <div class="panel"> <img src="http://www.dynamicdrive.com/dynamicindex14/stadium.jpg" /></div> <div class="panel"> <img src="http://www.dynamicdrive.com/dynamicindex14/lakeside.jpg" /></div> <div class="panel"> <img src="http://www.dynamicdrive.com/dynamicindex14/winter.jpg" /></div> <div class="panel"> <img src="http://www.dynamicdrive.com/dynamicindex14/lakeside.jpg" /></div> <div class="panel"> <img src="http://www.dynamicdrive.com/dynamicindex4/cave.jpg" /></div> </div> </div> <b>Current Panel:</b> <span id="statusA"></span> <b style="margin-left: 30px;">Total Panels:</b> <span id="statusC"></span> <div id="mygallery-paginate" style="text-align: center; width: 250px;"> <img data-moveby="1" data-over="http://www.dynamicdrive.com/dynamicindex4/graycircle.png" data-select="http://www.dynamicdrive.com/dynamicindex4/closedcircle.png" src="http://www.dynamicdrive.com/dynamicindex4/opencircle.png" /> </div> <a href="javascript:stepcarousel.stepBy('mygallery', -1)">Back 1 Panel</a> <a href="javascript:stepcarousel.stepBy('mygallery', 1)" style="margin-left: 80px;">Forward 1 Panel</a>  <a href="javascript:stepcarousel.stepTo('mygallery', 1)">To 1st Panel</a> <a href="javascript:stepcarousel.stepBy('mygallery', 2)" style="margin-left: 80px;">Forward 2 Panels</a>

Current Panel: Total Panels:

Back 1 Panel Forward 1 Panel


To 1st Panel Forward 2 Panels

Selamat Mencoba

credit: dinamicdrive