Tạo Featured Content Slider Tự Động Cập Nhật

Cách tiến hành:
1.Đăng nhập vào Blog
2.Tùy chọn (Mũi tên xuống)
3.Chọn mẫu
4.Chọn Chỉnh sửa HTML
5.Chọn tiếp tục
6.Chọn mở rộng tiện ích
7.Nhấn F3 Hoặc bấm tổ hợp phím Ctrl + F tìm </b:skin> và dán đoạn code sau vào trước thẻ đóng ]]></b:skin>

#featured{margin-bottom:8px}

.sliderwrapper{position: relative;overflow: hidden;height: 240px}

.sliderwrapper .contentdiv{visibility: hidden;position: absolute;left: 0;top: 0;padding: 0px;height: 100%;}

.pagination{text-align: left;padding:8px 0px}

.pagination a{font-size:11px;color:#fff;padding: 3px 6px;background:#1b75d6}

.pagination a:hover, .pagination a.selected{color:#dedde5;background-color:#535352}

.featuredPost{width:360px;padding:10px 10px 0;background:#191919;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;color:#dedde5;position:absolute;bottom:0}

.featuredPost a{color:#fff}

.featuredPost a:hover{color:#dedde5}

.featuredPost h2{margin:0;font-size:12px;line-height:1}

.featuredPost span{font-size:10px}

.featuredPost p{font-size:11px}

8.Nhấn F3 Hoặc bấm tổ hợp phím Ctrl + F tìm </head> và dán đoạn code sau vào trước thẻ đóng </head>

<script>

//<![CDATA[

/* Script from:http://simplexdesign.blogspot.com/ */

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioC0hwNkMSwrbRIqRumFXpdnWWnqrXzWuhR-_C0bVJT_7TuKwFMjNsatu0ekYf-bMuHzz7CsdwOI37xSt3NiwBd1pbGoVVnyzV_wePXjFwodlGe3Q9uoO4P78iWa47IiI2-PfiMAyF3vo/s1600/no+image.jpg";

showRandomImg = true;

aBold = true;

summaryPost = 100;

numposts1 = 5;

label1 = "Phong.Thủy.Nhà.Ở";

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 showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();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;

var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["January","February","March","April","May","Juny","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 = '<div class="contentdiv"><div class="sliderPostPhoto"><a href="'+posturl+'"><img width="630" height="600" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="featuredPost"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><span>'+daystr+'</span><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>'; 

document.write(trtd); 

j++;

}}

//]]>

</script>

8.Nhấn F3 Hoặc bấm tổ hợp phím Ctrl + F tìm </body> và dán đoạn code sau vào trước thẻ đóng </body>

<script src='http://menulan.googlecode.com/files/contentslider.js'/>

<script>

//<![CDATA[

featuredcontentslider.init({

id: "slider1", //id of main slider DIV

contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]

toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]

nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.

enablefade: [true, 0.5], //[true/false, fadedegree]

autorotate: [true, 6000], //[true/false, pausetime]

onChange: function(previndex, curindex){ //event handler fired whenever script changes slide

//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)

//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)

}})//]]>

</script>

9.Lưu lại mẫu.

10.Chọn bố cục -> Chọn Thêm Tiện ích -> Thêm một HTML/Javarscip và dán đoạn code bên dưới vào:

<div id='featured'>

<div class='sliderwrapper' id='slider1'>

<script>document.write("<script src=\"http://www.vietcons.info/feeds/posts/default/-/Phong.Thủy.Nhà.Ở?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");</script>

</div>

<div class='pagination' id='paginate-slider1'>

</div>

</div>

11.Lưu mẫu lại và xem kết quả.

Chúc bạn thanh công!

12.Chú ý: Chỉnh sửa bạn xem lại bài củ tại đây nhé