Thêm Slide bài viết mới chạy ngang cho Blogspot

Làm thế nào để thêm jquery chạy ảnh bài viết mới nhất cho blogger?
Nhiều Blogger rất muốn thêm những bài viết ở 1 nhãn cố định hoặc những bài viết mới đăng gần đây nhất làm nổi nên trên. Có nhiều thủ thuật blogspot được chia sẻ.
Hôm nay itviet360 chia sẻ thủ thuật thêm Slide chạy bài viết mới hoặc bài viết ở 1 nhãn (Label) cố định với hiệu ứng trượt ngang tự động rất đẹp

Demo: Ảnh bìa Facebook tình yêu đẹp

- Hướng dẫn thủ thuật
1. Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
2. (Ctrl + F )Tìm đến ]]></b:skin> và dán Code dưới đây ngay trên nó
Code:

#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}

3. Tìm tới </head> và dán code dưới đây ngay trên nó
Code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/265232511102/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 = "news";

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 theo ý bạn:
numposts1 = 15; là số bài sẽ được gọi từ feed..
label1 = "news"; 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.
showRandomImg = true; là lấy ảnh thumbnail ngẫu nhiên trong bài viết. Nếu muốn lấy ảnh đầu tiên thì hãy sửa true thành false.
4. Tìm đến <div id='main-wrapper'> và dán code dưới đây ngay dưới nó
Code:

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

Trong đó tùy chỉnh:

Nếu muốn lấy bài viết mới  thì xóa phần /-/"+label1+". đi nhé
auto:4000,
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.
start: 0,
circular: true,
Lưu ý: Trong Demo trực tiếp mình chỉ cho tiện ích này hiển thị ở trang bài viết. Nếu bạn cũng muốn làm như thế thì tham khảo bài viết Hiển thị Widget Chuyên mục: , , ,

11 comments:

  1. Chào em! Tiện ích này hay đấy! Anh hỏi chút muốn nó hiển thị ở bên dưới web có được ko?

    ReplyDelete
    Replies
    1. Được anh. Anh dán đoạn code ở bước 4 vào vị trí anh muốn hiển thị

      Delete
  2. Em ơi! Anh add vào được rồi nhưng nó đang lỗi. Anh chỉ cho nhỏ lại về kích thước chiều cao và chiều rộng của tiện ích thì nó lỗi. Em xem giúp anh xem lỗi chỗ nào nhé! www.dich-thuat.net em ạ.

    ReplyDelete
    Replies
    1. Anh tìm đến trong tem đoạn #carousel a img
      Thêm thuộc tính width: 145px; height: 100px;

      Delete
  3. Okie anh sửa được rồi em. Làm sao để cho nhỏ ảnh lại 1 chút được em? Để cho nó hiển thị tiêu đề ra. Vì hiện tại anh đang thấy nó bị che 1 chút. Và làm thế nào thì nó trượt từ phải qua trái em nhỉ? Thanks em nhiều!!!

    ReplyDelete
    Replies
    1. Nhỏ và thấp xuống thì anh chỉnh lại thông số ở trên width: 145px; height: 100px; theo kích thước anh muốn nhé.
      Của anh nó chưa trượt ah? Chắc đụng java. Anh xem có phải có 2 dòng: http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

      Delete
  4. Em ơi! Có 1 dòng http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js thôi em ạ! Anh cũng chỉnh lại kích thước rồi. Ko ra em ạ! Ko hiểu sao ý? trên site: www.dich-thuat.net em nhé! Xem giúp anh xem lỗi gì với! Anh định để nó ở dưới gần chân trang nhưng nó chồng lên cả chữ ở đó. Em xem có được ko giúp anh!

    ReplyDelete
  5. Admin ơi, cái này thì hay thật, nhưng khi mình thêm vào thì chạy bên chrom với firefox thì không sao, nhưng khi chạy bên IE thì nó vỡ giao diện, các thành phần chạy lung tung. Liệu có cách nào khắc phục không ! Thanks !

    ReplyDelete
    Replies
    1. Có thể Jquery này chưa hỗ trợ tốt trên IE bạn ah

      Delete
  6. Replies
    1. Bạn gửi mã lỗi dùm mình nhé. có thể trong XML nó báo lỗi & thì thay bằng & amp ; (Viết liền vào) nhé bạn

      Delete