DEMO
Làm Thế Nào Để Thêm Tiện Ích Này Vào Blogger?
Để tạo được tiện ích Automatic Recent Posts-Random posts SlideShow cho Blogger Có 3 bước cần làm là
Thêm CSS
Thêm Javascript
Thêm HTML
Để đơn giản ta gộp 3 công đoạn trên thành 1 lần thêm 1 tiện ích HTML/Javascrip
<style type="text/css"> #slide-container { height: 360px;/* Chiều cao */ position: relative; width: 480px;/* Chiều rộng */ } #slider { height: 360px;/* chiều cao */ left: 25px; overflow-x: hidden; overflow-y: hidden; position: relative; width: 480px;/* Chiều rộng */ font-family: calibri; } .slide-desc { background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ-oaofIe_AkMKzHPP16E1UDKq7-ipUl2fakMwzrGU9iUJYgVqllRWs7zYH3DlRECmpS2RIKL02fiuEPSIx6RYAPapnAiJo8f5JXHF_ssFP-BixLJpg4OlMyDfIE-5zjtD3dtTg59nq2dL/s1600/darkbg.png) repeat scroll 0 0; color: #FFFFFF; padding: 10px; position: absolute; right: 0px; text-align: left; top: 0; width: 200px; z-index: 99999; } .slide-desc h2 { display: block; } .crosscol .widget-content { position: relative; } #slider ul, #slider li, #slider2 ul, #slider2 li { margin: 0; padding: 0; list-style: none; } #slider2 { margin-top: 1em; } #slider li, #slider2 li { /* define width and height of list item (slide) entire slider area will adjust according to the parameters provided here */ width: 480px; height: 360px; overflow: hidden; } #prevBtn, #nextBtn, #slider1next, #slider1prev { display: block; width: 30px; height: 77px; position: absolute; left: -30px; text-indent: -9999px; top: 71px; z-index: 1000; } #nextBtn, #slider1next { left: 520px !important; } #prevBtn, #nextBtn, #slider1next, #slider1prev { display: block; height: 77px; left: 0; position: absolute; top: 132px; width: 30px; z-index: 1000; } #prevBtn a, #nextBtn a, #slider1next a, #slider1prev a { display: block; position: relative; width: 30px; height: 77px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMvNSYWXeQzk67Pn2H2uDWOG-JaFw0AUuYFVdpyssA9meHYk-c8u4BobEU0fR9zsl2vkB_zVQdvSlsjzo5FXr-0ISQiiMQwQQfVx3WHFt0oBEhiAwOm_Z28Y_VV0zlkGund1HT3G8OmaEv/s1600/prev.png) no-repeat 0 0; } #nextBtn a, #slider1next a { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXleQ9TjX7xCaCLRK78SRHZU6q_HE4ZaDLZguz9V34t8G0Vj7DHmMcOswuzoamSqA4Ukh8k_frPPEO0g_LV58uNF37Rx8sX8wlcrdMRmtD2w2FYY9yJXY8WMhAE_z9WDeikT9Ujh_-nGLs/s1600/next.png) no-repeat 0 0; } /* numeric controls */ ol#controls { margin: 1em 0; padding: 0; height: 28px; } ol#controls li { margin: 0 10px 0 0; padding: 0; float: left; list-style: none; height: 28px; line-height: 28px; } ol#controls li a { float: left; height: 28px; line-height: 28px; border: 1px solid #ccc; background: #DAF3F8; color: #555; padding: 0 10px; text-decoration: none; } ol#controls li.current a { background: #5DC9E1; color: #fff; } ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus { outline: none; }</style> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script> <script type='text/javascript'> //<![CDATA[ /* * Easy Slider 1.7 - jQuery plugin * written by Alen Grakalic * http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding * * Copyright (c) 2009 Alen Grakalic (http://cssglobe.com) * Dual licensed under the MIT (MIT-LICENSE.txt) * and GPL (GPL-LICENSE.txt) licenses. * * Built for jQuery library * http://jquery.com * */ /* * markup example for $("#slider").easySlider(); * * <div id="slider"> * <ul> * <li><img src="images/01.jpg" alt="" /></li> * <li><img src="images/02.jpg" alt="" /></li> * <li><img src="images/03.jpg" alt="" /></li> * <li><img src="images/04.jpg" alt="" /></li> * <li><img src="images/05.jpg" alt="" /></li> * </ul> * </div> * */ (function($) { $.fn.easySlider = function(options){ // default configuration properties var defaults = { prevId: 'prevBtn', prevText: 'Previous', nextId: 'nextBtn', nextText: 'Next', controlsShow: true, controlsBefore: '', controlsAfter: '', controlsFade: true, firstId: 'firstBtn', firstText: 'First', firstShow: false, lastId: 'lastBtn', lastText: 'Last', lastShow: false, vertical: false, speed: 800, auto: false, pause: 2000, continuous: false, numeric: false, numericId: 'controls' }; var options = $.extend(defaults, options); this.each(function() { var obj = $(this); var s = $("li", obj).length; var w = $("li", obj).width(); var h = $("li", obj).height(); var clickable = true; obj.width(w); obj.height(h); obj.css("overflow","hidden"); var ts = s-1; var t = 0; $("ul", obj).css('width',s*w); if(options.continuous){ $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px")); $("ul", obj).append($("ul li:nth-child(2)", obj).clone()); $("ul", obj).css('width',(s+1)*w); }; if(!options.vertical) $("li", obj).css('float','left'); if(options.controlsShow){ var html = options.controlsBefore; if(options.numeric){ html += '<ol id="'+ options.numericId +'"></ol>'; } else { if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>'; html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>'; html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>'; if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>'; }; html += options.controlsAfter; $(obj).after(html); }; if(options.numeric){ for(var i=0;i<s;i++){ $(document.createElement("li")) .attr('id',options.numericId + (i+1)) .html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>') .appendTo($("#"+ options.numericId)) .click(function(){ animate($("a",$(this)).attr('rel'),true); }); }; } else { $("a","#"+options.nextId).click(function(){ animate("next",true); }); $("a","#"+options.prevId).click(function(){ animate("prev",true); }); $("a","#"+options.firstId).click(function(){ animate("first",true); }); $("a","#"+options.lastId).click(function(){ animate("last",true); }); }; function setCurrent(i){ i = parseInt(i)+1; $("li", "#" + options.numericId).removeClass("current"); $("li#" + options.numericId + i).addClass("current"); }; function adjust(){ if(t>ts) t=0; if(t<0) t=ts; if(!options.vertical) { $("ul",obj).css("margin-left",(t*w*-1)); } else { $("ul",obj).css("margin-left",(t*h*-1)); } clickable = true; if(options.numeric) setCurrent(t); }; function animate(dir,clicked){ if (clickable){ clickable = false; var ot = t; switch(dir){ case "next": t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1; break; case "prev": t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1; break; case "first": t = 0; break; case "last": t = ts; break; default: t = dir; break; }; var diff = Math.abs(ot-t); var speed = diff*options.speed; if(!options.vertical) { p = (t*w*-1); $("ul",obj).animate( { marginLeft: p }, { queue:false, duration:speed, complete:adjust } ); } else { p = (t*h*-1); $("ul",obj).animate( { marginTop: p }, { queue:false, duration:speed, complete:adjust } ); }; if(!options.continuous && options.controlsFade){ if(t==ts){ $("a","#"+options.nextId).hide(); $("a","#"+options.lastId).hide(); } else { $("a","#"+options.nextId).show(); $("a","#"+options.lastId).show(); }; if(t==0){ $("a","#"+options.prevId).hide(); $("a","#"+options.firstId).hide(); } else { $("a","#"+options.prevId).show(); $("a","#"+options.firstId).show(); }; }; if(clicked) clearTimeout(timeout); if(options.auto && dir=="next" && !clicked){; timeout = setTimeout(function(){ animate("next",false); },diff*options.speed+options.pause); }; }; }; // init var timeout; if(options.auto){; timeout = setTimeout(function(){ animate("next",false); },options.pause); }; if(options.numeric) setCurrent(0); if(!options.continuous && options.controlsFade){ $("a","#"+options.prevId).hide(); $("a","#"+options.firstId).hide(); }; }); }; })(jQuery); //]]> </script> <script type='text/javascript'> //<![CDATA[ $(document).ready(function(){ $("#slider").easySlider({ auto: true, continuous: true }); }); //]]> </script> <div id="slider"> <script type='text/javascript'> //<![CDATA[ var showpostthumbnails_gal = true; var showpostsummary_gal = true; var random_posts = false; var numchars_gal = 150; var numposts_gal = 10; function showgalleryposts(json) { var numPosts = json.feed.openSearch$totalResults.$t; var indexPosts = new Array(); document.write('<ul>'); for (var i = 0; i < numPosts; ++i) { indexPosts[i] = i; } if (random_posts == true){ indexPosts.sort(function() {return 0.5 - Math.random()}); } if (numposts_gal > numPosts) { numposts_gal = numPosts; } for (i = 0; i < numposts_gal; ++i) { var entry_gal = json.feed.entry[indexPosts[i]]; var posttitle_gal = entry_gal.title.$t; for (var k = 0; k < entry_gal.link.length; k++) { if ( entry_gal.link[k].rel == 'alternate') { posturl_gal = entry_gal.link[k].href; break; } } if ("content" in entry_gal) { var postcontent_gal = entry_gal.content.$t } s = postcontent_gal; a = s.indexOf("<img"); b = s.indexOf("src=\"", a); c = s.indexOf("\"", b + 5); d = s.substr(b + 5, c - b - 5); if ((a != -1) && (b != -1) && (c != -1) && (d != "")) { var thumburl_gal = d } else var thumburl_gal = 'http://i1133.photobucket.com/albums/m596/abu-farhan/Images_no_image.gif'; document.write('<li><div id="slide-container"><span class="slide-desc"><h2 style="margin:10px 0px;">'); document.write(posttitle_gal + '</h2>'); var re = /<\S[^>]*>/g; postcontent_gal = postcontent_gal.replace(re, ""); if (showpostsummary_gal == true) { if (postcontent_gal.length < numchars_gal) { document.write(postcontent_gal); document.write('</span>') } else { postcontent_gal = postcontent_gal.substring(0, numchars_gal); var quoteEnd_gal = postcontent_gal.lastIndexOf(" "); postcontent_gal = postcontent_gal.substring(0, quoteEnd_gal); document.write(postcontent_gal + '...'); document.write('</span>') } } document.write('<a href="' + posturl_gal + '"><img src="' + thumburl_gal + '" width="480px" height="360"/></a></div>'); document.write('</li>'); } document.write('</ul>'); } //]]> </script> <script style="text/javascript"> var numposts_gal = 6;//Số bài trình chiếu var numchars_gal = 50;//Số ký tự trích dẫn var random_posts = false; // random posts.Nếu để chế độ Random thì đổi false thành true </script> <script src="http://kartriderdautocrazy01.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script> </div>Thay http://kartriderdautocrazy01.blogspot.com/ thành URL Blog của bạn
Nếu blog đã có thư viện jquery thì bỏ đi đoạn
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>