Tiện ích bài mới dạng SlideShow tự động lấy bài

Tiện ích bài mới dạng SlideShow tự động lấy bài

Đây là tiện ích sưu tầm trên mạng mang về đây chia sẻ cùng mọi người.Tiện ích này hoàn toàn tự động lấy hình ảnh kèm tiêu đề bài viết và tổng số nhận xét của những bài mới trên blog.Ta cũng có thể trình chiếu theo bài mới của từng nhãn,ta chỉ việc sửa đổi đôi chút code

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://lh5.googleusercontent.com/-0WhJFu38VaU/UWwBydC2ZAI/AAAAAAAAXps/fdoWfvSqRoM/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) + 1
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>

Lưu mẫu lại
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://lh4.googleusercontent.com/-wo2eWGsrvg4/UWlxklHeRUI/AAAAAAAAWrk/3GfFvq6ZgJE/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: DTE

Nhận xét

Không có nhận xét nào :