Nếu sử dụng tiện ích bài mới dạng SlideShow tự động lấy bài này thì ảnh đại diện của mỗi bài viết nên để kích thước lớn(có chiều rộng bằng với chiều rộng của slider) thì khi lên hình ảnh không bị vỡ hạt(ảnh mới nét) Xem thử nhé

Cài đặt Tiện ích bài mới dạng SlideShow
Đăng nhập blog-Chọn chỉnh sửa HTML-Tìm tới thẻ ]]></b:skin> và dán đoạn code sau trước nó:
#slider, #sliderContent, #slider img { width:420px; /* Chiều rộng slideshow */ height:270px; /* Chiều cao slideshow */ } #slider { margin:0 auto 10px; border:2px solid white; background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj415FXrihp5dc1frmq1HGyyp36qVZIJyAiBty7lV_0gYHBt329msM05RfEDW1sVk1wkv2tERvyf46vgJhTXdAt5ZkZeR3hA4EFyKvDMH9HzpLYQDGyV7Bs35xONEhBpqGKoZdf2oBWOj-D/s16/nivo-loading.gif') no-repeat 50% 50%; position:relative; -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4); -moz-box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4); box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4); overflow:hidden; } #sliderContent { position:absolute; top:0; left:0; margin:0 0; padding:0 0; overflow:hidden; } #slider img { border:none; padding:0 0; margin:0 0; width:100%; height:auto; outline:none; } .sliderImage { list-style:none; margin:0 0; padding:0 0; width:100%; display:none; } .sliderImage span { position:absolute; left:0; right:0; bottom:0; height:auto; font:normal 11px Arial,Sans-Serif; color:white; background-color:black; opacity:.8; filter:alpha(opacity=80); padding:7px 10px 12px; display:none; } .sliderImage span a { font-size:12px; font-weight:bold; color:white; text-decoration:none; }Tiếp tục tìm tới thể </head> và dán đoạn code sau trước nó:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script> <script type='text/javascript'> //<![CDATA[ /* ------------------------------------------------------------------------ s3Slider Developped By: Boban Karišik -> http://www.serie3.info/ CSS Help: Mészáros Róbert -> http://www.perspectived.com/ Version: 1.0 Copyright: Feel free to redistribute the script/modify it, as long as you leave my infos at the top. -------------------------------------------------------------------------- */ (function($){ $.fn.s3Slider = function(vars) { var element = this; var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000; var current = null; var timeOutFn = null; var faderStat = true; var mOver = false; var items = $("#" + element[0].id + "Content ." + element[0].id + "Image") var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span"); items.each(function(i) { $(items[i]).mouseover(function() { mOver = true; }); $(items[i]).mouseout(function() { mOver = false; fadeElement(true); }); }); var fadeElement = function(isMouseOut) { var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut; thisTimeOut = (faderStat) ? 10 : thisTimeOut; if(items.length > 0) { timeOutFn = setTimeout(makeSlider, thisTimeOut); } else { console.log("Poof.."); } } var makeSlider = function() { current = (current != null) ? current : items[(items.length-1)]; var currNo = jQuery.inArray(current, items) + 1Lưu mẫu lại
currNo = (currNo == items.length) ? 0 : (currNo - 1); var newMargin = $(element).width() * currNo; if(faderStat == true) { if(!mOver) { $(items[currNo]).fadeIn((timeOut/6), function() { if($(itemsSpan[currNo]).css('bottom') == 0) { $(itemsSpan[currNo]).slideUp((timeOut/6), function() { faderStat = false; current = items[currNo]; if(!mOver) { fadeElement(false); } }); } else { $(itemsSpan[currNo]).slideDown((timeOut/6), function() { faderStat = false; current = items[currNo]; if(!mOver) { fadeElement(false); } }); } }); } } else { if(!mOver) { if($(itemsSpan[currNo]).css('bottom') == 0) { $(itemsSpan[currNo]).slideDown((timeOut/6), function() { $(items[currNo]).fadeOut((timeOut/6), function() { faderStat = true; current = items[(currNo+1)]; if(!mOver) { fadeElement(false); } }); }); } else { $(itemsSpan[currNo]).slideUp((timeOut/6), function() { $(items[currNo]).fadeOut((timeOut/6), function() { faderStat = true; current = items[(currNo+1)]; if(!mOver) { fadeElement(false); } }); }); } } } } makeSlider(); }; })(jQuery); //]]> </script> <script type='text/javascript'> //<![CDATA[ $(window).bind('load', function() { $('#slider').css('background-image', 'none').s3Slider({ timeOut:3000 }); }); //]]> </script>
Bây giờ là công việc thêm một tiện ích
Vào bố cục chọn thêm 1 tiện ích bạn muốn hiển thì slider và dàn đoạn code sau vào và lưu lại
<script type="text/javascript"> var showPostDate_g = true, slideOpenNewTab = false, idMode = true, slidebyLabels = false,//Nếu theo nhãn thì để true slideLabelName = "Nhãn", thumbWidth = 420, pBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvnWnoIIEvj6dbaLVfz0zCnpwtiCbzdUHOPe2UziDBoczgQOBrjP6pg0vIRZNdM-F4pPmomodgtiSPhB9Rsv51Kkkwx1kDLO0WJADmbgoBRzp61DvfAOfEdl9wCLhBDE3QnQcF48PfiJIL/s88/dte-darkblue.png",//Ảnh đại diện khi bài ko có ảnh text = "Comments", numposts_g = 10,//Số bài cần trình chiếu home_page = "http://kartriderdautocrazy01.blogspot.com/";//URL Blog </script> <script type='text/javascript'> //<![CDATA[ // Mini slideshow with s3Slider by Taufik Nurrohman // Visit: http://hompimpaalaihumgambreng.blogspot.com function s3SliderGallery(json) { document.write('<div id="slider"><ul id="sliderContent">'); for (var i = 0; i < numposts_g; i++) { var entry = json.feed.entry[i], title = entry.title.$t, date = entry.published.$t, link, months, cm, img; if (i == entry.length) break; for (var j = 0, jen = entry.link.length; j < jen; j++) { if (entry.link[j].rel == 'alternate') { link = entry.link[j].href; break; } } for (var k = 0, ken = entry.link.length; k < ken; k++) { if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') { cm = entry.link[k].title.split(' ')[0]; break; } } img = ('media$thumbnail' in entry) ? entry.media$thumbnail.url : pBlank; img = img.replace(/\/s[0-9]+(\-c)?\//, "/s" + ((typeof (thumbWidth) !== undefined && typeof (thumbWidth) !== 'undefined') ? thumbWidth : 320) + "-c/"); months = (idMode) ? ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'] : ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; var date_a = date.split('-')[2].substring(0, 2), date_b = date.split('-')[1], date_c = date.split('-')[0]; document.write('<li class="sliderImage"><a href="' + link + '"' + (slideOpenNewTab ? ' target="_blank"' : '') + '><img src="' + img + '" alt="' + title + '" class="recent-thumb"></a><span><a href="' + link + '"' + (slideOpenNewTab ? ' target="_blank"' : '') + ' class="recent-link">' + title + '</a><br>' + (showPostDate_g ? date_a + ' ' + months[parseInt(date_b, 10)-1] + ' ' + date_c + ' - ' : '') + cm + ' ' + text + '</span></li>'); } document.write('</ul></div>'); } document.write("<scr" + "ipt type='text/javascript' src='" + home_page.replace(/\/$/,"") + "/feeds/posts/summary/" + (slidebyLabels ? '-/' + slideLabelName : '') + "?max-results=" + numposts_g + "&orderby=published&alt=json-in-script&callback=s3SliderGallery'><\/scr" + "ipt>"); //]]> </script>Thay http://kartriderdautocrazy01.blogspot.com/ thành URL blog của bạn
Để thay đổi kích thước SlideShow các bạn thay đổi thông số trong đoạn code sau
#slider, #sliderContent, #slider img { width:420px; /* Chiều rộng slideshow */ height:270px; /* Chiều cao slideshow */ }Vậy là xong
Nguồn: www.dte.web.id