Nội dung trượt Nivo [1]

Hình thức cùa thủ thuật nầy là hiển thị bài đăng mới nhất, code từ trang abu-farhan.com  được tùy chỉnh lại cho phù hợp với giao diện blog và tiết kiệm được một chút không gian trên blog.
Với hình thức nầy rất được phổ biến trên các trang web/blog hiện nay và có rất nhiều dạng tùy theo nhu cầu và sở thích của mổi người. Hi vọng bạn sẽ có thêm một lựa chọn để trang trí cho blog/web của minh
Bạn có thể xem demo của thủ thuật nầy tại trang chủ của blog.

Bước 1: Đăng nhập vào Blogger » Thiết kế (Design) » Chỉnh sửa HTML (Edit/Html) » Mở rộng tiện ích và dán đoạn code sau vào trên thẻ đóng ]]></b:skin><!--Tab noi dung truot nivo, abu-farhan.com, www.kynangso.com--> /*-----START Default Theme ----*/ .theme-default .nivoSlider { position:relative; background:#fff url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/default/loading.gif) no-repeat 50% 50%; -webkit-box-shadow: 0px 0px 0px 0px #7B7B7B; -moz-box-shadow: 0px 0px 0px 0px #7B7B7B; box-shadow: 0px 0px 0px 0px #7B7B7B; } .theme-default .nivoSlider img { position:absolute;top:0px;left:0px;display:none; } .theme-default .nivoSlider a { border:0;display:block; } .theme-default .nivo-controlNav { position:absolute;left:80%; bottom:0px; margin-left:-40px; } .theme-default .nivo-controlNav a { display:block;width:22px;height:22px; background:url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/default/bullets.png) no-repeat; text-indent:-9999px;border:0;margin-right:3px;float:left; } .theme-default .nivo-controlNav a.active { background-position:0 -22px; } .theme-default .nivo-directionNav a { display:block;width:30px;height:30px; background:url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/default/arrows.png) no-repeat; text-indent:-9999px;border:0; } .theme-default a.nivo-nextNav { background-position:-30px 0;right:15px; } .theme-default a.nivo-prevNav { left:15px; } .theme-default .nivo-caption { font-family: Helvetica, Arial, sans-serif; } .theme-default .nivo-caption a { color:#fff; border-bottom:1px dotted #fff; } .theme-default .nivo-caption a:hover { color:#fff; } /*----- END Default Theme -----*/ /* The Nivo Slider styles */ .nivoSlider { position:relative; } .nivoSlider img { position:absolute;top:0px;left:0px; } /* If an image is wrapped in a link */ .nivoSlider a.nivo-imageLink { position:absolute;top:0px;left:0px;width:100%;height:100%;border:0; padding:0;margin:0;z-index:6;display:none; } /* The slices and boxes in the Slider */ .nivo-slice { display:block; position:absolute; z-index:5; height:100%; } .nivo-box { display:block; position:absolute; z-index:5; } /* Caption styles */ .nivo-caption { position:absolute; left:0px; bottom:0px; background:#000; color:#fff; opacity:0.8; width:100%; z-index:8; } .nivo-caption p { padding:5px; margin:0; } .nivo-caption a { display:inline !important; } .nivo-html-caption { display:none; } /* Direction nav styles (e.g. Next & Prev) */ .nivo-directionNav a { position:absolute; top:45%; z-index:9; cursor:pointer; } .nivo-prevNav { left:0px; } .nivo-nextNav { right:0px; } /* Control nav styles (e.g. 1,2,3...) */ .nivo-controlNav a { position:relative; z-index:9; cursor:pointer; } .nivo-controlNav a.active { font-weight:bold; } .theme-default #slider { margin:0px auto 0px auto; width:570px; height:250px; } .theme-pascal.slider-wrapper, .theme-orman.slider-wrapper { margin-top:150px; } .clear { clear:both; } <!--Tab noi dung truot nivo -->

Bước 2: Dán đoạn code bên dưới vào trên thẻ </body> (nếu bạn sử dụng tiện ích nào có sừ dụng file JS nầy thì bạn có thể bỏ qua bước nầy). <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/> <script src='http://catur-at-abu-farhan.googlecode.com/svn/trunk/nivo-slider-modified.min.js' type='text/javascript'/> <script type='text/javascript'> $(window).load(function() { $('#slider').nivoSlider(); }); </script>
Bước 3: Tạo 1 widget HTML/javascript và dán đoạn code bên dưới vào: <div class="slider-wrapper theme-default"> <script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-nivo-slider.js"></script> <script style="text/javascript"> var numposts_gal = 6; //number of posts var image_height = 250; //image height var image_width = 570; //image width </script> <script src="http://www.kynangso.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script> </div>
Chú ý: Chiều rộng và chiều cao của ảnh trong templates và HTML/javascript phải bằng nhau và thay http://www.kynangso.com thanh ten web/blog của bạn. 
Chút thành công!.