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/AVvXsEjB_ap53G4WZyftAxv8rQp2CAY_fzjfXPPAEehnC208ckopZUCZ4m9Q5_p5m5TtfO8NQDPG7JlTONFbCZn8e9aJ_ViQm947CeXz7Kt8PUu01tC94k1t7UHRUWLsSpnzHf1EasbrKzqOv1sc/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/AVvXsEjB_ap53G4WZyftAxv8rQp2CAY_fzjfXPPAEehnC208ckopZUCZ4m9Q5_p5m5TtfO8NQDPG7JlTONFbCZn8e9aJ_ViQm947CeXz7Kt8PUu01tC94k1t7UHRUWLsSpnzHf1EasbrKzqOv1sc/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/AVvXsEhJaX3UTwWmx2iuTmct8WiMUQeEbYAKeZvCOUTF1sUAA1oxZBvfUyNzvG5X7GAVDn8ytgfudBTWHm_HyrI9EuzSzn3d9MWxEcAkl7TGxu8obwDNpPwdEMaYl_asDViVfFxuEW2qi93-zvhS/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/AVvXsEhdctKRXEiL9vlwcdZ9lHOCVXQbt1MTeX2r1SBVNpdxBTeJDssG_F1NFCMdia2EfAZ7dlLHjp2_JIlD9UO3j77Ov4yx1fPZdlzlYYd8Fe4UsDmLEBIpbJ5sd5zH4e1-VAgEXogOD6oIg9QR/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/AVvXsEgjfSCE2eN7LOk682HLg6eyxmB-Qa0HV9_0uyqQT-CJV7NJmMyIl96X3-6XoWW2yJ6ipiKLTyGexjP_CO9wtv9E9xXdY4o2AQ3m9dMUDTzfoO7y_V99yNkK7OJYlAJcMb9uo_C4-nHj4OTm/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/AVvXsEhvetpIQ33YjCMEEi63aAFknH8465AnIKE-dZM4_p6v85mmsuqvu4k9we8-oXM3ylmkBdZSOjCnoxQIK_1WMvpuqWlZGx79NC9bFh3VYSOcKcjjZuaBGpmcFqrkJ5-Kpy9vOBUGKvhUm8z5/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/AVvXsEhdctKRXEiL9vlwcdZ9lHOCVXQbt1MTeX2r1SBVNpdxBTeJDssG_F1NFCMdia2EfAZ7dlLHjp2_JIlD9UO3j77Ov4yx1fPZdlzlYYd8Fe4UsDmLEBIpbJ5sd5zH4e1-VAgEXogOD6oIg9QR/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