Tạo nội dung trượt tự động bằng jQuery (bản đẹp)

Bước 1 : Thiết kế mẫu

1. Đăng nhập vào Bảng điều khiển, chọn mẫu - chỉnh sửa Html
2. Không chọn "Mở rộng mẫu" (Expand Widget Templates)
3. Tìm đoạn mã: 

   ]]></b:skin>

4. Chèn đoạn mã sau vào trước nó, sau đó lưu lại:

/* START
----------------------------------------------------------
Awesome Automatic Content Sliders for Blogger using jQuery
By http://www.abu-farhan.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://www.abu-farhan.com
--------------------------------------------------------------------
Featured Content Slider
*/

Bước 2 : Cài đặt Javascript

Tìm đến : </body>
Thêm đoạn mã sau vào trước nó:

<!-- 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>

Bước 3: Cài đặt Gadget- Vào Bố cục -> Click on “Add a Gadget” -> HTML/JavaScript.
- Sau đó thêm đoạn mã sau vào và thay đổi các thông số màu đỏ cho phù hợp với blog của bạn:

<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://abu-farhan-demo.blogspot.com/feeds/posts/default?

orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999">

</script>
</div>

Xem: Demo