Slide ảnh đẹp cho Blogspot

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/AVvXsEi7Ei-ZJDib9ge5cG6dN0DK_MpuJKmI_-8leauX4wlRgy83kdTLH3hD1v5FS_88ZtYY7n9XZYjn5M-ANYB5ZRV6-nE6xKJNqILsrVyqJ5JiP1DpVZ7Cj8DEfyJNedE7by-JXOtBIl32GsA/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ẻ.