Thư viện

Trải nghiệm

Thứ Ba, tháng 5 28, 2013

[Ves2] Slider bài mới trượt ngang thumbnail cho blogger

Slider lấy ngẫu nhiên một ảnh thumbnail từ các bài viết mới nhất (recent post) và hiển thị dưới dạng một slider trượt ngang. Hiệu ứng chuyển ảnh mượt mà dựa trên thư viện JQuery

Chia sẻ:
Tiện ích Slider ves 2 này  được phát triển trên vesion 1 của maskolis, Với đôi chút cải biến về giao diện như: nó lấy ngẫu nhiên một ảnh thumbnail từ các bài viết mới nhất (recent post)  và  hiển thị dưới dạng một slider trượt ngang. Hiệu ứng chuyển ảnh mượt mà dựa trên thư viện JQuery
Các bạn có thể xem ảnh minh họa hoặc demo bên dưới:
Slider bài mới trượt ngang thumbnail cho blogger ves2
VIEW DEMO

¤  Slider bài mới nhất trượt ngang với thumbnail ves 2 cho blogger!

1- Đăng nhập vào blog
2- Chọn Mẫu (Template)
3- Chọn chỉnh sủa HTML (Edit HTML)
4- Dán code sau trước thẻ ]]></b:skin>.
#carousel{width:980px;height:125px;border-bottom:1px solid #ccc;position:relative;display:block;background:#5599e6;margin-bottom:8px}
#carousel h5{color:#555;margin:2px}
#carousel .container{position:absolute;left:24px;width:960px;height:125px;overflow:hidden}
#carousel .thumb{float:left;margin-right:5px;}
#carousel #previous_button{position:absolute;width:24px;height:125px;background:url(http://2.bp.blogspot.com/-fDQhEnMl378/UbXad8ri9gI/AAAAAAAAAHs/JJEaAxtcymo/s1600/previous_namkna-blogspot-com.png) center;z-index:100;cursor:pointer;}
#carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(http://4.bp.blogspot.com/-8DuZv3z7L6I/UbXad7oPf-I/AAAAAAAAAHo/YoEJ1DkX74A/s1600/next_namkna-blogspot-com.png) center;z-index:100;cursor:pointer;}
#carousel #next_button:hover,#carousel .thumb:hover,#carousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#ebebeb;display:inline;float:left;text-align:left;font:bold 11px Arial;border:0px solid #ccc;width:212px;height:90px;margin:0 2px 20px 6px;padding:6px}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:0;padding-top:0}
#carousel ul li a.slider_title:hover{color:#1b5d97}
#carousel a img{display:block;background:#fff;margin-top:0}
» Tùy chỉnh:
  • width:980px; là độ rộng của slider
  • height:125px; là chiều cao của slider
5- Dán code bên dưới trước thẻ </head>:
<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 = 12;

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 = ["January","February","March","April","May","June","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 = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="100" height="90" class="alignnone" src="'+img[i]+'"/></a></div><h5>'+daystr+'</h5><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>';

document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>
» Tùy chỉnh:
  • width="100" height="90" Lần lượt là chiều rộng và chiều cao của ảnh thumbnail.
  • summaryPost = 140;  Là số ký tự mô tả khi dê chuột vào ảnh hoặc tiêu đề.
  • summaryTitle = 25; Là số ký tự tiêu đề tối đa hiển thị trên slider. bạn nên để vừa phải không nên quá nhiều ký tự sẽ làm sấu slider.
  • numposts1 = 12; là số bài viết hoặc ảnh thumbnail sẽ hiển thị trên slider. bạn không nên cho quá nhiều sẽ ảnh hưởng tới tốc độ load.
  • 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.
  • Nếu blog của bạn đx có thư viện Jquery rồi thì xóa phần màu cam đi nha.
6- Tìm thẻ:
<div id='main-wrapper'>
- Dán vào trước nó đoạn code bên dưới:
<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/-/Namkna-label?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:
  • Thay Namkna-label thành tên nhãn bạn muốn hiển thị trên slider.
  • Nếu muốn hiển thị cho toàn blog xóa phần màu xanh đi.
  • visible: 5, Số bài viết (ảnh thumbnail và tiêu đề) hiển thị trên trang 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).
  • Mẫu SIMPLE đặt code sau dòng: <div class='columns-inner'>
  • Tiện ích này hiển thị chỉ ở trang chủ, trang nhãn và trang chuyên biêt, trang lưu trữ nên nếu bạn muốn cho nó hiển thị ở tất cả các trang thì hãy xóa phần màu xám đi nha. 
Chúc thành công!

148 nhận xét:

  1. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  2. mình làm được rồi nhưng nhấn previous và next nó ko di chuyển?mong bạn giúp đỡ

    Trả lờiXóa
    Trả lời
    1. Bạn phải để: numposts1 = 12; là số bài viết hoặc ảnh thumbnail sẽ hiển thị trên slider. Số bài viết này phải lớn hơn số bài hiển thị. visible: 5,

      Xóa
  3. ban cho mình hỏi. mình mới up một template (demo: johnydarkgamer2.blogspot.com). Nhưng khi hoàn tất thì không thấy cái Slider đâu hết. Mong bạn giúp dùm.

    Trả lờiXóa
    Trả lời
    1. Bạn tìm đoạn code như bên dưới:

      showPostDate_g = false;
      showComm_g = false;
      slideOpenNewTab = true;
      idMode = true;
      slidebyLabels = false;
      var slideLabelName = "label",
      pBlank = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg",
      text = "comment",
      numposts_g = 12,
      numchars_g = 0,
      showText = "Show at",
      postText = "Posts",
      tinyprevNav = "<",
      tinynextNav = ">",
      home_page = "http://johnydarkgamer2.blogspot.com/";


      Thay: http://johnydarkgamer2.blogspot.com/ thành URL blog của bạn.
      nếu muốn hiển thị theo label thì thay label thành tên nhãn của bạn.

      Xóa
    2. òh.. cảm ơn bạn. Mình làm được rồi.

      Xóa
  4. 2 ảnh: previous next

    Demo: XEM

    Mẫu SIMPLE đặt sau dòng: <div class='columns-inner'>

    Trả lờiXóa
  5. nó không có hiện lên bạn ơi. xem giúp mình với http://gavinhlong.blogspot.com/

    Trả lờiXóa
  6. Bạn sửa đoạn:
    /feeds/posts/default/-/Namkna-label

    thành:

    /feeds/posts/default

    Trả lờiXóa
  7. Sao vẫn không được nhỉ
    document.write("<script src=\"/feeds/posts/default
    ?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");

    Trả lờiXóa
    Trả lời
    1. Bạn xem blog ddaxc cài feed chưa. nếu chưa cài thì xem bài này: XEM NGAY

      Xóa
  8. anh ơi. em muốn làm bài viết liên quan hoặc bài random dạng này đc ko anh.

    Trả lờiXóa
  9. Bác Nam Ta ơi, em làm theo hướng dẫn nó hiển thị ra rồi nhưng mà nó bị lệch quá bác ah. Bác vào xem hộ em với http://chungcugiaretuliemhanoi.blogspot.com/

    Trả lờiXóa
    Trả lời
    1. Với blog bạn dán trước dòng:

      <div id='navigasi'>

      Xóa
    2. Khà khà em làm được rồi, thanks bác rất nhiều!

      Xóa
  10. Bác Nam Ta ơi trang cua em ko hiện lên được, bác vào xem giúp em cái được ko ạ ? http://canho.chungcugiagoc.com/ Mặc dù đã làm đúng theo hướng dẫn của bác rồi đấy ạ ? Hic hic :(

    Trả lờiXóa
  11. Bác Nam Tạ ơi, trang của em là http://canho.chungcugiagoc.com/ đã vào Feedburner Atom để làm rồi nhưng báo lỗi thế này "Your feed filesize is larger than 576K. You need to reduce its size in order for FeedBurner to process it. Tips for controlling feed file size with Blogger can be found in Tech Tips on FeedBurner Forums, our support site" e cũng đã đọc bài "http://namkna.blogspot.com/2013/03/fix-size-below-feedburner-512k-limit.html#.UeyX0KxSDFx" nhưng cũng ko áp dụng được. Em còn thử sang trang này http://banchungcugiare-hanoi.blogspot.com/, có đăng ký Feedburner rồi nhưng vẫn ko hiện lên Slider bài trượt ngang được. Em mới biết Blogspot nên gà mờ lắm, mong được bác chỉ giáo giúp thật nhiều và chi tiết được ko ạ. Em chân thành cảm ơn bác nhiều ạ !

    Trả lờiXóa
    Trả lời
    1. Khắc pục XEM

      Nhớ để blog là công khai nha. chế độ một người xem không hiển thị đâu.

      Xóa
  12. Sao mình không tìm thấy dòng < div id = " main-wrapper " >

    Trả lờiXóa
    Trả lời
    1. Để lại URL blog của bạn mình sẽ chỉ đoạn códe cho.

      Xóa
    2. Nhận xét này đã bị tác giả xóa.

      Xóa
  13. KHÔNG THẤY BÁC TRẢ LỜI CHO EM BÁC ƠI ? "Bác Nam Tạ ơi, em đưa theo đúng thông số của bác rồi mà vẫn ko hiển thị được, nhưng bây giờ lại bị 1 lỗi là slide trang chủ của em ko chạy nữa mà bị xếp chồng lên nhau. Bác giúp em vụ này cái ạ, cả 2 phương án để em làm cho đẹp bác nhé "http://banchungcugiare-hanoi.blogspot.com/". Em cảm ơn bác nhiều ạ !"

    Trả lờiXóa
    Trả lời
    1. Quá nhiều file jquery dẫn tới xung đột hãy xóa bớt đi nha bạn.

      Xóa
    2. Xóa thế nào và xóa ở đâu bác Nam Tạ ơi, em ko biết mà :( Giúp em đi bác !

      Xóa
    3. Chỉ để lại file Jquery ở bài này vì trong blog bạn các file còn lại đề là ves cũ,

      Xóa
  14. anh Nam ơi em để numposts1 = 12; và visible: 5 nhưng nó vẫn không chạy ngang anh à, anh ghé qua giúp em với nhé!http://tienganhgioi123.blogspot.com/

    Trả lờiXóa
    Trả lời
    1. Do xung đột Jquery em ak,

      Xóa
    2. Vậy có cách nào khắc phục nó không vậy anh. mong anh giúp đỡ:http://tienganhgioi123.blogspot.com/

      Xóa
    3. Xóa bớt file đó đi chỉ để lại file có ves cao nhất thôi em ak.

      Xóa
  15. bạn ơi kiểm tra giùm mình với?minh lam rồi ma next bai no ko đi tới?so bai viết la 12 và bài hiển thị la 4 nhưng next vẫn không dc http://zumood.blogspot.com/
    kiểm tra giúp mình...thank you! bạn

    Trả lờiXóa
    Trả lời
    1. Gửi template vào tavannam01@gmail.com mình thêm cho.

      Nhớ ghi rõ yêu cầu nha.

      Xóa
  16. Anh ơi cho em hỏi là em tìm mãi trong html của em mà ko thấy đoạn code div id='main-wrapper'>, thế là sao hả anh, em mới làm blog nên chưa biết.
    Em cảm ơn anh

    Trả lờiXóa
    Trả lời
    1. Em đưa địa chỉ blog của em đây anh chỉ đoạn cần thiết cho nha,

      Xóa
  17. Anh Nam ơi, em xóa rồi mà vẫn không được anh ạ. Anh giúp em với ạ "http://banchungcugiare-hanoi.blogspot.com", em cảm ơn bác nhiều lắm !

    Trả lờiXóa
    Trả lời
    1. Gửi template vào tavannam01@gmail.com anh thêm cho.

      Nhớ ghi rõ yêu cầu nha.

      Xóa
  18. Anh Nam ơi, em gửi templates của em vào mail cho anh rồi ạ. Anh giúp em với ạ "http://banchungcugiare-hanoi.blogspot.com", với cả nếu tiện bác giúp em làm thêm cái "Bài viết liên quan" nhé, hjj. Em cảm ơn bác nhiều nhiều lắm ạ !

    Trả lờiXóa
    Trả lời
    1. Bài viết liên qan thì phải đẻ lại link thủ thuật muốn áp dụng nha. Hiện tại bên mình giới thiệu nhiều thủ thuật bài viết liên quan lắm,

      Xóa
  19. Anh Nam Tạ ơi em chưa nhận được mail của anh sửa giúp em ạ với cả anh cứ cho em cái "bài viết liên quan" nào phù hợp mà đẹp là được anh ạ. Em cảm ơn anh nhiều lắm ạ :)

    Trả lờiXóa
  20. Anh Nam Tạ ơi, em vẫn chưa nhận được mail của anh ạ. Mail của em là duonghanoiland@gmail.com đã gửi từ hôm nọ anh nhận được chưa ạ ?

    Trả lờiXóa
    Trả lời
    1. Mấy hôm nay bạn quá chưa có time check mail. ĐỂ lát nữa anh check nha.

      Xóa
  21. cái dòng "div id='main-wrapper'" nằm chỗ nào vậy a, e search không tìm được

    Trả lờiXóa
    Trả lời
    1. Để lại URL blog của em ở đây anh chỉ cho nha,

      Xóa
  22. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
    Trả lời
    1. Nam ơi! Mình đã dán đoạn code cuối cùng trước đoạn ấy rùi
      Nhưng của mình lại ra thế này tintuyensinh365
      Làm thế nào bay giờ, mình thích cái này quá
      Mong Nam chi cach khắc phục nha

      Xóa
    2. Đây nha bạn. <div id='crosscol-wrapper'>

      Xóa
  23. Trước đó mình cũng làm giống Nam chỉ nhưng vẫn không được Nam ah
    Nó vẫn không đẩy được phần content-wrapper, hay main-wrapper xuống dưới.
    Chỉnh ra sao dây ha Nam

    Trả lờiXóa
    Trả lời
    1. Bạn chỉnh visible: 5, lại thành 4 để độ rộng nó giảm xuống và cả:
      width:960px; với width:980px; nữa nha. nếu vẫn không được thì Pm cho mình.

      Xóa
  24. Minh Post mail Temp của mình cho bạn nha
    Mong bạn giúp mình
    Thank bạn nhiều

    Trả lờiXóa
    Trả lời
    1. Oke lát mình sẽ check mail của bạn, mấy hôm nay chua có thời gian :)

      Xóa
    2. Cảm ơn bạn đã dành thời gian giúp mình!

      Xóa
  25. Tìm giúp em đoạn code: <div id='main-wrapper'>
    Blog của em Khanh's blog
    Cảm ơn!

    Trả lờiXóa
    Trả lời
    1. Blog của em chú ý đoạn sau:

      <div class="main-outer">

      hoặc:

      <div class="tabs-outer">

      Xóa
    2. Anh cho em hỏi: Mẫu SIMPLE là cái gì ạ?

      Xóa
    3. Là các mẫu đơn giản mà blogger thiết kế sẵn cho mọi người đó. EM có thể vào phần MẪU và kéo xuống phía dưới sẽ thấy các mẫu đó.

      Xóa
  26. Anh ơi giúp em với. E cài được rồi nhưng hôm sau e có thêm các tiện ích khách thì nó lỗi k chạy được nữa và cũng không nhấn next được. E nghị do xung đột JQuery giờ e phải làm sao ạ. Giúp em với.
    http://lehoanghappy.blogspot.com/

    Trả lờiXóa
    Trả lời
    1. Mình thay namkna trả lời nha. Bạn gỡ thủ thuật gần nhất mà em áp dụng vào nha,

      Xóa
  27. Nam kha ơi làm sao có thể làm được khung chát với khách viếng thăm blog , có hiện đèn onlien của chủ blog không nhỉ ?

    Trả lờiXóa
    Trả lời
    1. Cháu thay nakna trả lời nha cô: CÔ có thể vào trang http://cbox.ws/getone.php để đăng ký một tài khoản chat bõ và lấy code chèn vào blog nha cô.

      Xóa
  28. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  29. blog minh cung khong co lenh :div id='main-wrapper'
    nho anh giup do
    thinhpleiku.blogspot.com

    Trả lờiXóa
  30. Cảm Ơn Anh, em làm gần được rồi. chỉ có điều hơi bị lệch. Anh giup em với! thinhpleiku.blogspot.com

    Trả lờiXóa
    Trả lời
    1. Có thể dùng đoạn này nha bạn: div class='main-outer'

      Xóa
    2. mình đã chọn main-outer rồi nhưng khung slide vẫn bị lẹch sang bên trái màn hình. Nam kha có thể xem giúp mình chăng! thinhpleiku.blogspot.com

      Xóa
    3. Bạn có thể điều chỉnh

      #carousel{width:980px;height:125px;border-bottom:1px solid #ccc;position:relative;display:block;background:#5599e6;margin-bottom:8px}


      thành

      #carousel{width:980px;height:125px;border-bottom:1px solid #ccc;position:relative;display:block;background:#5599e6;margin-bottom:8px;margin:0 auto}

      Xóa
    4. Cam on Anh nhieu, em lam duoc roi!

      Xóa
  31. Cái này chỉ hiện thị tổng cộng là 4 hình trên slide thôi, làm sao làm thành 6?
    Thầy qua xem giúp với:http://canla-colien.blogspot.com/

    Trả lờiXóa
    Trả lời
    1. Thêm 5 bài thì bạn Chỉnh sửa đoạn sau nha bạn:

      visible: 5,

      Xóa
    2. Cảm ơn thầy, em làm dc rồi :)

      Xóa
  32. Thầy chỉ giúp em cái này nữa nhé:
    http://canla-colien.blogspot.com/
    Template ko phải em làm mà là copy, em muốn chỉnh cho cái slide chính tự động trượt có dc ko? (thay vì phải bấm nút qua lại)

    Trả lờiXóa
    Trả lời
    1. Nó bằng css nêu nếu muốn nó chạy được thì phải chỉnh lại hết toàn bộ code em ak

      Xóa
  33. Nam ơi vào xem giúp cô . cái ảnh cuối nó bị lòi đuôi không vào trong khuôn . xấu quá phải chỉnh thế nào bảo cô nhé cảm ơn " Thày"?

    Trả lờiXóa
  34. Làm sao cho slider giãn cách khung nhãn trên đầu blog một chút nhỉ?

    Trả lờiXóa
  35. Thay đổi màu viền khung làm thế nào cháu Nhỉ ? cô muốn đổi màu cho hợp với blog cháu chỉ giúp cô thu gọn ảnh bài cuối cho nằm gon trong khung nhé và đổi màu khung nữa . co rất cảm ơn cháu?

    Trả lờiXóa
  36. vvaans đề là cháo bảo cô thu gọn anh của một bài cả phần anh lẫn phần chữ thôi cháu ạ

    Trả lờiXóa
    Trả lời
    1. 1- Để ảnh khỏi tràn ra khỏi slider thì cô phải chỉnh số ảnh hiển thị bớt đi vì số ảnh hiển thị hiện tại cộng lại tổng chiều rộng lớn hơn độ rộng phần thân blog.
      - Sau khi bớt ảnh đi thì sẽ sảy ra hiện tượng ảnh hiện thị không hết slider do vậy co phải tăng thêm hoặc giảm bớt đi chiều rộng của mỗi ảnh cho phù hợp thông qua 2 đoạn code:
      + ddaonj để chỉnh lại độ rộng của phần slider ảnh và tiêu đề của ảnh đó

      #carousel ul li{background:#ebebeb;display:inline;float:left;text-align:left;font:bold 11px Arial;border:0px solid #ccc;width:212px;height:90px;margin:0 2px 20px 6px;padding:6px}

      + đoạn để chỉnh lại chiều rộng của ảnh sau khi chỉnh lại đoạn code trên (cháu tô màu vàng trong bài hướng dẫn đóa):

      <img width="100" height="90"

      2- Để cho slider giãn cách khung nhãn trên đầu blog một chút cô sửa

      #carousel{width:980px;height:125px;border-bottom:1px solid #ccc;position:relative;display:block;background:#5599e6;margin-bottom:8px}

      thành:

      #carousel{width:980px;height:125px;border-bottom:1px solid #ccc;position:relative;display:block;background:#5599e6;margin-bottom:8px;margin-top:10px}

      Cô chỉnh margin-top:10px theo ý muốn của cô nha,

      3- Thay đổi viền khung thì cô thay đổi đoạn border-bottom:1px solid #ccc trong code css cháu hướng dẫn ở bước 2 nha,

      4- gọn anh của một bài cả phần anh lẫn phần chữ cô làm như bước 1 là có thể thay đổi ảnh của từng bài cô nha,

      Xóa
  37. Cô cảm ơn Nam Kha cô đã làm được rồi nhưng đổi màu viền khung lại không được cháu nói rõ hơn phần này giúp cô được không?

    Trả lờiXóa
    Trả lời
    1. Đoạn này nha cô:

      border-bottom:1px solid #ccc

      thì 1px là độ rộng của đường viền
      #ccc là màu đường viền cô ak. Cô chỉ cần thay bằng mã màu tương ứng thôi,

      Xóa
    2. Cô cảm ơn cháu nhiều lắm . làm được sleder này cô rất thích cháu ạ . chúc cháu vạn sự như ý

      Xóa
    3. Không có gì đâu cô ak, Giúp được cô là cháu rất vui rồi. Cháu hy vọng trong thời gian tới cô tiếp tục ủng hộ blog của cháu.Cháu cũng chức cô vạn sự như ý thành công trong cuộc sống :)

      Xóa
  38. Nam ơi có đặt liên kết web nữa k thế

    Trả lờiXóa
  39. Anh Namkna cho hoi, nếu muốn hiển thị chỉ cho 1 nhãn thôi và chỉ hiện widget này ở trang bài đăng thôi thì sao?

    Trả lờiXóa
    Trả lời
    1. 1. Để hiện chỉ ở trang bài viết thì em thay đoạn:

      <b:if cond='data:blog.pageType != "item"'>

      Thành:

      <b:if cond='data:blog.pageType == "item"'>

      2- Để hiện cho trang nhãn cụ thể em thay đoạn:

      <b:if cond='data:blog.pageType != "item"'>

      thành:

      <b:if cond='data:blog.pageType == "archive"'>

      Xóa
  40. Ok, Thanks! Chúc Blog của anh ngày càng phát triển.

    Trả lờiXóa
    Trả lời
    1. Không có gì cảm ơn em đã ủng hộ blog của anh trong xuốt thời gian qua :)

      Xóa
  41. Xung đột rồi thư viện rồi. Anh xem dùm em trang Vetbookshop. Chèn Slider của anh vào thì phần main của em bị đứng không chạy nữa.

    Trả lờiXóa
    Trả lời
    1. Code này không liên quan đến phần mmain đâu em ak. Em kiểm tra lại đi nha,

      Xóa
  42. namkna có thể giúp mình xem bị lỗi xung đột gì không mà mình áp dụng slide nó không chuyển động nhỉ???
    Link blog: http://thuvienanhbia.blogspot.com/

    Trả lờiXóa
    Trả lời
    1. Bạn tăng visible: 4, lên nha:))

      Xóa
    2. Mình tăng lên 10 vẫn không được bạn ơi :)

      Xóa
    3. Bạn gửi template vào tin nhắn trong face hoặc mail tavannam01@gmail.com mình chỉnh cho nha

      Xóa
  43. Em muốn dán cái này dưới cùng của TEM thì làm sao được anh

    Trả lờiXóa
    Trả lời
    1. Với ken24h em chỉ cần dán đoạn code bước 6 vào trước đoạn: <div class='cuoitrang section' id='cuoitrang'> và lưu lại là oke..

      Xóa
  44. Bạn Nam Ta cho mình hỏi cái này, cái này chỉ hiển thị ở trang chủ hay là cả bài đăng, blog của mình là http://baoboipc.blogspot.com , chỉ hiển thị ở trang chủ thôi, có cách nào cho hiển thị ở tất cả các trang không? Xin cám ơn.

    Trả lờiXóa
    Trả lời
    1. Bạn xóa 2 đoạn:

      <b:if cond='data:blog.pageType != "item"'>
      và:
      </b:if>

      Mình đã tô màu xám đó.

      Xóa
    2. xin cám ơn bạn rất nhiều

      Xóa
  45. của mình nó không tự đông chạy nhỉ
    demo : xutablog.com

    Trả lờiXóa
    Trả lời
    1. Xung đột Jquery hãy xóa bớt các phiên bản cũ đi nha bạn,

      Xóa
  46. cho bài đầu với bài cuối nối lại với nhau sau mỗi lần chạy thi làm như nào hả anh?

    Trả lờiXóa
    Trả lời
    1. Nguyên tắc của tiện ích này là gọi bài theo feed thực chất nó gọi một lần đủ hết kể cả bài bị ẩn, sau đó dùng JQuery để ẩn đi và cho hiển thị một số bài cần thiết, Do vậy sau khi chạy hết lượt bằng đó bài nó sẽ delay và chạy lại từ đầu.

      Xóa
  47. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  48. Nam ơi, mình cài vào xong tất cả đều ngon nhưng nó bị lệch sang bên phải trông xấu quá. Mình tìm cách sửa mãi như hướng dẫn cho bạn gì ở trên mà ko được. Vậy làm thế nào để chỉnh cho nó cân vào giữa trang hả bạn?

    Trả lờiXóa
    Trả lời
    1. Nguyên nhân chính là do thuộc tính padding của phần content trang của bạn. Khắc phục bằng cách.
      Bạn sửa đoạn:

      #carousel{width:980px;height:125px;border-bottom:1px solid #ccc;position:relative;display:block;background:#5599e6;margin-bottom:8px}

      thành"

      #carousel{width:980px;height:125px;border-bottom:1px solid #ccc;position:relative;display:block;background:#5599e6;margin-bottom:8px;margin-left:10px !important}

      Bạn sửa lại đoạn: margin-left:10px !important thành số khác cho thích hợp nha. Có thể dùng số âm. ví dụ: margin-left:-15px !important

      Xóa
  49. Mặc dù đã mò các kiểu và đọc hết các comment phía dưới và thử áp dụng nhưng Của mình vẫn bị lệch sang bên trái như thế này . Mình dùng Temp Twelve million namkna template ves 1 for blogspot 3 cột.
    Mong bạn chỉ dùm

    Trả lờiXóa
  50. À tiện cho mình hỏi luôn: Mình muốn chuyển tất cả các dòng Tag ở cột bên phải thành chữ in đậm và cách nhau 1 khoảng rõ ràng thì soạn code như thế nào vậy Nam, giúp mình nhé.

    Trả lờiXóa
  51. Đây là site của mình http://hagiangtourism.blogspot.com/

    Và mình muốn hỏi 1 chút, sau khi làm theo các hướng dẫn của bạn để thiết kế trang http://hagiangtourism.blogspot.com/ thì bây giờ khi vào phần chỉnh sửa mẫu, template... chrome nó liên tục báo ở trên thanh url biểu tượng mã nguồn từ một nguồn chưa xác thực, bên thứ 3 chưa được kiểm định. Vậy nguyên nhân là do đoạn code nào bạn check giúp mình, cách sửa nó như thế nào để đảm bảo an toàn bảo mật?

    Trả lờiXóa
    Trả lời
    1. 1. ý bạn là đoạn tag ở cuối bài viết. nếu là đoạn đó bạn thêm đoạn mã sau vào trước thẻ đóng ]]><b:skin>

      .post-labels{
      margin-left:10px;
      text-align: left;
      color:#ddd;
      font: bold 14px Arial;
      }

      2- Phần mã nguồn khi bạn xóa đoạn copyright của google thì nó sẽ báo như vậy không sao đâu. Nếu như bạn không yên tâm Bạn có thể gửi mẫu đó vào mail tavannam01@gmail.com để mình kiểm tra mã nguồn nha bạn.

      Xóa
    2. Cảm ơn Nam rất nhiều. Mình đã tạm hiểu ra một chút về phần 2. Còn phần 1, ý mình là vẫn cái Tag đó nhưng mình để ở trên cột phải đó bạn.

      Và tiện cho mình hỏi, bạn ở tỉnh nào? Có thể cho mình xin số ĐT để mình đặt bạn thiết kế hoặc chỉnh sửa 1 cái blog thật chuẩn seo và các tiện ích cơ bản để mình làm cái blog cho tử tế được ko?

      Mong nhận được hồi âm của bạn.

      Xóa
    3. Đoạn code của nó có dạng như sau:

      <span class='post-labels'>Nhãn:
      <b:if cond='data:post.labels'>
      <b:loop values='data:post.labels' var='label'>
      <a expr:href='data:label.url + &quot;?&amp;amp;max-results=10&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'> \</b:if>
      </b:loop>
      </b:if>
      </span>

      Bạn chỉ cần đặt nó vào vị trí bạn muốn hiển thị thôi. Nếu là cột bên phải blog trên là sau đoạn này:

      <div id="sidebar-right-1" class="sidebar section">

      Xóa
  52. Cảm ơn Nam nhé. Mình có gửi mail và template cho bạn mà chưa nhận được hồi âm. Bạn check rồi reply cho mình nếu có thể nhé

    Trả lờiXóa
    Trả lời
    1. Mình đã check mail và không thấy có tin của bạn. Bạn vui lòng kiểm tra lại nếu tin chưa gửi thành công thì send lại cho mình nha.

      Xóa
  53. Mình đã gửi lại 2 lần cho bạn mà sao ko được nhỉ? Để mình gửi lần 3 = mail khác nhé.

    Trả lờiXóa
    Trả lời
    1. Oke bạn, Nhớ ghi rõ yêu cầu nha bạn. Nếu không nhiều mail mình không thể nhớ hết yêu cầu của từng người đâu.

      Xóa
  54. bạn chỉnh dùm mình cái blog được ko? nó có cái khung hình ảnh mà mình ko bik xóa chỗ nào, chèn code slider bài trượt như bạn nhưng ko có ra, chắc do cái khung hình ... http://motngaydzui.blogspot.com/, bạn để mail cho mình add quản trị đi

    Trả lờiXóa
    Trả lời
    1. 1. Để xóa khung bao quanh hình ảnh bạn chỉ cần sửa đoạn bên dưới:

      .post-body img{padding:6px;border:1px solid #6cbe42;background:#ffffff;}

      thành:

      .post-body img{padding:6px;border:0px}

      2. Để chèn slider vào blog thì bạn phải đăng ký feed cho blog của bạn nha. CÁCH ĐĂNG KÝ

      - Sau khi cài đặt thì bạn nhớ kích hoạt như bài này: XEM NGAY

      - sau đó bạn hãy cài đặt slider và kiểm tra thành quả của bạn nha.

      3. NẾU vẫn không được thì bạn có thể mới làm quản trị tại: tavannam01@gmail.com nha.

      Xóa
  55. bạn ơi, sao mình làm y như bạn nhưng không được, mình dùng mẫu temple của bạn ở cuocsongmuonmau.info.

    Trả lờiXóa
    Trả lời
    1. Hãy áp dụng nó để mình kiểm tra lỗi bạn gặp phải nha.

      Xóa
  56. Bác Nam Tạ ơi, em làm được rồi nhưng có điều sau khi chạy hết các bài rồi, slide nó cuộn lại với tốc độ chóng mặt luôn. bác kiểm tra lại giùm em nha! trang của em là http://www.chungcugiagoc.com. Thanks Bác nhiều!

    Trả lờiXóa
    Trả lời
    1. Nguyên nhân bạn nói bạn có thể kiểm tra lại do xung đột Jquery. Chỉ giữ lại một phiên bản cao nhất nha bạn.

      Xóa
  57. &lt;div id=&#039;main-wrapper&#039;&gt;
    của mình k có thẻ trên :(

    Trả lờiXóa
  58. mình ko tìm thấy đoạn code: id='main-wrapper'>"
    bạn chỉ giúp mình với nhé
    blog mình: http://www.sit-group.org/

    Trả lờiXóa
    Trả lời
    1. Blog của bạn là đoạn sau:

      <div id='content-wrapper'>

      Xóa
    2. mình chèn được rồi nhưng sao nó đứng im bạn xem giúp mình với
      http://www.sit-group.org/
      Thank bạn nhiều

      Xóa
  59. Bài biết ở khung slide bị lòi ra ngoai 1 tí nưa bạn Nam bạn xem giúp mình luôn với nghen

    Trả lờiXóa
    Trả lời
    1. Trong trang của bạn hiện tại có 2 đoạn jquery.min.js hãy bỏ đi một đoạn ở phía sau nha.

      Về độ rộng bạn điều chỉnh lại các thuộc tính width:980px và width:960px nha bạn.

      - Điều chỉnh lại cả kích thước của mỗi box bài viết width:212px;

      Xóa
    2. Mình đã xóa 1 đoạn jquery.min.js đi nhưng nó vẫn ko uh hử gì cả Nam. box bài viết mình sửa lại luôn nhưng vẫn ko thay đổi width:195px
      Mình đang rất cần tiện ích này Nam cố gắng giúp mình với nhé
      Thanks

      Xóa
  60. Nam ơi giúp mình với Nam. skype của mình:sinhitmmo89
    yahoo: makeonline89
    rất cần, rất mong bạn giúp đỡ nếu được có thể add nick và team giúp mình với nhé
    Thank nhiều

    Trả lờiXóa
    Trả lời
    1. Bạn có thể gửi mẫu vào tavannam01@gmail.com để mình chỉnh trực tiếp cho nha.

      Xóa
    2. Mình đã gửi teamplate vô mail rồi nghen Nam. Giúp mình với nhé. Thanks

      Xóa
  61. Bạn giúp mình với mình dow nguyên template này vềhttp://btemplates.com/2013/blogger-template-thetuts/
    chưa chỉnh sửa gì cả, rồi làm như hướng dẫn của bạn, nhưng để hiển thị 4 bài thì bài đầu tiên bị che mất một đoạn, mà hiển thị 5 thì lại tràn ra 1 bài, dù có chỉnh lại kích thước từng bài thì nó vẫn bị mất và bị tràn như thế
    đây là blog của mình http://www.xn--dulch-24h-2k7d.vn/

    Trả lờiXóa
    Trả lời
    1. Chiều rộng chung của tiện ích bạn chỉnh 2 thuộc tính width:980px và width:960px (2 thuộc tính này luôn lớn hơn nhau 20px nha vì nó liên quan đến thuộc tính padding và margin nên như vậy)

      width:212px; là chiều rộng của khung bài viết. (chiều cao không quan tâm tới vì nó chuẩn từ đầu).

      Chiều rộng của ảnh được cài đặt trong file js. nên muốn chỉnh sửa nó phải mở file đó ra để sửa.

      Xóa
  62. slide của mình ko chạy nữa, b chỉ giúp mình link file js bị hỏng khiến silde ko chạy trong mã giúp http://phimkhoahocvip.blogspot.com/
    mình tính fix lại mà ko biết cái link js nào...

    Trả lờiXóa
    Trả lời
    1. NGuyên nhân do xung đột code, bạn áp dụng quá nhiều thủ thuật dùng javarscripts. Một trang phim tiêu chí là trang phải load nhanh và tính tương tác tốt, nhưng trang của bạn với giao diện cồng kềnh đó load chậm (chưa tính đến vấn đề tải phim) Bạn nên sử dụng giao diện có tính tương tác và load nhanh hơn chút. Thêm nữa vấn đề quảng cáo tự động chèn link khi truy cập trang như vậy là không nên vi nó khiến độc giả cảm thấy không thích :)

      Xóa
  63. bạn Nam ơi cho mình hỏi là nếu mình muốn làm nhiều slide trượt ngang của từng label như trên thì mình phải đổi tên khác nhau hết hả bạn ? vì mình đã thử nếu trùng tên phần css khi click chuyển 1 slide của 1 label này thì các slide của label khác cũng chạy :(.Mong bạn giúp mình giải quyết vấn đề này nhé, tks bạn

    Trả lờiXóa
  64. Chào các bạn và Nam Ta, mình đang tập làm blog, mình sử dụng wordpress, template blog của mình toàn file php, mà ví dụ về Cách tạo Slider bài mới nhất trượt ngang với thumbnail ảnh cho blogspot của bạn toàn hướng dẫn cho file html. Mình chẳng hiểu gì cả, chèn thử code vào các file index.php, single.php, page.php nhưng không hoạt động, chẳng biết vì sao cả, các bạn có kinh nghiệm hãy hướng dẫn cho mình cách chèn code này cho file php nhé, cụ thể là vào file index.php để mình tập làm. Cảm ơn các bạn nhiều

    Trả lờiXóa
  65. Mik làm Nó Hiển Thị Chữ Ngang Ko Giống Bạn Chi Cho Mik Vs

    Trả lờiXóa
  66. mình muốn cho nó xuống cuối trang thì làm thế nào bạn

    Trả lờiXóa
  67. Tạo Mega Menu có ảnh thumbnails cho Blogspot Thì làm sao bạn?

    Trả lờiXóa
  68. Tạo Mega Menu có ảnh thumbnails cho Blogspot Thì làm sao bạn?

    Trả lờiXóa