Note Đóng lại
Giải pháp bán hàng online Số 1 Việt Nam

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

Demo: http://thaoduocchuabenh.blogspot.com/
Thủ thuật tạo Slideshow bài viết mới nhất ngoài trang chủ Blogspot
Thủ thuật tạo Slideshow bài viết mới nhất ngoài trang chủ Blogspot

Bắt đầu tiến hành thủ thuật (Nếu bạn nào chưa rành về blogspot thì nên Sao lưu template trước khi tiến hành thủ thuật)

Bước 1:
  1. Đăng nhập vào blogger với tài khoản của bạn
  2. Sau đó nhấp vào Layout> Edit HTML, chọn kiểm tra mở rộng mẫu tiện ích con
  3. Đặ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/AVvXsEgZg0sgVJE2LXRHGthTOz46e-WXZyjaXYGHghXI8e16CGQWdnHpN8IpB2GQSOZNhTmz2GjQ5mTBv6291cA41oAydl_ZGpaTozY6CGTohVOgwRIsCBWoThW66L3p_IUWpTYzVXllGKU812U/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 == &quot;index&quot;'>
<div id='featured'>
<div class='sliderwrapper' id='slider1'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</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.vn


Bạn đã xem chưa

11 nhận xét | Viết lời bình

Bạn add blog mình nhé! Mình đã add blog của bạn rùi!
Bạn có thể kiểm tra tai: http://tienganhgioi.blogspot.com/
Liên Kết:http://tienganhgioi.blogspot.com/
Title: Chia se bí quyết và kinh nghiệm học tiếng anh
Favicon: https://www.opendrive.com/thumbnails?M18xMjA0MzA4NF9USjFMVA
Thank bạn nhiều nhé!

Nhận xét này đã bị tác giả xóa. - Bạn thông cảm nhé!

mình đặt liên kết với blog bạn rồi đó
Blog mình đây: http://linkh8.blogspot.com/
TIÊU ĐỀ : H8
MONG BẠN SỚM HỒI ÂM

Minh thông báo: Người bình luận có tên Nặc danh/Anonymous không được phép bình luận tại đây.

Nhận xét này đã bị tác giả xóa. - Bạn thông cảm nhé!

Các khoá học môn toán chất lượng cao dành cho học sinh bậc THCS và bậc THPT các bạn có thể tham khảo tại đây: http://vted.vn/khoa-hoc.html

Cảm ơn mã code của bạn nhé , mời các bạn tham khảo các thông tin sau >> Tham khảo các bệnh răng miệng ở người già?

Cảm ơn vì đã giúp tôi hiểu hơn vài thứ trong cuộc sống?https://maylanhhailongvan.vn/



Copyright © 2014 Blog Thông Tin Tổng Hợp