Để bắt đầu tạo slider bài viết mới trượt ngang cho blogger thì trướt tiên chúng ta kiểm tra xem blog đã có thư viện javascript hay chưa, nếu chưa có thì chèn link dưới đây vào trong cặp thẻ <header>Chèn vào chổ này </header>, như vậy là blog đã có thư viện javascript và chúng ta thực hiện tiếp các phần tiếp theo.
Bây giờ là đến phần nội dung hiển thị ra ngoài blog, chúng ta tìm chổ thích hợp để dán đoạn code này vào, thường thì ngay phía dưới menu.
Vậy là chúng ta đã tạo thành công bài viết mới trượt ngang cho blogger rồi đó.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![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:3,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>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKuuen58qHnszB9JpchPJcb17JyL8si8SXxMHpOyuOtIGjW41VZvNPzrFDVdeTmF8o-xSGh_sOYKxXxaykASIzoKojA-Y-B8gwt4aF-xka_LuehguC_wLuLg9vwmHcCfBx8dxRJjhN8t0/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 150;
summaryTitle = 30;
numposts1 = 12;
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 showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul>');
for (var i = 0; i < numposts1; 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 = ["January","February","March","April","May","June","July","August","September","October","November","December"];
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 width="100" height="90" class="alignnone" src="'+img[i]+'"/></a></div><h5>'+daystr+'</h5><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>';
document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>
Bây giờ là đến phần nội dung hiển thị ra ngoài blog, chúng ta tìm chổ thích hợp để dán đoạn code này vào, thường thì ngay phía dưới menu.
<b:if cond='data:blog.pageType != "item"'>
<!-- /.columns-inner -->
<div class='columns-inner'>
<!-- #carousel -->
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write("<script src=\"/feeds/posts/default/?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
<div class='clear'/>
</div>
<div id='next_button'/>
</div><!-- /#carousel -->
<script type='text/javascript'>
(function($) {
$(document).ready(function(){
$("#carousel .container").jCarouselLite({
auto:4000,
scroll: 1,
speed: 800,
visible: 4,
start: 0,
circular: true,
btnPrev: "#previous_button",
btnNext: "#next_button"
});
})})(jQuery)
</script>
</div>
<!-- /.columns-inner -->
</b:if>
/* Carousel trượt ngang
-------------------------------------------*/
#carousel{width:980px;height:122px;border: 1px solid #D2D1CE;box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);position:relative;display:block;background:#44BBB6;margin-bottom:8px}
#carousel h5{color:#555;margin:2px;font-style:italic}
#carousel .container{position:absolute;left:24px;width:960px;height:125px;overflow:hidden}
#carousel .thumb{float:left;margin-right:5px;}
#carousel #previous_button{position:absolute;width:24px;height:125px;background:url(http://1.bp.blogspot.com/-ILOqN5E6IRU/U33APjkOicI/AAAAAAAAAjs/VHHRyZ4W1Vg/s1600/previous.png) center;z-index:100;cursor:pointer}
#carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(http://4.bp.blogspot.com/-gunY_jzgBKk/U33APpYq-5I/AAAAAAAAAjw/4BjJmufVoL8/s1600/next.png) center;z-index:100;cursor:pointer}
#carousel #next_button:hover,#carousel .thumb:hover,#carousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#ebebeb;display:inline;float:left;text-align:left;font:bold 12px Arial;border:0px solid #ccc;width:212px;height:90px;margin:0 2px 15px 6px;padding:6px}
#carousel ul li a.slider_title{color:#333;text-decoration:none;display:block;margin-top:5px;padding-top:0}
#carousel ul li a.slider_title:hover{color:#1b5d97}
#carousel a img{display:block;background:#fff;margin-top:0}
Vậy là chúng ta đã tạo thành công bài viết mới trượt ngang cho blogger rồi đó.
