Hôm nay mình sẽ hướng dẫn bạn thiết kế một slide ảnh đơn giản, nhằm làm cho blog bạn sinh động hơn.

Slide ảnh cho Blogspot

- Bước 1: Bạn thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

#sidebar-wrapper{width:650px;height:360px;background:#f5f5f5;clear:both;margin:0 auto;overflow:hidden;}
.slide .widget{margin:0;padding:0 0 8px}
#featured{margin:0;padding:10px 10px 0;}
.sliderwrapper{height:300px;position:relative;overflow:hidden;-webkit-box-shadow:0 12px 12px rgba(0,0,0,0.7);-moz-box-shadow:0 12px 12px rgba(0,0,0,0.7);box-shadow:0 12px 12px rgba(0,0,0,0.7)}
.sliderwrapper .contentdiv{visibility:hidden;position:absolute;left:0;top:0;height:100%;padding:0}
.pagination{text-align:right;padding:15px 0 10px}
.pagination a{font-size:11px;color:#989898;background:#5e5e5e;text-shadow:0 2px 2px rgba(0,0,0,0.3);padding:3px 6px}
.pagination a:hover,.pagination a.selected{color:#000;background-color:#eaeaea}
.featuredPost{width:620px;background:#191919;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;color:#dedde5;position:absolute;bottom:0;padding:10px 10px 0}
.featuredPost a{color:#fff}
.featuredPost a:hover{color:#dedde5}
.featuredPost h2{font-size:16px;line-height:1;margin:0}
.featuredPost span{font-size:11px}
.featuredPost p{font-size:12px}

- Bước 2: Thêm đoạn mã này vào trước thẻ </head>

<script>
//<![CDATA[
/* Script from:http://simplexdesign.blogspot.com/ */
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaDPe9joinWWDLeIQTc4E0CjV31pwUUp_xmDNF0-Y2stY4XLlJ1eWHw8GFVPgXPYcPFC5kDTYa5tXDvG5J6HtBvzyNtdXi4gmDTPGgcX6V1c0ysiLGTDXiCoFzCuguYXDcgPXpyHbv1s0/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 200;

numposts1 = 5;
label1 = "Love - Life";

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="650" height="350"  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> 

- Bước 3: Bạn đặt đoạn mã này vào nơi mà bạn muốn hiển thị Slide:

<div id='sidebar-wrapper'>
<div id='featured'>
<div class='sliderwrapper' id='slider1'>
<script>
document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</div>
<div class='pagination' id='paginate-slider1'>
</div>
</div>
 </div>

- Bước 4: Tiếp tục, bạn thêm đoạn mã dưới đây vào trước thẻ </body>

<script src='http://kute999.googlecode.com/files/imageslider.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>

Bạn hãy chỉnh sửa CSS lại cho phù hợp với Blog của bạn nha. Chú ý các đoạn mã dưới đây:

showRandomImg = true; // Hiển thị ảnh ngẫu nhiên (true /false)
aBold = true; // In đậm (true /false)
summaryPost = 200; // Số ký tự tóm tắt của bài viết
numposts1 = 5; // Số bài viết hiển thị trên Slide
label1 = "Love - Life"; // Nhãn của bài viết muốn hiển thị trên Slide

Thế là bạn đã tạo được 1 Slide ảnh thật tuyệt cho blog bạn rồi nhé. Chúc các bạn ngày mới vui vẻ.