Về cách tạo tiện ích này cũng đã trình bầy tại đây
Nhưng với bài viết đó tiện ích recent posts slider thường để ở phần main hoặc để ở header với kích thước tương đối lớn,nếu chỉnh sửa với kích thước nhỏ thì cũng là điều khó khăn với các bạn mới tham gia cộng đồng blogger(Bị biến dạng không theo ý muốn).
Để khắc phục vấn đề này tôi xin chia sẻ code bài mới tự tùy chỉnh kích thước Recent Posts slider-Featured post Tự Chỉnh Kích Thước để các bạn có thể để ngay cả ở sidebar(cột bên) mà vẫn giữ được cấu trúc của tiện ích này.
Xem ảnh:
Recent Posts Slider Tự Chỉnh Kích Thước
Trình bầy thì dài dòng vậy nhưng khi áp dụng vào blogspot thì đơn giản thôi,ta chỉ việc tiến hành thêm một tiện ích và dán code sau vào<style type='text/css'>
ul.abt-sidebar-slider *{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
ul.abt-sidebar-slider{
font:normal normal 11px embria
}
ul.abt-sidebar-slider,ul.abt-sidebar-slider li{
margin:0;
padding:0;
list-style:none;
position:relative
}
ul.abt-sidebar-slider{
width:100%;
height:400px
}
ul.abt-sidebar-slider li{
height:24.5%;
position:absolute;
padding:0;
width:49.5%;
float:left;
overflow:hidden;
display:none
}
ul.abt-sidebar-slider li:nth-child(1),ul.abt-sidebar-slider li:nth-child(2),ul.abt-sidebar-slider li:nth-child(3),ul.abt-sidebar-slider li:nth-child(4){
display:block
}
ul.abt-sidebar-slider img{
border:0;
width:100%;
height:100%} ul.abt-sidebar-slider li:nth-child(1){width:100%;
height:49.5%;
margin:0 0 2px;
left:0;top:0
}
ul.abt-sidebar-slider li:nth-child(2){left:0;top:50%}
ul.abt-sidebar-slider li:nth-child(3){left:50.5%;top:50%}
ul.abt-sidebar-slider li:nth-child(4){width:100%;left:0;top:75%}
ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider li{
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out
}
ul.abt-sidebar-slider .overlayx{
width:100%;
height:100%;
position:absolute;
z-index:2;
left:0;
top:0;
background-image:url(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);
background-position:50% 50%;
background-repeat:repeat-x
}
ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider img{
border:4px solid black;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px
}
ul.abt-sidebar-slider li:nth-child(1) .overlayx{
background-position:50% 25%
}
ul.abt-sidebar-slider .overlayx:hover{
-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";
filter:alpha(opacity=10);-khtml-opacity:0.1;
-moz-opacity:0.1;opacity:0.1
}
ul.abt-sidebar-slider h4{
position:absolute;
bottom:30px;
z-index:2;
color:white;
margin:0;
width:100%;
padding:0 10px;
line-height:1.5em;
font:embria;
font-weight:normal
}
ul.abt-sidebar-slider li:nth-child(1) h4,ul.abt-sidebar-slider li:nth-child(4) h4{
font-size:150%
}
ul.abt-sidebar-slider .label_text{
position:absolute;
bottom:10px;
left:10px;
z-index:2;
color:white;
font-size:90%}
ul.abt-sidebar-slider li:nth-child(2) .autname,ul.abt-sidebar-slider li:nth-child(3) .autname{
display:none
}
.buttons{
margin:5px 0 0
}
.buttons a{
display:inline-block;
text-indent:-9999px;
width:15px;
height:25px;
position:relative
}
.buttons a::before{
content:"";
width:0;
height:0;
border-width:8px 7px;
border-style:solid;
border-color:transparent #535353 transparent transparent;
position:absolute;
top:50%;
margin-top:-8px;margin-left:-10px;
left:50%
}
.buttons a.nextx::before{
border-color:transparent transparent transparent #535353;
margin-left:-3px
}
</style>
<div id="featuredpostside">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script type='text/javascript'>
//<![CDATA[
function FeaturedPostSide(e){(function(t){var n={blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:5e3,autoplay:false,loadingClass:"loadingxx",pBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};n=t.extend({},n,e);var r=t(n.idcontaint);var i=n.MaxPost*200;r.html('<div class="sliderx"><ul class="abt-sidebar-slider"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');var s=function(e){var i,s,o,u,a,f,l,c,p,d="",v=e.feed.entry;for(var m=0;m<v.length;m++){for(var y=0;y<v[m].link.length;y++){if(v[m].link[y].rel=="alternate"){i=v[m].link[y].href;break}}if("media$thumbnail"in v[m]){u=v[m].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+n.ImageSize+"-c")}else{u=n.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+n.ImageSize+"$1")}s=v[m].title.$t;p=v[m].published.$t.substring(0,10);o=v[m].author[0].name.$t;a=p.substring(0,4);f=p.substring(5,7);l=p.substring(8,10);c=n.MonthNames[parseInt(f,10)-1];d+='<li><a target="_blank" href="'+i+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+s+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+l+'</span> <span class="dm">'+c+'</span> <span class="dy">'+a+'</span></span> <span class="autname">'+o+"</span></div></li>"}t("ul",r).append(d).addClass(n.loadingClass)};var o=function(){t(n.idcontaint+" .nextx").click()};var u=function(){t.get((n.blogURL===""?window.location.protocol+"//"+window.location.host:n.blogURL)+"/feeds/posts/summary"+(n.tagName===false?"":"/-/"+n.tagName)+"?max-results="+n.MaxPost+"&orderby=published&alt=json-in-script",s,"jsonp");setTimeout(function(){t(n.idcontaint+" .prevx").click(function(){t(n.idcontaint+" .sliderx li:first").before(t(n.idcontaint+" .sliderx li:last"));return false});t(n.idcontaint+" .nextx").click(function(){t(n.idcontaint+" .sliderx li:last").after(t(n.idcontaint+" .sliderx li:first"));return false});if(n.autoplay){var e=n.interval;var i=setInterval(o,e);t(n.idcontaint+" .sliderx li:first").before(t(n.idcontaint+" .sliderx li:last"));t(n.idcontaint+" .sliderx").hover(function(){clearInterval(i)},function(){i=setInterval(o,e)})}t("ul",r).removeClass(n.loadingClass)},i)};t(document).ready(u)})(jQuery)}
//]]>
</script>
<script type='text/javascript'>FeaturedPostSide({ blogURL:"http://kartriderdautocrazy01.blogspot.com", MaxPost:8, idcontaint:"#featuredpostside", ImageSize:300, interval:6000, autoplay:true, tagName:false });</script>
Các bạn thay kartriderdautocrazy01.blogspot.com thành URL blog của bạn- MaxPost:8 số bài trình chiếu là 8(nên để tới 10 bài là tối đa)
- interval:6000 là tốc độ slider
- autoplay:true là chế độ tự động
Chúc thành công!