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.
- Bước 1: Bạn thêm đoạn mã dưới đây vào trước thẻ
- Bước 2: Thêm đoạn mã này vào trước thẻ
- Bước 3: Bạn đặt đoạn mã này vào nơi mà bạn muốn hiển thị Slide:
- Bước 4: Tiếp tục, bạn thêm đoạn mã dưới đây vào trước thẻ
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:
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ẻ.
- 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] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/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ẻ.
0 Comments