Widget Blogger Slider Cantik Jquery, part2 tanpa harus ubah template

TutorialMixs - oke sob, langsung aja, sekarang aku mo coba share pembuatan widget slider cantik, tanpa harus otak-atik template blogger sobat. untuk pemula kurasa ini widget paling apik untuk di sisipkan ke blogger sobat..

langsung aja ke topik:
1. langkah pertama silahkan ikutin langkah atau alur berikut di bawah ini:

untuk melihat live demonya silahkan klik icon berikut:

.2. Lalu masukkan perintah script di bawah ini

Berikut Scriptnya :

<!-- perintah--><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script> <script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/17-content-code/jquery.jcarousel.pack.js" type="text/javascript"></script> <script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/17-content-code/jquery-ui-personalized-1.5.2.packed.js" type="text/javascript"></script> <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> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://tutorialmixs.blogspot.com/" rel="dofollow" target="_blank" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><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/AVvXsEjtIinCDe2sA8LbtUrzYViwoexUWS6GhZs0RzjawonZPeXmaKAat4igDADtAbAGVLosdnMifmPcCf5CIt3X26df2I0vtN9YzmzM7Byywgfv2e7InzlhyszRieD8CE_76uEDXCnCPkDuaeia/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/AVvXsEjtIinCDe2sA8LbtUrzYViwoexUWS6GhZs0RzjawonZPeXmaKAat4igDADtAbAGVLosdnMifmPcCf5CIt3X26df2I0vtN9YzmzM7Byywgfv2e7InzlhyszRieD8CE_76uEDXCnCPkDuaeia/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> <div id="news-slider"><ul class="jcarousel-skin-tango" id="mycarousel"><li><a href="#" target="_blank"><img height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAp-vG4QpjfkY32SgUs1Va8Sx_gheo4iiZ7DjJapz4wJbwR2BVyX93xckT6b9QkhvYeA6XxzGqffoJGxSOODxp9ipl3blGvYOr46pbGys9spqK0ireOTvvTk6WWwchHv8_rkUDemTUMlIZ/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" width="307" /></a></li><li><a href="http://tutorialmixs.blogspot.com" target="_blank"><img height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDCxGtc9S7mqjPf4LZSUmGyhq9seYO8O5e3l_mbtOKeh4XD_4jTkPv0EIJMpaxtTZy8dfuWROCPEKbAGQkyt86iQKQU0AuMTGpq_3Py4BTFkqYWq71HFJxq94nN2_KLbS7Js05EVoWLiUS/s1600/lipsing+anak+smu+550x309.jpg" width="307" /></a></li><li><a href="http://tutorialmixs.blogspot.com" target="_blank"><img height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsvO3urcHKpR6DgMZSyfr0ETfnzEB4jDru-YsJU9f2TVKtHByK-seLPYJEp-qAvHDpdVx9Ut8SJZEIHM6aGfNKT_MM04vnC9qQImRMqi0lNcuVDAKqALXOgEzpdbezxHonHwlEm4Ji4fLc/s1600/Sasha+grey+550x309.jpg" width="307" /></a></li><li><a href="http://tutorialmixs.blogspot.com" target="_blank"><img height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPN8kiw4VQBDGMwNpI-pgT7PvKIX8VU77M1w8rhIREvigarPlvCmjCu_vqicLVwNepfbN4XB82w-P2a5enaHiEe_63_rFNepOfVa2H0B-X5Qw0Bj9x5MHmCWPillQbRstumymCfd1YpD1y/s1600/sakitnya+tuh+disini+500x309.jpg" width="307" /></a></li><li><a href="http://tutorialmixs.blogspot.com" target="_blank"><img height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDCxGtc9S7mqjPf4LZSUmGyhq9seYO8O5e3l_mbtOKeh4XD_4jTkPv0EIJMpaxtTZy8dfuWROCPEKbAGQkyt86iQKQU0AuMTGpq_3Py4BTFkqYWq71HFJxq94nN2_KLbS7Js05EVoWLiUS/s1600/lipsing+anak+smu+550x309.jpg" width="307" /></a></li></ul></div><div class="clear"></div><!--akir perintah-->

3. Terakhir silahkan di simpan

Note:

lebih bagusnya tempatkan sript di atas di atas atau di bottom artikel, yang full satu halaman

silahkan ganti image agan yang berexstention .JPG