slider

Tìm Kiếm từ khóa với Google

» » » » 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(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 !





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

Bạn đang xem Slider bài mới nhất trượt ngang với thumbnail ảnh cho blogspot tại Blog Bít Tuốt Đừng quên nhấn LIKE Chia Sẻ để ủng hộ Bít Tuốt Blog nếu bài viết có ích !
Like Bít Tuốt Blog trên Facebook để ủng hộ mình nhé

«
Next
Newer Post
»
Previous
Older Post

5 comments:

  1. mời ghé blog cá nhân mình tại http://hamanhluan.blogspot.com/ :D

    ReplyDelete
  2. Mình theo dõi và học rất nhiều trong blog của bạn...Hiện tại mình đã làm được 1 cái này :D

    http://thesuncitysaigon.blogspot.com/

    ReplyDelete
  3. http://chamsocda-24h.blogspot.com/

    ReplyDelete
  4. http://manhhaicoto.blogspot.com/ bạn xem giúp mình tý nhé

    ReplyDelete