Thư viện

Trải nghiệm

Thứ Tư, tháng 2 23, 2011

Trình diễn bài viết mới dạng slide đẹp mắt bằng JQuery dành cho Blogspot

Trình diễn bài viết mới dạng slide đẹp mắt bằng JQuery dành cho Blogspot - trình diễn các bài viết dạng slide trông rất hấp dẫn và mượt mà dành cho blog

Chia sẻ:
Trình diễn bài viết mới dạng slide đẹp mắt bằng JQuery dành cho Blogspot  - BY: HTTP://NAMKNA.BLOGSPOT.COM/
Hôm nay mình chia sẻ cùng các bạn một cách trình diễn các bài viết dạng slide trông rất hấp dẫn và mượt mà dành cho blog. Nhược điểm của tiện ích này là sử dụng nhiều file JS nên có thể load hơi chậm, tuy nhiên đổi lại thì các bài viết của bạn được trình diễn đẹp hơn. Ở tiện ích này sẽ được tích hợp các nút như Next, Previous và nút Stop/Play các bài viết.
Các bạn có thể xem demo để thấy trực quan hơn.


Trình diễn bài viết mới dạng slide đẹp mắt bằng JQuery dành cho Blogspot  - BY: HTTP://NAMKNA.BLOGSPOT.COM/

» Bắt đầu thủ thuật


1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML) - Tiếp tục
4. Chèn code bên dưới vào sau thẻ <head>


<script language="javascript" type="text/javascript" src="http://dl.dropbox.com/u/66256041/Menu/Namkna-blogspot-menu-doc/Jquery.min.1.5.1.js"></script>
<script language="javascript" type="text/javascript" src="http://dl.dropbox.com/u/66256041/Menu/Namkna-blogspot-menu-doc/Jquery.min.1.3.js"></script>
<script language="javascript" type="text/javascript" src="http://dl.dropbox.com/u/66256041/Menu/Namkna-blogspot-menu-doc/script.js"></script>
- Bạn hãy Download 3 file Js trên về và Upload lên host riêng để dùng lâu dài và ổn định nha. Nếu chưa có host thì xem bài này hoặc Bài này

5. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>
.main-slider{width:414px;  /*độ rộng của phần bên trái*/
height:300px; /*chiều cao của phần bên trái*/
border-right:#ccc solid 1px;}
.lof-slidecontent { width:710px;  /*độ rộng của cả tiện ích*/
height:300px; /*chiều cao của cả tiện ích*/
background:#eee;position:relative; overflow:hidden; border:#ccc solid 3px;}
.preload{ height:100%; width:100%; position:absolute; top:0; left:0; z-index:100000; text-align:center; background:#FFF}
.preload
 div{ height:100%;width:100%; background:transparent 
url(http://2.bp.blogspot.com/-84W1GJxu2EA/T5DJ1a3O-qI/AAAAAAAABMQ/RN6ZLjmPiTU/s1600/load-indicator-namkna-blogspot-com.gif)
 no-repeat scroll 50% 50%;}
.sliders-wrapper{position:relative; height:100%; z-index:3px; overflow:hidden; }
ul.sliders-wrap-inner{overflow:hidden;
 background:transparent 
url(http://2.bp.blogspot.com/-84W1GJxu2EA/T5DJ1a3O-qI/AAAAAAAABMQ/RN6ZLjmPiTU/s1600/load-indicator-namkna-blogspot-com.gif)
 no-repeat scroll 50% 50%; padding:0px; margin:0; position:absolute; 
overflow:hidden;}
ul.sliders-wrap-inner li{overflow:hidden;float:left; padding:0px;margin:0px; position:relative;}
ul.sliders-wrap-inner li img{ padding:0px;
width:414px; /*độ rộng của ảnh bên trái*/
height:300px; /*chiều cao của ảnh bên trái*/
}
.slider-description a{ color:#000; }
.slider-description{
font-size:12px;
z-index:100px;
position:absolute;
bottom:0px;
left:0px;
width:400px; /*độ rộng của phần mô tả hay phần tóm tắt nội dung*/
background:#000;
height:100px; /*chiều cao của phần mô tả hay phần tóm tắt nội dung*/
padding:0px 8px 5px 8px;
color:#fff;
opacity:0.8;
line-height:1.5em;
}
ul.navigator-wrap-inner h2,.slider-description h2{background:none; }
.slider-description h2{line-height:1.1em;margin: 5px 0 5px 0;}
.slider-description h2 a{font-size: 14px;margin: 0; padding: 0; color:#fff}
.navigator-content {position:absolute;right:0;top:0px;z-index:9;height:300px;color:#FFF
}
ul.navigator-wrap-inner h2{line-height:1.3em;padding:0 0 0 8px;font-size:14px;margin-left:85px;color:#fff;}
.navigator-wrapper{ z-index:10;
height:180px; /*chiều cao của list bài viết bên phải*/
width:310px;  /*độ rộng của list bài viết bên phải*/
overflow:hidden;
color:#FFF;
}
ul.navigator-wrap-inner{ top:0; padding:0; margin:0; position:absolute; width:100%; }
ul.navigator-wrap-inner
 li{ cursor:hand;  cursor:pointer; list-style:none; padding:0; 
margin:0px; overflow:hidden; display:block; text-align:center;}
ul.navigator-wrap-inner
  
li.active{background:url(http://4.bp.blogspot.com/-JY_fqYF2LRY/T3QZqbn1BZI/AAAAAAAAAv8/cHeTRoWwN08/s1600/arrow-bg-namkna-ngoctra.png)
 no-repeat scroll left center; color:#FFF
}
ul.navigator-wrap-inner
 li.active 
div{background:url(http://1.bp.blogspot.com/-PUT1Yred-Jc/T3QaEk6AqYI/AAAAAAAAAwE/YLrJP459rwk/s1600/grad-bg-namkna-ngoctra.gif);
color:#FFF;}
ul.navigator-wrap-inner  li >  div{
background:#333;
color:#FFF;
height:100%;
position:relative;
margin-left:15px;
padding-left:15px;
border-top:1px solid #E1E1E1;
text-align:left
}
.navigator-wrap-inner img{
height:75px;  /*chiều cao của ảnh thumb ở list bài viết bên phải*/
width:75px;   /*độ rộng của ảnh thumb ở list bài viết bên phải*/
margin:8px 8px 8px 0px;
float:left;
padding:2px;
border:#C5C5C5 solid 1px;
}
.button-next,
.button-previous{
display:block;
width:40px;
color:#FFF;
cursor:pointer;
position:absolute;
height:100%;
z-index:40;
top:0;
text-indent:-999px;
}
.button-next {
right:0px;
background:url(http://3.bp.blogspot.com/-67hwuKSVr-4/T3QYoBTXfvI/AAAAAAAAAvc/yth_B5w22jw/s1600/next-namkna-ngoctra.png)
 no-repeat right center;
}
.button-previous {
left:0px;
background:url(http://2.bp.blogspot.com/-iZGmrZk6eIU/T3QY3tPnpXI/AAAAAAAAAvk/9CXKHmlQRKU/s1600/previous-namkna-ngoctra.png)
 no-repeat left center;
}
.button-control {
background:#333;
position:absolute;
top:10px;
right:48%;
height: 20px;
width: 20px;
cursor:hand; cursor:pointer;
}
.button-control span { display:block;  width:100%; height:100%;}
.action-start span  {
background:url(http://2.bp.blogspot.com/-iqqR9dcU-P0/T3QZJvnvBwI/AAAAAAAAAvs/BhvMIcgKTDw/s1600/play-namkna-blogspot-ngoctra.png)
 no-repeat center center;
}
.action-stop span {
background:url(http://1.bp.blogspot.com/-jImuLv5abSs/T3QZZmpJ-_I/AAAAAAAAAv0/7hO_l-JREhE/s1600/pause-namkna-ngotra.png)
 no-repeat center center;
}
6. Save template lại

7- Về Bố cục (Lay out) => Thêm 1 HTML/Javascript và thêm vào code bên dưới
<script type="text/javascript">
$(document).ready( function(){ 
var buttons = { previous:$('#jslidernews .button-previous') ,
next:$('#jslidernews .button-next') };
$('#jslidernews').lofJSidernews( { interval:5000,
easing:'easeOutBounce',
duration:1200,
auto:true,
mainWidth:414, 
mainHeight:300,
navigatorHeight : 100,
navigatorWidth : 310,
maxItemDisplay:3,
buttons:buttons});  
});
summaryposts = 30;
numposts = 15;
label = "Blogspot-tips";
home_page = "http://namkna.blogspot.com/"; 
</script>

<div id="jslidernews" class="lof-slidecontent">
<script src="http://dl.dropbox.com/u/66256041/Menu/Namkna-blogspot-menu-doc/jqslidernews.js" type="text/javascript">
</script></div>

Tùy chỉnh slider

  • easeOutBounce, là tên của hiệu ứng bạn có thể chọn kiểu trình diễn khác bằng cách thay (easeOutBounce) thành một trong các tên sau: easeInOutExpo, easeInOutQuad.
  • mainWidth:414,  Là độ rộng của phần trình diễn bên trái
  • mainHeight:300, Là chiều cao của phần trình diễn bên trái
  • navigatorHeight : 100,   Là chiều cao của list bài viết bên phải
  • navigatorWidth : 310, Là độ rộng của list bài viết bên phải
  • summaryposts = 30; là số ký tự của nội dung phần mô tả
  • numposts = 15; là số bài viết hiển thị
  • label = "Blogspot-tips"; thay Blogspot-tips thành tên nhãn muốn hiển thị tronmg blog của bạn nếu bạn chọn hiển thị cho một nhãn cụ thể.
  • home_page = "http://namkna.blogspot.com/"; thay thành địa chỉ blog của bạn
  • Ở trên mình cho tiện ích hiển thị tất cả bài viết trên blog không theo từng nhãn riêng nên bạn không cần quan tâm đến phần (label = "Blogspot-tips";), phần đó mình thêm phụ để bạn nào muốn hiển thị theo nhãn thì sẽ phải quan tâm đến biến này. Để hiển thị theo từng nhãn riêng biệt thì bạn cần thay file JS bên dưới
    http://dl.dropbox.com/u/66256041/Menu/Namkna-blogspot-menu-doc/jqslidernews.js
    thành file JS sau
    http://dl.dropbox.com/u/66256041/Menu/Namkna-blogspot-menu-doc/jqslidernews_label.js
\
8. Cuối cùng bạn save tiện ích lại là xong.
traidatmui

62 nhận xét:

  1. chào bạn
    cho mình hỏi một chút được k, mình làm các bước để tạo slide ảnh cho blogspot như bạn chỉ dẫn, nhưng không hiểu sao đến load hết ảnh xong rồi save lại thì nó k chuyển hình sang hình mới như bạn nói, ở mục directed by thì thiếu hẳn mục your mail và password, chỉ có mục your name thôi,
    vì thế mà mình k thể lấy code được
    bạn xem chỉ dẫn giúp mình nhé
    hoặc cho mình số mình alo mời bạn ly cafe anh em giao lưu
    thanks bạn nhiều

    Trả lờiXóa
  2. Trang slide giờ ko còn hoạt động rồi, e mới dùng blogsport, muốn làm kái như anh mà chẳng bít vào đâu mà làm nữa :(

    Trả lờiXóa
  3. @Chien Quyet Ho
    @Chien Quyet Ho
    @Tell: 0984496464, 04.8582 9158, Yahoo: truongtam_1306, Đ/c: 8/136 Trung Kính - Cầu Giấy - Hà Nội Chào bạn cái tên bạn lấy dài quá :1). bài hướng dẫn này được ghi lại khá lâu rồi do vậy hiện nay giao diện của trang đó có thể có chút thay đổi.
    hiện nay trang đó đang tam thời cung câp dịch vụ này bạn có thể sử dụng tạm
    http://photobucket.com/
    Khi nào rảnh mình xẽ có hướng dẫn chi tiết cho các bạn :1)

    Trả lờiXóa
  4. @Chien Quyet Ho Giờ anh đã update lại dạng khác em xem Demo đi nha :3) :3) :3)

    Trả lờiXóa
  5. Cám ơn tiện ích hay. Nhưng cho mình hỏi là, muốn điều chỉnh độ rộng của tiện ích này thì làm thế nào ?
    Mình làm nhưng nó thừa ra một khoảng, có cách nào chèn thêm được một tiện ích khác (hoặc cái gì cũng đươc) vào khoảng trống đó không ? :A)

    Trả lờiXóa
  6. @BS.KuTu Trong bước 7 có phần điều chỉnh độ rộng đó bạn, đoạn này nè:
    mainWidth:414, //độ rộng của phần trình diễn bên trái
    mainHeight:300, //chiều cao của phần trình diễn bên trái
    navigatorHeight : 100, //chiều cao của list bài viết bên phải
    navigatorWidth : 310, //độ rộng của list bài viết bên phải

    - Bạn có thể tăng phần mainWidth:414 lên để vừa với blog của bạn. Điều chinhe sao cho phần mainWidth + navigatorWidth bằng độ rộng của blog bạn là đẹp nhất. :3) :3) :3)
    nếu bạn muốn thêm tiện ích khác thì chỉ cần pate tiện ích đó vào wiget chứa Slide là Ok.:3) :3) :3)

    Trả lờiXóa
    Trả lời
    1. hiệu ứng không còn dùng được nữa hả anh
      http://123456789thanh.blogspot.com/

      Xóa
  7. 1. Bạn có thể tăng phần mainWidth:414 lên để vừa với blog của bạn. Điều chinhe sao cho phần mainWidth + navigatorWidth bằng độ rộng của blog bạn là đẹp nhất.
    Đó, mình đã chỉnh sửa như thế rồi nhưng không được, nó vẫn còn khoảng trống của trang.
    2. Mình đã pate tiện ích vào wigit nhưng nó không vào chỗ trống, mà nó tụt xuống dưới.

    Trả lờiXóa
  8. @BS.KuTu bạn thay cả trong bước 5 và 7, Mình tính bằng blog bạn như sau:

    1. Bạn thay tất cả các số width:414px thành width:654px (có 6 hay 7 lần thay gì đó)

    2. Thay tất cả phần width:710px; thành width:960px;

    3. Thay tất cả phần width:400px; thành width:640px;

    Lưu lại là Ok. :3) :3) :3)

    Trả lờiXóa
  9. Không nói thì bảo là giấu dốt, nói ra rồi thì lại bảo là.... dốt thế :6)
    Nhưng mình cũng phải nói thật là: Không biết các width:414px, width:710px, width:400px nằm ở đâu. Ặc... ặc.... ăc......

    Trả lờiXóa
  10. À, có lẽ nó nằm ở phần HTML (chỉnh sửa HTML)

    Trả lờiXóa
  11. @BS.KuTu Ai lại tự nói mình thế :9) :9) . Đâu phải ai đọc cúng làm được ngay phải không, bạn phải tự tin mà chỉnh sửa vào.:3) :3)
    - Nó nằm ở code bước 5 phần chèn trước thẻ ]]></b:skin> và phần Scrip bạn chèn trong HTML/Javarscrip ở bước 7 đó. Bạn bấm Ctrl + F để tìm là Ok.
    Xem blog Demo mình đã thay đổi độ rộng rồi đó.:3) :3) :3)
    - nếu không thể tìm được thì bạn Comment mình sẽ viết cho bạn một bài hướng dẫn cho phù hợp với độ rộng của blog bạn.:3) :3) :3)

    Trả lờiXóa
  12. Hì hì! Sau khi bạn nói thì mình đã tìm thấy và làm được rùi. Cám ơn nhiều nhé.

    Trả lờiXóa
  13. @BS.KuTu Ok chúc mừng bạn :3) :3) :3)

    Trả lờiXóa
  14. Sau khi làm xong với thủ thuật này mình mới phát hiện ra lỗi: Manu xổ dọc của Blog từ dưng biến mất (trước đây có), mình thử với mấy mẫu khác cũng thế, không hiểu vì sao....

    Trả lờiXóa
  15. À, một số nhãn cũng biến mất luôn (không hiển thị trên manu ngang)

    Trả lờiXóa
  16. @BS.KuTu- Có thể các class và id trùng với menu của bạn thôi. Mình test trên các blog test vẫn chạy tốt mà.
    - nguyên nhân thứ 2 có thẻ là fife javarscrip giống nhau như thế bạn phải xóa một cái đi là Ok.
    - thứ 3 có thể bạn điều chỉnh nhầm đoạn CSS thiếu thẻ đóng chẳng hạn.
    Bạn thay template nên mình không xác định nguyên nhân hộ được. :3) :3) :3)

    Trả lờiXóa
  17. Hướng dẫn mình cách làm:
    1. Cách sửa class và id trùng với menu.
    2. Nguyên nhân thứ 2 không có vì mình đã kiểm tra rồi.
    3. Nếu mình điều chỉnh nhầm đoạn CSS thiếu thẻ đóng chẳng hạn, thì khi bấm "xem thử" nó báo lỗi ngay, nên cái này cũng không phải nguyên nhân.
    Lần trước, mình làm cái thủ thuật này thì manu xổ dọc cũng biến mất, khi mình xóa đi thì lại được (các nhãn hiển thị trên thanh manu ngang thì vẫn có đủ).

    Trả lờiXóa
  18. @BS.KuTu Trong đoạn này:
    <div id="jslidernews&quot; class="lof-slidecontent">
    - nếu ID và class giống thì đổi tất cả các từ giống trong đoạn đó và CSS thành một tên khác.:3) :3) :3)

    2- Nếu bạn thiếu thẻ đóng CSS thì sẽ không bị báo lỗi như cấu trúc XML đâu mà các nền tảng sau nó sẽ bị phá vỡ thôi.
    - Mình cí dụ 2 đoạn CSS bình thường như sau:
    #icom {fload:right;}
    #nav ul{margin-top:10px;}

    Nếu bạn thiếu 1 thẻ đóng ở #icom { thì trình duyệt sẽ hiểu chỉ có 1 đoạn code là #icom như sau:
    #icom {fload:right;margin-top:10px;}
    Tức là lúc này toàn bộ thuộc tính của thẻ #nav ul{margin-top:10px;} bị hiểu nhầm là của thẻ #icom {} :3) :3) :3)

    Trả lờiXóa
  19. Cảm ơn bạn nhiều nhá. Bài viết rất hay.

    Trả lờiXóa
  20. Mình thấy cái này hơi rối bạn ạ, nếu có thể bạn chỉ cho mình cách làm cái giống như thế này nhưng chỉ cần hiệu ứng mờ dần thôi, với lại bỏ cái phần bên trái đi, thay bằng mấy cái nút chuyển page nhỏ ở dưới. Mình cảm ơn nhiều

    Trả lờiXóa
  21. @Johnny ÝT bạn là bỏ hết phần preview bên trái chỉ để lại phần danh sách (list) bên phải thôi phải không! :3) :3) :3) :3)

    Trả lờiXóa
  22. em ko muốn cho hiện phần miêu tả bài viết thì làm thế nào hả anh !
    E chỉ cần hiện tiêu để bài viết thôi. ko cần hiện phần miêu tả bài viết

    Trả lờiXóa
  23. @Đạt Nguyễn nếu không muốn mô tả em tìm đoạn code sau:

    summaryposts = 30; //số ký tự của nội dung phần mô tả

    Với số 30 là số ký tự mô tả muốn hiển thị. Em có thể đổi thành:

    summaryposts = 0; //số ký tự của nội dung phần mô tả

    Trả lờiXóa
  24. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  25. anh namkna cho e hỏi, e ấn vào mấy cái file(js) mà a bảo lưu trên host thì nó k down về mà nó lại hiện lên trang web là sao nhỉ, làm thế nào để down về?
    mấy cái file .png, .gif có phải up lên host k anh?

    Trả lờiXóa
  26. không load được bạn oi.
    xem giùm mình vs.
    mattraixh.blogspot.com
    nó nằm ở phía dưới phần nghe nhạc ý

    Trả lờiXóa
  27. @Hai Nguyen Thanh Cái này có hướng dẫn đó bạn. Bấm đây:1) :1) :1)

    Trả lờiXóa
  28. Các bạn download các file js về và upload lên host riêng đi. Dùng file của mình hết lưu lượng là không chạy được nữa đâu.

    Trả lờiXóa
  29. Hix . mình chèn vào mọi thứ vẫn bình thường trừ dòng tiêu đề. Không biết tại sao nó không hiện tiêu đề bài viết bạn ơi

    Trả lờiXóa
    Trả lời
    1. Không hiện tiêu đề có thể do bước 5 bạn chèn sai. Mình không có URL blog của bạn nên không check rõ được.

      Xóa
    2. Bạn Namkna mến, mình vào đọc trang của bạn rất thích.
      Mình có lấy giao diện mới ở trong đó rồi, nhưng còn gặo 2 trở ngại:
      1: là những Menu con bị che lấp hết, vậy làm sao để cho nó hiển thị lên?

      2. (Trình diễn bài viết mới dạng slide đẹp mắt bằng JQuery dành cho Blogspot) Mình làm như bạn hướng dẫn xong mà không thấy nó hiện lên gì cả... Chỉ thấy hiện lên một đoạn thanh trắng phía trên Menu thôi.
      Bây giờ phải làm sao đây? bạn chỉ giúp mình với..

      Xóa
  30. Quên nữa đây là Blog của mình http://mucdonglangtu.blogspot.de/

    Trả lờiXóa
    Trả lời
    1. 1- Menu bạn đổi

      #nav .children{display:none}

      Thành:

      #nav .children{display:block}

      hoặc xóa nó coi sao.

      2- Phần tiện ích này:
      - Bạn hãy chèn tất vào chung một tiện ích HTML/Javarscip coi sao.
      - Phần CSS cho vào cặp thẻ: <style> và</style>

      Xóa
  31. thanks các bạn nhiều lắm! mình đã cố gắng làm theo hướng dẫn này nhưng kết quả là ko thể hiện được như ý muốn, nó chỉ thấy lên hình ảnh dạng thumb ở bên ds bên phải nhưng lại ko có description, bên trái thì trắng trơn, click lên mỗi bài trong list thì ko thấy nhảy link.
    Bạn vào trang này xem giúp mình với: dinhngocthuan.blogspot.com.
    Thanks

    Trả lờiXóa
    Trả lời
    1. Bác thêm cho em cái dấu ngắt khi đăng bài với. Để full thế năng fedd sẽ load rất lâu đó.
      - Nếu muốn áp dụng cho một nhãn thì hãy thay tên nhãn vào phần
      label = "Advanced blogger"
      và thay file js nữa nha.

      Xóa
    2. em có thể chỉ chi tiết chút không? cách làm và code thì anh để y như code của em để thử xem có được ko, nếu được anh mới thay mấy cái thông số như homepage, nhãn, riêng nhãn thì anh ko cần thay chỉ cần để nó chạy mấy bài mới là được

      Xóa
    3. Nếu không hiển thị theo nhãn cụ thể thì chỉ cần thay link blog là oke.
      Tiện ích này hoạt động trên feed nên cần phải đăng ký feedbuner nha anh.

      Xóa
  32. bác xem em muốn nó ở trên trang chính thì sao, sửa (Advanced blogger)
    vào label nào ak.

    em cho mặc định của bác thì nó sang bên hàng dọc bên phải ý em ko pít gọi là j hihi

    (bên blog của bác có mục Xem nhiều tuần qua ý )

    Trả lờiXóa
  33. em quên blog em :

    diemdanh.blogspot.com

    bác xem để Trình diễn bài viết mới dạng slide ở phần home thì thay (Advanced blogger)
    vào label là j ak cảm ơn bác

    Trả lờiXóa
    Trả lời
    1. Nếu muốn nó chỉ hiển thị ở trang chủ thì thêm code ở bước 4 và bước 7 vào giữa 2 cặp thẻ bên dưới rồi mới dán vào template nha.

      <b:if cond='data:blog.url == data:blog.homepageUrl'>
      code dán ở đây
      </b:if>
      - Xem thêm cách để xuất hiện ở các trang khác ở BÀI NÀY

      Xóa
    2. bác giúp em . em muốn cho kái tin mới đăng ở trang chủ nó lần lượt đổi. vd 7 tin mới thì trong 5s nó tự chạy sang tin #

      ảnh demo tin mới

      em làm theo bác nó chỉ hiện ở mục bên cạnh thui,
      làm phiền bác quá :(. cảm ơn bác

      Xóa
    3. Thời gian chuyển ảnh bạn chỉnh sửa phần interval:5000 (đơn vị tính bằng phần ngìn giây) ở đây nó chính là 5 giay rồi đó bạn ak.

      - Bạn muốn chuyển nó sang vị trí trên bài viết thì kéo wiget ở bước 7 lên trên bài đăng là xong.

      Xóa
  34. diem danh

    em kéo lên rồi nhưng nó ko chạy mà nó chỉ có ô màu trắng quay tròn , chui xuống dưới chân footer thui .

    hình như thêm kái nè vào web load chậm hơn phải ko anh

    Trả lờiXóa
    Trả lời
    1. Đúng vậy. Nó dùng tới 4 file js tương đối nặng mà em,

      Nếu không được hãy mời anh làm author anh thêm cho tavannam01@gmail.com

      Xóa
  35. Nhờ bạn Nam Tạ xem giúp của mình làm ko báo lỗi bước nào mà sao nó chỉ hiện biểu tượng load....load mãi ko dk ?
    ~~> http://www.daodacdat.name.vn/

    Trả lờiXóa
    Trả lời
    1. Bạn phải đăng ký feed nha: XEM
      NẾU đăng ký rồi thì kiểm tra xem đã kích hoạt nó chưa: XEM

      Xóa
  36. Chào bạn, mình làm như bạn hướng dẫn thì được rồi nhưng lại phát sinh vấn đề khác đó là cái slide banner phía trên lại bị mất hiệu ứng. Có cách nào để cả 2 slide đều chạy được hết ko vậy bạn? Blog của mình là http://ngoinhavui.blogspot.com/ . Cám ơn bạn nhé!

    Trả lờiXóa
    Trả lời
    1. Bạn phải áp dụng thì mình mới hỗ trợ được chứ.
      Tuy nhiên qua quan sát blog của bạn thì nguyen nhân dẫn đến hiện tượng đó là do 2 tiện ích này nó trùng nhau ở một vài class và lệnh jquery bạn ak. Bạn chỉ nên chọn một trong 2 tiện ích để tối ưu tốc độ blog của bạn nha.

      Xóa
    2. Hi, mình cũng mới biết làm blog nên cũng không biết mấy cái đó. Mình có xem và chỉnh lại rồi. Cám ơn bạn nhiều nhé! ^^

      Xóa
    3. Mình có áp dụng thử rồi đấy bạn, bạn xem giúp mình nên thay đổi phần nào nhé. Cám ơn bạn rất nhiều!

      Xóa
    4. Cả 2 vẫn chạy bình thường bạn ak.

      Xóa
  37. Bạn ơi sao mình làm rồi nhung slide nó không chạy ra ảnh

    Trả lờiXóa
    Trả lời
    1. Slider này lấy ảnh ở những bài viết tải trực tiếp lên blog nha bạn. Với những ảnh ở các trang khác nó không hiển thị đâu.

      Xóa
  38. Mình mới học làm blogger đang tìm hiểu cách làm slideshow cho blog. Mình muốn làm cho trang web công ty bảo vệ
    có gi không biết mong được sự giúp đỡ từ các bạn

    Trả lờiXóa
  39. Chào anh, em làm như anh hiển thị nhưng nó nhảy tùm lum và k hiện bài viết nữa, anh giúp em chỉnh với. trang của em http://tinhyeuamthuc.blogspot.com/ . thanks

    Trả lờiXóa
  40. Ad giúp mình với, mính làm như hướng dẫn nhưng nó không hiện ở phần bài đăng mà lại hiện ở cuối trang, trang mình http://tinhyeuamthuc.blogspot.com/ . thanks, please help me

    Trả lờiXóa
  41. Không ai giúp mình ah hichic, giờ mình đưa được lên đầu rồi nhưng không hiển thị gì cả, có ai giúp mình với. thanks

    Trả lờiXóa
  42. Cám ơn bạn, bài này rất hay.
    Cho mình hỏi thêm 1 chút, mình đã làm đc slide chuyển theo 1 lable mà mình muốn(vi dụ lable HOT). Nhưng mình muốn thêm là mỗi lần loda trang là nó hiển thị NGẪU NHIÊN bài viết chứ không tuần tự như trên. Có làm đc ko bạn?

    Trả lờiXóa