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 Bít Tuốt Blog 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUsLmgV7hkjAS7guBU3DZAYgEguqcXM3m8cxnEZaMAo5gVF580y5X9Qim4FxVJ7WeL82hb697lGGkNI51OjKkCw9aGSGH5N-_1VlxIaudmdFHcpe35NrTuSCoZgmodEtlfjHufFzRygW4/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3HsuHO9t04nwyKJzSidbOWsAB12OvGMZToQFvLv4tZNHY8e-7a1i-z3IS6Z-PGq1d5HEhwYSCwjGU3hI7CDjsp49M5nOd-Oy8oEw8ojkJ8Nj8FfoNlijPvcPwDSOanbKLMILMHxvsMHk/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
#carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOqS43sW1eo-b_uwiLIQU_rqot94QonihMZzaFnSHhqxSYDCtHT6iuuxDywUITG-Z_Mh5FqeTG4_i-M9n0ZBJx8cdJZZIuplmrYSGYB43sX1m9lLTTztKz73ZHnQPoaZkRy61aRWARHqY/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLU_qIkadTMPITp-lTnKiCky491ggROlmH_9wcguC0qcFCgcS-uWqOzDCriZeelNVuGvyPjWrvipNAUGPtnoPk9jf5m9SgiZdzPGstia27vluHVauajCNFIyABt24iovAX-dABWPS6tns/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
#carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaKZtCzf0t0aTcLdBCqBRdM2K31sX6vn_sU-y_sW01bQvFw4AhRu4Z49jTH2C16F19UtJTEx3rgXa3wpnBv5ZyFf6QVE07lMrLFu1bJIFxZt263IAcleySKylJrq1WnyN5asHR38ZskmA/s1600/next.png) center}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5eCkbvveLHbrWKsOtEkDBxklhJYFTmY2qZTynpy2Rdij07F4Ee-bw9ESr3fPxZtjKteS5uipG6I8qA2ME2c1kKKTIb8DbNaY_2_1wx2AyNb7Li89HeHIx3ogftjnseF1-b7z9fdsP_ic/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://dl.dropboxusercontent.com/u/95745796/Slider/jquery.min.js' type='text/javascript'/>
<script src='https://dl.dropboxusercontent.com/u/95745796/Slider/carousellite.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw2TcZJCRBSPflWtGt75uIXDAcoMc9EnjTgE25MBWoAKG1F7MJyqtr26rmEb2uYEWbtCPOKtImQhpCc0Yds8Ga-oiyBLKbk6r2XiiRXGybWljt0LhYQkhEMuK8SP-QrNuZx3TECafgv2g/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 !