Thủ thuật blogspot - Dautoblog

Tiện Ích Bài Mới Dạng SlideShow Tự Động Lấy Bài Kiểu 1

Tiện Ích Bài Mới Dạng SlideShow Tự Động Lấy Bài Kiểu 1
Đây là tiện ích tôi sưu tầm được 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 dùng cho toàn blog thì ảnh đại diện của mỗi bài viết nên để kích thước lớn thì khi lên hình ảnh không bị vỡ hạt(ảnh mới nét)

Xem thử nhé



Để tiến hành tạo tiện ích này có 2 cách
Can thiệp vào template(chỉnh sửa HTML)
Không can thiệp vào template
Cách 1(chỉnh sửa HTML)
Đă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 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 */
}
Cách 2 (không can thiệp vào template)
Để thuận tiện cho những người tính tình sớm nắng chiều mưa lúc thích lúc không.Nên có thể gộp code vào 1 tiện ích nếu không thích thì xóa bỏ tiện ích không cần can thiệp vào template.
Vào bố cục chọn thêm một tiện ích và dán đoạn code sau vào rồi lưu lại
<style type="text/css">
#slider,
#sliderContent,
#slider img {
width:620px; /* Chiều rộng slideshow */
height:500px; /* 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;
}</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script src='https://krdautocrazyblog.googlecode.com/files/S3Slider.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(window).bind('load', function() {
$('#slider').css('background-image', 'none').s3Slider({
timeOut:3000
});
});
//]]>
</script>
<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",
text = "Comments",
numposts_g = 10,//Số bài trình chiếu
home_page = "http://kartriderdautocrazy01.blogspot.com/";//URL Blog
</script>
<script src="https://krdautocrazyblog.googlecode.com/files/autoContent4s3Slider.js" type="text/javascript"></script>

Vậy là xong
Nguồn: DTE
Comments blogger

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