Jquery Slider

Anda Bisa Melihat Demonya Di Sini

1.Login to your blogger dashboard--> Design - -> Edit HTML.


2.Scroll down to where you see </head> tag .


3.Copy below code and paste it just before the </head> tag .

<script src='http://bnote.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'></script><br /> <script src='http://bnote.googlecode.com/files/jquery.jcarousel.pack.js' type='text/javascript'></script><br /> <script src='http://bnote.googlecode.com/files/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'></script><br /> <br /> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ wrap:"both", scroll:2, animation:"slow" }); function mycarousel_initCallback(carousel) { jQuery('#featured-next-button').bind('click', function() { carousel.next(); return false; }); jQuery('#featured-prev-button').bind('click', function() { carousel.prev(); return false; }); jQuery('.button-nav span').bind('click', function() { carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text())); return false; }); }; jQuery('#feature-carousel').jcarousel({ wrap:"both", scroll:1, auto:10, initCallback: mycarousel_initCallback, buttonNextHTML: null, buttonPrevHTML: null }); }); </script><br /> <br /> <style type="text/css"> .jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;} .jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;} .jcarousel-skin-tango .jcarousel-clip-horizontal {width: 941px;height: 254px;} .jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;} .jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;} .jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;} .jcarousel-skin-tango .jcarousel-next-horizontal { background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNZG0Ztt5zso2YUYzkqlgeo0LhK0jzsrb_xgM5Ztffi1YASvBlWw9MylzxRwQAuuQdqIQvNkjPQ5Jh2ryBYUdTGFCNpVLf20To3I0JWg5d_uOf7t4I8LVVnrFJQGU7-592OD8XD0GAYYnm/s1600/image-slider-button.png) no-repeat scroll -46px 0; cursor:pointer; height:254px; right:20px; position:absolute; top:0; width:46px; } .jcarousel-skin-tango .jcarousel-prev-horizontal { background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNZG0Ztt5zso2YUYzkqlgeo0LhK0jzsrb_xgM5Ztffi1YASvBlWw9MylzxRwQAuuQdqIQvNkjPQ5Jh2ryBYUdTGFCNpVLf20To3I0JWg5d_uOf7t4I8LVVnrFJQGU7-592OD8XD0GAYYnm/s1600/image-slider-button.png) no-repeat scroll 0 0; cursor:pointer; height:254px; left:20px; position:absolute; top:0; width:46px; } .jcarousel-container {position: relative;} .jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;} .jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;} .jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;} .jcarousel-next {z-index: 3;display: none;} .jcarousel-prev {z-index: 3;display: none;} #news-slider{background-color:#FFFFFF;padding:20px 0;} #news-slider img{border:none;height:254px;width:307px;} </style>

4.Now menyimpan template Anda.

5.Go ke Layout - Elemen Halaman>.

6.Click pada 'Tambah Gadget'.

7.Select 'HTML / Javascript' dan tambahkan kode yang diberikan di bawah ini:

<div id='news-slider'><ul class='jcarousel-skin-tango' id='mycarousel'><li><a href='SLIDE-1-LINK-HERE'><img src='SLIDE-1-IMAGE-ADDRESS-HERE'/></a></li> <li><a href='SLIDE-2-LINK-HERE'><img src='SLIDE-2-IMAGE-ADDRESS-HERE'/></a></li> <li><a href='SLIDE-3-LINK-HERE'><img src='SLIDE-3-IMAGE-ADDRESS-HERE'/></a></li> <li><a href='SLIDE-4-LINK-HERE'><img src='SLIDE-4-IMAGE-ADDRESS-HERE'/></a></li> <li><a href='SLIDE-5-LINK-HERE'><img src='SLIDE-5-IMAGE-ADDRESS-HERE'/></a></li> </ul></div>

CATATAN: Ganti,

SLIDE-X-LINK-DISINI dengan link nyata Anda posting ditampilkan.

SLIDE-X-IMAGE-ALAMAT-DISINI dengan alamat asli anda slide gambar.


Dah Berhasil Dahhh


Look at the example below:

<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNxcLi-KAk8ja6745w4aB3Z7RXGS7R-F-ReBBrkwvwIAcdj8iGtXTNVL4o_Hbfngqly5zxlYG7XtSmrNdtA_meQ5jVqM4CRqCLU8YRLqfv1vFH2VVdFGnUBsspsfZC6JRhEcDuYvBywrRu/s1600/slide1.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAQVKeu8j9Eop-raEVaowzpGaFNQyaHMjjfSbeWBai98ntvc3G1ag8zfIcWTl0egURxKCp49kp6T9wL6JxXpmj_TzyCY5yW77Uq0zFGuiUEnHOOeTqs8z0KkY7ezwCv4628qWz8Fv5GUwu/s1600/slide2.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpCryGHalFcd3dxwLJOO8PU3LOS4jkmYI7VFpQRG93lrTjpiX58_KpzXRVTtQzfCK5iklSJ4qcAtYbW9dxgL7tHyedxetkRJQq3uKo_jzkTWCjHAqBxFQsO7uUJxSK2WXUBz5oKqVzDuHd/s1600/slide3.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6UlmRlzDLn-a1XvuRKRaEocDeAH6RHr0HVyNRIYTBX4UQ22SKCHvVl4imxg_ovZgv_i3T43sGgLfuZEHIMJSw4FXgTwiCe6vlROncETCLCWhF497PHfwXrYbZTJgDdV6jU9M9WkoaEu5k/s1600/slide4.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXuy1WgnKDynrrAlz6Ew9vkeKdVoB71N-Df9Jxzqmi7TtjB6D9jdGz8sSu7aZL4529kCTLYKU0rgjeQusbn8ijoz3Fo-5hXzntqwU_PMeOuZXvjeV1Ls0DRVAbtEvPMLVp7tBsU_dULRX6/s1600/slide5.jpg'/></a></li>
</ul>
</div>