Nội dung trượt Nivo [2] - Trình diễn ảnh

Nivo Slider là một plugin trình diễn ảnh rất đẹp, hổ trợ nhiều kiểu chuyển động khác nhau mà không dùng đến flash.

Bạn đã xem bài viết Nội dung trượt Nivo [1] và đã cảm nhận được sự mượt mà của Nivo. Hôm nay mình giới thiệu thêm một kiểu trình diễn nửa của Nivo nhưng lại thiên về trình diễn ảnh có chứa liên kết đến bài viết hoặc sản phẩm phù hợp cho Blogger.

Bạn có thể xem demo của thủ thuật nầy tại đây.
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 </head><link href='http://nivo.dev7studios.com/wp-content/plugins/nivo-slider/scripts/nivo-slider/nivo-slider.css?ver=3.3.1' id='nivoslider-css' media='all' rel='stylesheet' type='text/css'/> <link href='http://nivo.dev7studios.com/wp-content/plugins/webtreats-column-shortcodes/styles.css?ver=3.3.1' id='column-styles-css' media='all' rel='stylesheet' type='text/css'/> <script src='http://nivo.dev7studios.com/wp-includes/js/jquery/jquery.js?ver=1.7.1' type='text/javascript'></script> <script src='http://nivo.dev7studios.com/wp-content/plugins/zilla-bar/scripts/jquery.cookie.js?ver=3.3.1' type='text/javascript'></script> <script src='http://nivo.dev7studios.com/wp-content/plugins/zilla-bar/scripts/zilla-bar.js?ver=3.3.1' type='text/javascript'></script> <script src='http://nivo.dev7studios.com/wp-content/plugins/cart66/js/cart66-library.js?ver=1.3.7' type='text/javascript'></script> <script type="text/javascript">(function(){var a;var b=navigator.userAgent;a=-1!=b.indexOf("Mobile")&&-1!=b.indexOf("WebKit")&&-1==b.indexOf("iPad")||-1!=b.indexOf("Opera Mini")?!0:!1;if(a){var c;a:{var d=window.location.href,e=d.split("?");switch(e.length){case 1:c=d+"?m=1";break a;case 2:c=0<=e[1].search("(^|&)m=")?null:d+"&m=1";break a;default:c=null}}c&&window.location.replace(c)};})(); </script><script type="text/javascript"> if (window.jstiming) window.jstiming.load.tick('headEnd'); </script>
 Bước 2: Tạo 1 widget HTML/javascript và dán đoạn code bên dưới vào: <div style="width:700px;margin:0px left;"> <div class="slider-wrapper theme-default controlnav-thumbs"> <div class="ribbon"> </div> <div id="nivoslider-577" class="nivoSlider" style="width:700px;height:300px;"> <a href="Liên kết 1" target="_blank"><img src="Hinh ảnh 1" rel="Hinh ảnh thu nhỏ 1" alt="" /></a> <a href="Liên kết 2" target="_blank"><img src="Hinh ảnh 2" rel="Hinh ảnh thu nhỏ 2" alt="" /></a> <a href="Liên kết 3" target="_blank"><img src="Hinh ảnh 3" rel="Hinh ảnh thu nhỏ 3" alt="" /></a> <a href="Liên kết 4" target="_blank"><img src="Hinh ảnh 4" rel="Hinh ảnh thu nhỏ 4" alt="" /></a> </div> <script type="text/javascript"> jQuery(window).load(function(){ jQuery("#nivoslider-577").nivoSlider({ effect:"fade", slices:15, boxCols:8, boxRows:4, animSpeed:200, pauseTime:3000, startSlide:0, directionNav:true, directionNavHide:true, controlNav:true, controlNavThumbs:true, controlNavThumbsFromRel:true, keyboardNav:true, pauseOnHover:true, manualAdvance:false }); }); </script> </div> <script type='text/javascript' src='http://nivo.dev7studios.com/wp-content/plugins/nivo-slider/scripts/nivo-slider/jquery.nivo.slider.pack.js?ver=3.3.1'></script> <link rel='stylesheet' id='nivoslider-theme-default-css' href='http://nivo.dev7studios.com/wp-content/plugins/nivo-slider/scripts/nivo-slider/themes/default/default.css?ver=3.3.1' type='text/css' media='all' />
Chú ý: Điều chỉnh chiều rộng và chiều cao cho anh cho phù hợp với Blog của ban nhé. và chép về lưu trử các file *. js.
Chúc thành công!.