Thủ thuật tạo Slideshow bài viết mới nhất ngoài trang chủ Blogspot Blogger Wordpress

Thủ thuật tạo Slideshow bài viết mới nhất ngoài trang chủ Blogspot

wap game online | 7:23 AM

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://www.luubuttuoixanh.com/

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:

Đă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://share-template-web.blogspot.com */
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw3cR_XcoPPIIaecFWt9Ct0bPEy_RknxhX09UgPQSitVnc9hy43RLV9VCycpII7AiRZsPol44lTsrpA1z6qfYF_l7I8RiAe7_1bC3GqKso0knygILFZkEVzB6gT7Exz2wFlxWBVvRRnfQ/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

Từ khóa: thủ thuật blogspot, tạo slide bài viết, bài viết mới nhất, trang chủ blgospot

trang wap Thủ thuật tạo Slideshow bài viết mới nhất ngoài trang chủ Blogspot hot nhất 2015 phien ban moi nhat cho dien thoai java ,android,iphone,hack game online miễn phí,tải game điện thoại về máy,ứng dụng hay cho mobile,kho app game đỉnh nhất,download Thủ thuật tạo Slideshow bài viết mới nhất ngoài trang chủ Blogspot miễn phí,xem hình ảnh,video phim online trực tuyến,nghe nhạc online.

bạn đã xem và Thủ thuật tạo Slideshow bài viết mới nhất ngoài trang chủ Blogspot về mobile để chơi chưa,nhiều thể loại game online,offline hay nhất với các game hot trên CH PLAY,hack game crack phiên bản mới nhất 2015,download ứng dụng di động hot nhất 2015 hiện nay,hãy truy cập thường xuyên vào wap để nhận ngay các thông tin thủ thuật hướng dẫn,share template mới nhất...

Từ Khóa: Thủ thuật tạo Slideshow bài viết mới nhất ngoài trang chủ Blogspot Về Điện Thoại , Thủ thuật tạo Slideshow bài viết mới nhất ngoài trang chủ Blogspot Mới Nhất 2015 , Wap Thủ thuật tạo Slideshow bài viết mới nhất ngoài trang chủ Blogspot Cho Di Dong

Thông Tin

Tên Bài Viết: Thủ thuật tạo Slideshow bài viết mới nhất ngoài trang chủ Blogspot
Cập Nhật: 4/3/13
Phiên Bản: Mới Nhất
Hỗ Trợ : Android/IOS/Java
Danh Mục: Thủ thuật Blogspot

Bài Viết Cùng Chuyên Mục