Automatic Recent Posts-Random posts SlideShow cho Blogger

Cũng giống như một số Slideshow tự động trình chiếu các bài viết gần đây đã chia sẻ ở các bài trước.Tiện ích này chỉ khác về hình thức nghĩa là bình mới rượu cũ,nó thay đổi cách bố trí vị trí của tiêu đề và phần tóm tắt trích dẫn. Chỉ thêm một chức năng mới là có thể trình chiếu cho các bài viết ngẫu nhiên(Random posts)
Automatic Recent Posts-Random posts SlideShow cho Blogger_Kiểu 6

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 đã 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>
Publis: 

Post a Comment

🙂😬😀😂🤣😍💖
Windows + . hoặc Windows + ; để chèn emoji