Slider bài mới nhất trượt ngang với thumbnail ảnh cho blogspot


Slider bài mới nhất trượt ngang với thumbnail ảnh cho blogspot.Cách tạo Slider bài mới nhất trượt ngang với thumbnail ảnh cho từng label trên blogspot.Code Slider bài viết mới nhất trượt ngang với thumbnail ảnh cho blogspot.

Hôm nay VietSunny sẽ hướng dẫn các bạn một thủ thuật blog là tạo một tiện ích bài viết mới nhất (recent post) nhưng hiển thị dưới dạng một slider trượt ngang với các ảnh thumbnail và tiêu đề bài viết theo yêu cầu của một bạn có email toantrungtsis@gmail.com .

Các bạn có thể xem demao tại đây

Cách tạo Slider bài mới nhất trượt ngang với thumbnail ảnh cho blogspot

Bước 1: Đăng nhập blogspot ==>  Chọn Mẫu (Template) ==> Chọn chỉnh sủa HTML (Edit HTML) 

Bạn có thể down về rồi dùng Notepad++ sửa cho dễ nhé. Chú ý trước khi sửa thì bạn sao lưu ra 1 bản để khi có sai hay hỏng hóc gì còn có bản gốc nhé

Bước 2: Dán đoạn code sau lên trên thẻ ]]></b:skin>




#carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(http://2.bp.blogspot.com/-i9rfuXWNIjo/T5LAemTP3XI/AAAAAAAAArY/r7FcfxzgZpk/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(http://3.bp.blogspot.com/-APGScJbAlLM/T5LDZ9LDgkI/AAAAAAAAAr4/vGy7EquPGME/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
#carousel #previous_button:hover{background:url(http://3.bp.blogspot.com/-4wNqeM6eRvY/T5LGCrdA9iI/AAAAAAAAAsE/4rjwULz47WU/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(http://1.bp.blogspot.com/-pSHFy8ff1R0/T5LDZHkHIzI/AAAAAAAAArw/PCfZ762nK3E/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
#carousel #next_button:hover{background:url(http://2.bp.blogspot.com/-vSaPjyDhEMI/T5LGB-g1_lI/AAAAAAAAAsA/wyUPBLWY15E/s1600/next.png) center}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#fff url(http://3.bp.blogspot.com/-NsKF7TyEX7I/T418sIGTo7I/AAAAAAAAAnc/OdQmhV73piY/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
#carousel ul li a.slider_title:hover{color:#cd1713}

#carousel a img{display:block;background:#fff;margin-top:0}
Bước 3: Dán đoạn code sau lên trên thẻ đóng </head>

<script src='https://seovnpro.googlecode.com/files/jquery.min.js' type='text/javascript'/>
<script src='https://seovnpro.googlecode.com/files/carousellite.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
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 = 140;
summaryTitle = 25;

numposts1 = 15;
label1 = "Nổi bật";

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 showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul>');
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;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
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 = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';

document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>

</script>

Tùy chỉnh:
numposts1 = 15; là số bài sẽ được gọi từ feed..
label1 = "Nổi bật"; là tên của nhãn muốn gọi.
summaryPost = 140; là số ký tự mô tả
summaryTitle = 25; là số ký tự phần tiêu đề ngay bên dưới hình ảnh.
width="145" height="100" là chiều rộng và chiều cao của ảnh thumbnail.


Bước 4:  Thêm đoạn code sau vào vị trí bạn muốn hiển thị

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) {     $(document).ready(function(){
$(&quot;#carousel .container&quot;).jCarouselLite({
    auto:4000,
    scroll: 1,
    speed: 800,   
    visible: 5,
    start: 0,
    circular: true,
    btnPrev: &quot;#previous_button&quot;,
    btnNext: &quot;#next_button&quot;
    });
    })})(jQuery)
</script>

</b:if> 

Tùy chỉnh: 

  • scroll: 1,  số bài viết cuộn mỗi lần.
  • speed: 800, Thời gian chuyển ảnh (tính bằng phần nghìn giây).
  • visible: 5, Số bài viết (ảnh thumbnail và tiêu đề) hiển thị trên trang chính.
  • <b:if cond='data:blog.pageType != &quot;item&quot;'>, Không hiển thị trên trang bài viết
Tùy chỉnh hiển thị trên các trang
  • Nếu bạn muốn hiển thị trên trang bài viết thì chỉ việc thay: <b:if cond='data:blog.pageType != &quot;item&quot;'> thành <b:if cond='data:blog.pageType = &quot;item&quot;'>
  • Nếu bạn muốn nó hiển thi trên tất cả các trang thì chỉ việc xóa <b:if cond='data:blog.pageType != &quot;item&quot;'> và thẻ đóng của nó ở dưới </b:if>  là ok.

Muốn hiển thị riêng trên các trang mà bạn mong muốn thì đọc thêm bài viết này nhé : Cách thêm widget vào vị trí bất kỳ trong blogspot

Chúc các bạn thành công !
Share on Google Plus

About Kecodon10 Nguyễn Đắc Tâm

Có nhiều người nói, 1 số thì bảo mình biến thái , 1 số lại nói mình lập di ,còn 1 số người lại bảo mình hơi kỳ quái vì lý do mình thích ngắm sưu tầm và nếu có cơ hội là chộp luôn . Nhưng mình thích vì điều đó sở thích mình là như zậy ở đâu có áo dài là lảng vảng đâu đó có mặt mình 1 linh hồn bí ẩn .. khà khà Mình rất vui khi mình được ngắm và chiêm ngưỡng Áo Dài Việt Nam 1 sở thích Bất diệt nơi Tâm hồn ... ^^