JQuery Slideshow Versi 3

Niat Ngeblog - Hai sob, kali ini kita akan belajar mempercantik blog dengan menambahkan widget Slideshow dengan JQuery versi 3. Jadi dengan teknik ini, maka akan menampilkan slides postingan terbaru dari blog kamu. Di sadur dari website teman Abu  Farhan, maka berikut penerapannya pada blog kamu :

01. Buka Account blog kamu.

02. Pilih menu Design dan klik Edit HTML.

03. Aktifkan menu Expand Widget Templates.

04. Letakkan kode berikut di atas ]]></b:skin>

/* START
--------------------------------------------------------------------
Awesome Automatic Content Sliders for Blogger using jQuery
By http://niatngeblog.blogspot.com

http://css-tricks.com/889-creating-a-slick-auto-playing-featured-content-slider/

--------------------------------------------------------------------
Featured Content Slider
*/
#slider-wrap { width: 500px; margin: 25px auto; position: relative; min-height: 500px;font-size: 10px; background: url(http://i1133.photobucket.com/albums/m596/abu-farhan/featuredcontentslider-bg.png) top center; }
.slider-wrap{ font-family: Arial, Helvetica, sans-serif; width: 419px; position: absolute; top: 87px; left: 40px; }
.stripViewer .panelContainer
.panel ul{ text-align: left; margin: 0 15px 0 30px; }
.stripViewer{ position: relative; overflow: hidden; width: 419px; height: 285px; }
.stripViewer .panelContainer{ position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel    { float: left; height: 100%; position: relative; width: 419px; }
.stripNavL, .stripNavR, .stripNav{ display: none; }
.nav-thumb { border: 1px solid black; margin-right: 5px; }
#movers-row    { margin: -46px 0 0 62px; }
#movers-row div    { width: 20%; float: left; }
#movers-row div a.cross-link { float: right; }
.photo-meta-data{ background: url(http://i1133.photobucket.com/albums/m596/abu-farhan/featuredcontentslider-transpBlack.png); padding: 10px; height: 40px; margin-top: -50px; position: relative; z-index: 9999; color: white; }
.photo-meta-data span { font-size: 13px; }
.cross-link    { display: block; width: 62px; margin-top: -10px; position: relative; padding-top: 10px; z-index: 9999; }
.active-thumb { background: transparent url(http://i1133.photobucket.com/albums/m596/abu-farhan/featuredcontentslider-icon-uparrowsmallwhite.png) top center no-repeat; }
/* END
--------------------------------------------------------------------
Awesome Automatic Content Sliders for Blogger using jQuery
By http://niatngeblog.blogspot.com
--------------------------------------------------------------------
Featured Content Slider
*/

05. Dan letakkan kode berikut di atas kode </body> kemudian Save Tempale.

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/FeaturedContentSlider.pack.js"></script>
 <script type="text/javascript">
 var theInt = null;
 var $crosslink, $navthumb;
 var curclicked = 0;
 theInterval = function(cur){
 clearInterval(theInt);
 if( typeof cur != 'undefined' )
 curclicked = cur;
 $crosslink.removeClass("active-thumb");
 $navthumb.eq(curclicked).parent().addClass("active-thumb");
 $(".stripNav ul li a").eq(curclicked).trigger('click');
 theInt = setInterval(function(){
 $crosslink.removeClass("active-thumb");
 $navthumb.eq(curclicked).parent().addClass("active-thumb");
 $(".stripNav ul li a").eq(curclicked).trigger('click');
 curclicked  ;
 if( 6 == curclicked )
 curclicked = 0;
 }, 3000);
 };
 $(function(){
 $("#main-photo-slider").codaSlider();
 $navthumb = $(".nav-thumb");
 $crosslink = $(".cross-link");
 $navthumb
 .click(function() {
 var $this = $(this);
 theInterval($this.parent().attr('href').slice(1) - 1);
 return false;
 });
 theInterval();
 });
 </script>

06. Pindah ke menu Page Elements.

07. Pilih Add a Gadget dan pilih HTML/JavaScript.

08. Copy dan paste kode berikut. Jangan lupa untuk mengganti alamat di kode ini dengan alamat blog kamu.

<div id="slider-wrap">
<script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-FeaturedContentSlider.js"></script>
<script style="text/javascript">
 var numposts_gal = 6; //recommended
 var numchars_gal = 150;
 var random_posts = false; // random posts
</script>
<script src="http://ALAMAT BLOG KAMU/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>

09. Save dan lihat hasilnya.

Selamat mencoba,