Tiện ích bài mới dạng trượt với nhiều tùy chọn

Tiện ích bài mới dạng trượt sắp giới thiệu dưới đây có nhiều khắc phục giúp đơn giản hóa trong việc tùy chỉnh.(Tùy biến là rất cao)

Bạn có thể tìm thấy nhiều vật dụng để hiển thị các bài viết gần đây cho blog của bạn, nhưng các tiện ích đó có thể chiếm nhiều không gian của blog hoặc là khi thay đổi lựa chọn ví dụ tăng số lượng bài được hiển thị cùng thời điểm ta lại phải chỉnh sửa CSS.Đối với một số bạn việc chỉnh sửa này không hề đơn giản.
Tiện ích bài mới dạng trượt với nhiều tùy chọn


Với tiện ích bài mới dạng trượt với nhiều tùy chọn bạn có thể tùy chỉnh các thông số
1- Tổng số bài viết gần đây được hiển thị trong 1 vòng trượt.
2- Tắt mở Thumbnail(ảnh nhỏ)
3- Thay đổi chiều trượt.
4- Tắt mở nhận xét.
5- Ngày đăng.
6- Hiện trích dẫn.
7- Số ký tự trong phần trích dẫn.
8- Tốc độ di chuyển.
9- Số bài viết hiển thị tại một thời điểm.
10- Tạm dừng cuộn khi rê chuột.
DEMO
áp dụng vào blogspot
Để tạo tiện ích: Tiện ích bài mới dạng trượt với nhiều tùy chọn ta cần thêm 1 tiện ích HTML/javascrip cho blog
Code
<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.vTicker=function(e){var f={speed:700,pause:2000,showItems:3,animation:'',mousePause:true,isPaused:false};var e=$.extend(f,e);moveUp=function(a,b,c){if(c)return;var d=a.children('ul');first=d.children('li:first').clone(true);d.animate({top:'-='+b+'px'},e.speed,function(){$(this).children('li:first').remove();$(this).css('top','0px')});if(e.animation=='fade'){d.children('li:first').fadeOut(e.speed);d.children('li:last').hide().fadeIn(e.speed)}first.appendTo(d)};return this.each(function(){var a=$(this);var b=0;var c=e.isPaused;a.css({overflow:'hidden',position:'relative'}).children('ul').css({position:'absolute',margin:0,padding:0}).children('li').css({margin:0,padding:0});a.children('ul').children('li').each(function(){if($(this).height()>b){b=$(this).height()}});a.children('ul').children('li').each(function(){$(this).height(b)});a.height(b*e.showItems);var d=setInterval(function(){moveUp(a,b,c)},e.pause);if(e.mousePause){a.bind("mouseenter",function(){c=true}).bind("mouseleave",function(){c=false})}})}})(jQuery);
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
function showrecentpostswiththumbs(json) {document.write('<ul class="recent_posts_with_thumbs">'); for (var i = 0; i < numposts; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break;for (var k = 0; k < entry.link.length;k++){
if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}var thumburl;try {thumburl=entry.media$thumbnail.url;}catch (error)
{
s=entry.content.$t;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!="")){
thumburl=d;} else thumburl='http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png';
}
var postdate = entry.published.$t;var cdyear = postdate.substring(0,4);var cdmonth = postdate.substring(5,7);var cdday = postdate.substring(8,10);var monthnames = new Array();monthnames[1] = "Jan";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Apr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Aug";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dec";document.write('<li class="clearfix">');
if(showpostthumbnails==true) 
document.write('<img class="recent_thumb" src="'+thumburl+'"/>');
document.write('<b><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b><br>');
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
var re = /<\S[^>]*>/g; 
postcontent = postcontent.replace(re, "");
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write('<i>');
document.write(postcontent);
document.write('</i>');}
else {
document.write('<i>');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...');
document.write('</i>');}
}
var towrite='';var flag=0;
document.write('<br><strong>');
if(showpostdate==true) {towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true) 
{
if (flag==1) {towrite=towrite+' | ';}
if(commenttext=='1 Comments') commenttext='1 Comment';
if(commenttext=='0 Comments') commenttext='No Comments';
commenttext = '<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';
towrite=towrite+commenttext;
flag=1;
;
}
if(displaymore==true) 
{
if (flag==1) towrite=towrite+' | ';
towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More -></a>';
flag=1;
;
}
document.write(towrite);
document.write('</strong></li>');
if(displayseparator==true) 
if (i!=(numposts-1))
document.write('<hr size=0.5>');
}document.write('</ul>');
}
//]]>
</script>
<script style='text/javascript'>
var numposts = 10;//Số bài hiển thị trong 1 vòng trượt
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;//Nhận xét
var showpostdate = false; //Ngày đăng
var showpostsummary = true;//Trích dẫn
var numchars = 100; //Số ký tự trích dẫn
$(document).ready(function () {$('#sai').vTicker({
speed: 500,
pause: 3000,
showItems: 3,//Số bài hiển thị trên tiện ích cùng 1 thời điểm
animation: 'fade',
mousePause: false,//Hiệu ứng khi rê chuột vô tiện ích
height: 0,
direction: 'up'
});});
</script>
<div id="sai">
<script src='http://kartriderdautocrazy01.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
</div>
Thay http://kartriderdautocrazy01.blogspot.com thành URL Blog của bạn
Cứ nôm na hiểu rằng True là mở và False là tắt ^.^
Nếu blog của bạn đã có thư viện jquery thì bỏ đi file js
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Publis: 

Post a Comment

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