Minggu, 24 Juni 2012
Bagaimana cara membuat gambar dengan tampilan slider ditambah tombol Previous dan Next? Nah itulah yang akan saya share kali ini. Images Slider tidak jauh berbeda dengan Slideshow biasanya, namun perbedaan nya Slideshow secara otomatis bergantian dengan sendirinya sedangkan Images Slider ini harus manual jadi saat di klik tombol Next maka akan menuju ke gambar berikutnya dan sebaliknya tombol Previous, cara membuat nya sangat mudah dan simlple karena menggunakan jQuery.
- Login ke blog kamu
- Pilih Template , kemudian Edit HTML
- Klik link ini untuk mendapatkan kodenya [KLIK]
- Copy semua kodenya dan letakkan diatas </head>
- Simpan template
- Kemudian pilih Tata Letak
- Tambah Gadget dan pilih HTML/Javascript
- Dan copy paste kode dibawah ini
<div id="myslides">
<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
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgycRl9wF4HzNlxTWqO6Z97eOoZXuRSVFheY9ZLaKeKtYSJObH2giH5LMcNjDzqHTEVnlnYPMEaIWw1Djbg9fuQn16j4nOqnoZp5vXIgXuYg92VTWt_4lIhb3-kZw8k1NbDpNhbYTcFYbFi/', -14, 60], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWtsj83KeUjXYNdsVqysEnZQxO4ZKN4FU4EMHCX6PZvTdC5rDzNrTZXbXaUC-vjo9tA7F4xpTt_cLCjIs2SMqOZ-xyWlFJPKj0Y-UfiWv_LqFRYdUs3pMMQym_2Zzt4PD-R6sCcZhX4l-h/', 0, 60]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>
<div id="mygallery" class="stepcarousel">
<div class="belt">
<div class="panel">
<a href="#" title="NFS Most Wanted">
<img alt="NFS Most Wanted" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJsIdpNakBqLtja4upCiX42h4pYjpcbFGcjkBb1sDi5q7UVTXjgfuZzpvPBCk2Al-9yeGEpPIG7O5BEU_xFV0RRruxq0xLNgVK2uEdZZ8cvmJl7F2cJ7BZAyz3r_8ZafbfneO2_rQFHuZR/+Most+Wanted.jpg" height="120"/>
</a>
</div>
<div class="panel">
<a href="#" title="Call Of Duty">
<img alt="Call Of Duty" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg6YxTBLg1WC-2vBj0BDcoDuI3H59LTDea9kQD9GTPXzbn7vFXboYpOxGNXUp1Cja2yAQ6NFhz9WdIOE8GUHRxLRKCdfM048NU3ajaQ4KeBhc3ynljEd4gGageX380ewpKKbSLcb2J1Q-Q/+Of+Duty.jpg" height="120"/>
</a>
</div>
<div class="panel">
<a href="#" title="MaxPayne3 Game">
<img alt="MaxPayne3 Game" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp_oBa_j2llnhr9oFoD6Q2owK4ndlILvxoPYmgEYH0cU03-ZZBuga8CfFese8PACems9S6MpWcA5bFPWFwRsWwfwyF2GMHkAY5KrRhCzOJKQuNIUhV8_K7vp7gAAuoxGmTknMkypSPnYEz/+game.gif" height="120"/>
</a>
</div>
<div class="panel">
<a href="#" title="Tomb Raider">
<img alt="Tomb Raider" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcPfykwTRaUDz6Kpy_i75q8x3qhyphenhyphenAetfZlRnmNOuNwgjONVh5sJx30tx9-uzoid8N-M9w2KZ6tg85GiF0q813M8AD-ygXyJ6YpJBLewN8mdp6kqog1dILt0AYubNMdTbbbpsGxWHwSlIUV/+Rider.jpg" height="120"/>
</a>
</div>
<div class="panel">
<a href="#" title="Harry Potter">
<img alt="Harry Potter" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYPqlJ7YEQHoPN6SXNZfc9duWI7ZCQMFt6mklAZjdsGbqeJXsUAXWbOxsiw3_myV-t0OVS2A0U2LNrpZaOl7wxIGkPi4gppjgftNFv4k1KOMNCt9icNY1BxRqg_4syTkb1Ro4BC7TMSyzW/+potter.jpg" height="120"/>
</a>
</div>
<div class="panel">
<a href="#" title="NFS ProStreet">
<img alt="NFS ProStreet" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUaG0Dn0L5_GBkLuwbeqt6Khe_mlc72to-5CRi2u_9rQH0s3rKwAR8S9LO7aaNuFSIMLxxV6HRcd_WwfvLgd0L1Qu584fGB1O0VNEf_rqRo6kiwBO-7PtdFZsAe_oi8GbMyQ9YkVFfMUEs/+ProStreet.jpg" height="120"/>
</a>
</div>
<div class="panel">
<a href="#" title="MaxPayne Movie">
<img alt="MaxPayne Movie" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWfL7ohrEg6DWIt_RJ2pESWZRioznCXU3wK5S17fAJ0GlxPHEFH5pHZxRFvMP9M1wGt7NrG_JZ2E2WspLUXg1Fc1vxiZe0vB6vuScH59-g3kGcaBjfbFEfe03sIkzQv4NED4XGB9dY47N9/+movie.jpg" height="120"/>
</a>
</div>
<div class="panel">
<a href="#" title="NFS Undercover">
<img alt="NFS Undercover" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguV7_FOemRPrIXkvc8AG2_McvTTiKOhLJenxdfD-oHGK-ImYq3TBM8g-oo7qtpHCglSmN00VRq_HkydNJCjoRNnMoRB5vonVkOuam4l_M194YEYWnB6omjEUJVoZK7tL4OuJm3SxbnvjJ7/+Undercover.jpg" height="120"/>
</a>
</div>
</div>
</div>
</div>
- Ganti kode yang berwarna merah dengan URL gambar
- Dan tanda # dengan URL yang dituju saat diklik gambar tersebut
