Thủ thuật tạo Slideshow bài viết mới nhất ngoài trang chủ Blogspot
Chúng ta thường thấy ngoài trang chủ các template blogspot hay có những
slide bài viết đẹp và được trang trí với một thanh trượt nhằm mục đích
làm đẹp và mượt blog. Hôm nay share123.vn giới thiệu một dạng slide khá
phổ biến mà các bạn thường thấy
 |
| Thủ thuật tạo Slideshow bài viết mới nhất ngoài trang chủ Blogspot |
Bước 1:
- Đăng nhập vào blogger với tài khoản của bạn
- Sau đó nhấp vào Layout> Edit HTML, chọn kiểm tra mở rộng mẫu tiện ích con
- Đặt mã code sau đây trên ]]></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}
Bước 2: Đặt mã code sau đây trên </head>
<script>
//<![CDATA[
/* Script from: http://www.share123.vn */
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUFhbaVYVD1v2I4vJapFpF6PhtDevNiOpQHkND14Wxbuur5Tiw4NBgbNnzflfMH0rUWkLt94fvrjzUbPPi4MYRyUJ7QvPZ5fsYfPVEsXJPRfCRrOkKePTxx0A7kRsQTDgUmpicvVEeiv4/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 100;
numposts1 = 5;
label1 = "misteri";
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="370" height="240" 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>
Trong label1 = "misteri"; thay nhãn misteri bằng nhãn của bạn
mã code img width = "370" height = "240" là các thanh trượt chiều rộng và chiều cao, điều chỉnh mẫu của bạn.
Bước 3: Đặt mã code sau đây trên </body>
<script src='http://dl.dropbox.com/u/12924430/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>
Bước 4: Bước cuối cùng, mà là để gọi thanh trượt để nó xuất hiện trên trang đầu của id='main-wrapper'> <div tìm kiếm của bạn nếu bạn muốn có một thanh trượt xuất hiện trên wrapper chính như trong bản demo , và đặt đoạn code sau vào phía dưới:
<b:if cond='data:blog.pageType == "index"'>
<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>
</b:if>
Bước 5: Bước cuối cùng Save / lưu mẫu, tạo ra thanh trượt hình ảnh dựa trên một danh mục cụ thể được hoàn tất.
Nguồn: Share123.v
Không có nhận xét nào