Thiết kế blogspot đôi khi bạn sẽ gặp phải những trường hợp phải xử lý các modun dạng slider bài viết mới nhất hoặc slider bài viết theo nhãn, vậy làm thế nào để tạo ra một slider những bài viết mới nhất chạy ngang hoặc có nút bấm play hoặc stop, nhân tiện webseo làm trang vnexpress bằng blogspot, nay mình chia sẻ lại cách làm carousel recent post blogspot như demo:
Để thiết kế blogspot có slider bài viết mới nhất như trên bạn làm như sau:
Nếu mẫu template blogspot của bạn chưa có Jquery thì gọi thêm 1 đoạn Jquery như sau nhé:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js'/>
Bước 1: Đăng nhập > Chủ đề > Tìm thẻ </head> dán đoạn code sau vào trước thẻ </head>
<script>
//<![CDATA[
(function($){$.fn.jCarouselLite=function(o){o=$.extend({btnPrev:null,btnNext:null,btnGo:null,mouseWheel:false,auto:null,speed:200,easing:null,vertical:false,circular:true,visible:4,start:0,scroll:1,beforeStart:null,afterEnd:null},o||{});return this.each(function(){var running=false,animCss=o.vertical?"top":"left",sizeCss=o.vertical?"height":"width";var div=$(this),ul=$("ul:first",div),tLi=$(".car",ul),tl=tLi.size(),v=o.visible;if(o.circular){ul.prepend(tLi.slice(tl-v-1+1).clone()).append(tLi.slice(0,v).clone());o.start+=v;}
var li=$(".car",ul),itemLength=li.size(),curr=o.start;div.css("visibility","visible");li.css({overflow:"hidden",float:o.vertical?"none":"left"});ul.css({padding:"0",position:"relative","list-style-type":"none","z-index":"1"});div.css({overflow:"hidden","z-index":"2"});var liSize=o.vertical?height(li):width(li);var ulSize=liSize*itemLength;var divSize=liSize*v;li.css({width:li.width()});ul.css(sizeCss,ulSize+"px").css(animCss,-(curr*liSize));div.css(sizeCss,divSize+"px");if(o.btnPrev)
$(o.btnPrev).click(function(){return go(curr-o.scroll);});if(o.btnNext)
$(o.btnNext).click(function(){return go(curr+o.scroll);});if(o.btnGo)
$.each(o.btnGo,function(i,val){$(val).click(function(){return go(o.circular?o.visible+i:i);});});if(o.mouseWheel&&div.mousewheel)
div.mousewheel(function(e,d){return d>0?go(curr-o.scroll):go(curr+o.scroll);});if(o.auto)
setInterval(function(){go(curr+o.scroll);},o.auto+o.speed);function vis(){return li.slice(curr).slice(0,v);};function go(to){if(!running){if(o.beforeStart)
o.beforeStart.call(this,vis());if(o.circular){if(to<=o.start-v-1){ul.css(animCss,-((itemLength-(v*2))*liSize)+"px");curr=to==o.start-v-1?itemLength-(v*2)-1:itemLength-(v*2)-o.scroll;}else if(to>=itemLength-v+1){ul.css(animCss,-((v)*liSize)+"px");curr=to==itemLength-v+1?v+1:v+o.scroll;}else curr=to;}else{if(to<0||to>itemLength-v)return;else curr=to;}
running=true;ul.animate(animCss=="left"?{left:-(curr*liSize)}:{top:-(curr*liSize)},o.speed,o.easing,function(){if(o.afterEnd)
o.afterEnd.call(this,vis());running=false;});if(!o.circular){$(o.btnPrev+","+ o.btnNext).removeClass("disabled");$((curr-o.scroll<0&&o.btnPrev)||(curr+o.scroll>itemLength-v&&o.btnNext)||[]).addClass("disabled");}}
return false;};});};function css(el,prop){return parseInt($.css(el[0],prop))||0;};function width(el){return el[0].offsetWidth+ css(el,'marginLeft')+ css(el,'marginRight');};function height(el){return el[0].offsetHeight+ css(el,'marginTop')+ css(el,'marginBottom');};})(jQuery);
//]]>
</script>
Bước 2: Chèn đoạn code sau vào vị trí bạn muốn hiển thị slider bài viết mới nhất trong thẻ <body> … </body>
<b:section class='slider-recenterpost-webseo' id='Carousel Home' maxwidgets='1' preferred='yes' showaddelement='no'>
<b:widget id='HTML55' locked='false' title='Thông tin doanh nghiệp' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'>Tin ẩm thực</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<hgroup>
<h4><a class='first' href='/search/label/Món xào'>Thông tin doanh nghiệp</a> </h4>
</hgroup>
</b:if>
<div class='widget-content qua-tang-home'>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost_slider_post_webseo = 140;
summaryTitle_slider_post_webseo = 25;
numposts_slider_post_webseo = 8;
label_recen_post_slide = "Tin nổi bật";
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function slider_post_webseo(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul>');
for (var i = 0; i < numposts_slider_post_webseo; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; 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!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';
document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>
<div id='carousel'>
<div id='previous_button'><i aria-hidden='true' class='fa fa-angle-left'/></div>
<div class='container'>
<script>
document.write("<script src=\"/feeds/posts/default/-/"+label_recen_post_slide+"?max-results="+numposts_slider_post_webseo+"&orderby=published&alt=json-in-script&callback=slider_post_webseo\"><\/script>");
</script>
<div class='clear'/>
</div>
<div id='next_button'><i aria-hidden='true' class='fa fa-angle-right'/></div>
</div>
<script type='text/javascript'>
(function($) { $(document).ready(function(){
$("#carousel .container").jCarouselLite({
auto:4000,
scroll: 1,
speed: 800,
visible: 4,
start: 0,
circular: false,
btnPrev: "#previous_button",
btnNext: "#next_button"
});
})})(jQuery)
</script>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
Bạn chú ý tham số:
visible: 4, tham số này sẽ quy định hiển thị mấy bài trên 1 hàng hiển thị. từ đó bạn sẽ css cho hợp lý.
summaryPost_slider_post_webseo = 140; độ dài tóm tắt bài viết
summaryTitle_slider_post_webseo = 25; Độ dài tiêu đề bài viết
numposts_slider_post_webseo = 8; Số lượng bài viết trong slider bài viết blogspot
label_recen_post_slide = “Tin nổi bật”; Nhãn bạn muốn hiển thị (label)
Bước 3: Để có Slider bài viết mới nhất trong mẫu thiết kế blogspot của bạn, bạn có thể thêm 1 đoạn css như sau:
#news-home-webseo .slider-recenterpost-webseo{clear:both;margin-top:30px;overflow:hidden;background:#fff;padding:30px 0 0 0;border-top:1px solid #fff;}
#news-home-webseo .slider-recenterpost-webseo .news-big-3 h5 i{display:none;}
#news-home-webseo .slider-recenterpost-webseo .news-big-3{width:25%;float:left;overflow:hidden;}
#news-home-webseo .slider-recenterpost-webseo hgroup{margin:0;height:auto;border-bottom:1px solid #e4e3e3;}
#news-home-webseo .slider-recenterpost-webseo .news-big-3 .img-news-big-3{width:115px;height:69px;float:left;margin-right:10px;}
#news-home-webseo .slider-recenterpost-webseo .widget-content{padding:10px;margin-bottom:10px;background:#f4f4f4;border-top:1px solid #fbfafa;}
#news-home-webseo .slider-recenterpost-webseo .news-big-3 h5{padding:0 10px;margin:0;font-size:13px;line-height:1.3;font-weight:700;text-align:left;}
#HTML45 h5{padding:8px;font-size:13px;clear:both;margin:0;font-weight:700;}
#carousel{margin-bottom:0px;position:relative;display:block;height:95px;max-width:1170px;margin:auto;}
#carousel i{top:0;position:absolute;height:32px;color:#4a0e0e;font-size:30px;width:32px;}
#carousel i:hover{color:rgb(212,31,85);}
#carousel #previous_button{position:absolute;right:13px;height:32px;width:32px;top:-44px;z-index:999;cursor:pointer;}
#carousel #previous_button:hover{}
#carousel .container{float:left;padding:0;margin:0;}
#carousel #next_button{position:absolute;right:-17px;height:32px;width:32px;top:-44px;z-index:999;cursor:pointer;}
#carousel #next_button:hover{}
#carousel ul{width:100000px;position:relative;margin-top:0}
#carousel ul li{display:inline;float:left;margin-right:20px;width:230px;}
#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
#carousel ul li a.slider_title{color:#222;display:block;font-size:14px;line-height:1.4;margin-top:0;text-align:left;font-style:normal;font-weight:700;}
#carousel ul li .thumb{width:45%;margin-right:10px;float:left;}
#carousel ul li a.slider_title:hover{color:#cd1713}
#carousel ul li img{width:100%;height:90px;}
Chúc bạn thành công
Mọi khó khăn có thể liên hệ dịch vụ thiết kế blogspot, thiết kế web đẹp chuyên nghiệp: hotline:0988 227 905 hoặc hotro@webseo.com.vn
