Tiện ích Recent Video Youtube với hiệu ứng Scroll ngang cho Blogspot

Điểm 4.6/5 dựa vào 87 đánh giá

(Traidatmui.com) – Mình đã từng chia sẻ cùng các bạn thủ thuật tạo tiện ích Recent Video của Youtube cho Blogspot (Bạn có thể xem tại đây), tuy nhiên bài viết trước mình chỉ cho tiện ích này hiển thị ở dạng tĩnh đơn giản. Bài viết hôm nay mình sẽ giới thiệu cho các bạn thủ thuật tạo Recent Video Youtube với hiệu ứng chạy ngang trông đẹp mắt hơn. Tiện ích này mình đã chỉnh sửa code JS để phù hợp với mọi link Youtube, bạn không cần phải lo lắng với sự thay đổi link file của youtube như bài viết trước.


Hình ảnh minh họa

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

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào trước thẻ </head>
<script src="http://data-traidatmui.appspot.com/scripts/JQuery.eva1.2.3.js" type="text/javascript"></script>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/jquery.easing.1.1.js"></script>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/JQ.jCarouselLite_2.js"></script>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/jCarouselLite_videoytbfixed.js"></script>
<script type="text/javascript">
$(function() {
$(".jCarouselLite").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
speed: 500, //tốc độ scroll
auto:5000, //thời gian tự động scroll
visible:5, //số bài viết hiển thị
scroll:5, //số bài viết 1 lần scroll qua
easing: "easeinout"
}); });
</script>

5. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>
.jCarouselLite {
float: left;
position: relative;
isibility: hidden;
left: -5000px;
}
.carousel a.prev{
float: left;
width: 23px;
height: 143px;
margin-right:-6px;
background: url(https://lh6.googleusercontent.com/_BTztXRwC9ik/TdiuorWP9AI/AAAAAAAAIYM/q1rCChiB4VQ/imageNavLeft.gif) left 60px no-repeat;
}
.carousel a.next {
float: left;
margin-left:-6px;
width: 23px;
height: 143px;
background: url(https://lh4.googleusercontent.com/_BTztXRwC9ik/TdiuontVkmI/AAAAAAAAIYQ/moCmlg70QcA/imageNavRight.gif) right 60px no-repeat;
}
.recentvideo-youtube {
float:left;
padding:0px 3px 5px 2px;
font-size:11px;
line-height:1.2em;
display:block;
width:114px;
height:145px;
background:#fff;
-moz-border-radius-topright: 7px;
-moz-border-radius-topleft: 7px;
-moz-border-radius-bottomright: 7px;
-moz-border-radius-bottomleft: 7px;
border:1px solid #ddd;
margin-right:3px;
text-align:center;}
.recentvideo-youtube a {
font-weight:bold;
text-decoration:none;
color:#333;}
.recentvideo-youtube a:hover{
color:#666;
text-decoration:underline;}
.datetextcm {
font-size:11px;
color:#333;
}
.video_thumb {
border:1px solid #fff;
margin-left:2px;
margin-top:1px;
float:left;
width:105px;
height:90px;
padding:2px;
float:left;
}
.video_thumb:hover {
filter: alpha(opacity:0.7);
KHTMLOpacity: 0.7;
MozOpacity: 0.7;
-khtml-opacity:.70;
-ms-filter:"alpha(opacity=70)";
-moz-opacity:.70;
filter:alpha(opacity=70);
opacity:.70;
}

6. Save template lại và trở về phần tử trang (Page Elements)
7. Chọn thêm tiện ích (Add a Gadget)
8. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<script type="text/javascript">
var numposts = 10; //số bài viết tối đa hiện thị trong tiện ích
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 50;
label = "Xem hai"; //tên nhãn bài viết của blog bạn
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn
</script>
<div class="carousel">
<a href="#" class="prev"></a>
<div class="jCarouselLite">
<script type="text/javascript">
document.write("<script src=\""+home_page+"feeds/posts/default/-/"+label+"?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs\"><\/script>");</script>
</div>
<a href="#" class="next"></a>
</div>

9. Save tiện ích lại là xong

Chúc bạn thành công

Loading...

28 nhận xét

  1. đưa nhầm link demo rồi anh ơilleu

    Trả lờiXóa
  2. Demo ngay ở trang chủ Blog này đó Cuoilon

    Trả lờiXóa
  3. Sao ko áp dụng được vào blog của mình nhỉ
    lamgiautuforex.blogspot.com

    Trả lờiXóa
  4. thủ thuật đẹp nhưng hoi nặng Cuoilon

    Trả lờiXóa
  5. chào traidatmui! bạn thật có trí tuệ và khả năng cống hiến. thủ thuật này hay và nếu như áp dụng thành công. Như các bạn biết, thủ thuật tạo You tube này KHÔNG THỂ DÙNG ĐƯỢC CHO WEB / BLOGEER. MONG BẠN CHỈNH SỬA LẠI.
    CHÚC BẠN THÀNH CÔNG.
    http://www.vedepphatphap.com/

    Trả lờiXóa
  6. Thủ thuật này mình đã test lại, nó vẫn hoạt động bình thường. Nếu bạn gặp vấn đề không hiển thị được thì bạn có thể đưa code ở bước 4 vào HTML/Javascript cùng với code bước 8.

    Ngoài ra nếu bạn gặp vấn đề khó khăn thì có thể mô tả rỏ ràng cụ thể để mình có thể giúp bạn khắc phục.

    Chúc bạn thành công. =L:

    Trả lờiXóa
  7. Mình đã làm giống như các bước mà bạn hướng dẫn nhưng vẫn không hiển thị được.Sau khi làm xong thì trên trang chủ không còn hiển thị bài viết nữa
    http://i1099.photobucket.com/albums/g386/rogerminh2401/untitled2.jpg
    Bạn xem giúp mình nhé!

    Trả lờiXóa
  8. Mình đã test lại rất nhiều lần nó vẫn hiển thị tốt. Còn việc trang chủ của bạn không hiển thị bài viết đó không phải do thủ thuật này vì mình không thay thế code nào cả. Bạn hãy xem lại đã có sai sót ở bước nào không nhe.

    Trả lờiXóa
    Trả lời
    1. ko đc bạn ạ loàm đủ mọi cách rùi

      Xóa
    2. Nó báo thế nào vậy bạn nói rỏ hơn mình mới có hướng giải quyết cho bạn được

      Xóa
  9. Có tiện ích nào recent post bằng hình ảnh với hiệu ứng Scroll ngang như cái này không bạn.
    Mình tìm mãi chả thấy

    Trả lờiXóa
  10. Hiện tại mình đang test thủ thuật của bạn,bạn theo dõi có thể mình sẽ post vào ngày mai đấy bạn.

    Trả lờiXóa
  11. MÌnh cũng bị giống bạn rogerminhmmo2401 luôn . Bài viết k hiển thị được gì hết, tốc độ load trang giảm rõ rệt . Không biết do sao nữa hic

    Trả lờiXóa
  12. Ak. Cái này vào DEMO copy phần scrip + DIV và past vào tiện ích là ok ^_^ (bước 8). Nếu copy và paste đoạn mã ở bước 8 đó vào thì ko được .

    Trả lờiXóa
  13. Z là có thể tên nhãn của bạn chưa chính xác, vì tên nhãn mình dùng code trên chỉ là ví dụ không phải là nhãn thật vì trên trang mình post video k phải theo kiểu copy past code Youtube nên phần demo sử dụng JS có chỉnh sửa hơi khác đó bạn.

    Trả lờiXóa
  14. Bn ơi làm sao để hiển thị ảnh tthumbnails của youtube nhỉ ?

    Trả lờiXóa
  15. Vâng mình thật xin lỗi các bạn vì thời gian qua đã không phát hiện ra lỗi đối với tiện ích này khiến các bạn gặp rắc rối khi thực hiện thủ thuật cho blog của các bạn.

    Hôm nay mình đã phát hiện có một lỗi nhỏ trong file JS và đã fixed, bây giờ các bạn có thể thực hiện lại. Có gì không rỏ hay trục trặc gì có thể để lại comment ở đây để mình khắc phục nhe.

    Bạn Sophie Paris Vietnam thực hiện lại thủ thuật này sẽ hiện thị được ảnh thumbnail

    Tuy nhiên các bạn lưu ý code được nhúng vào blog phải là dạng Old Embed Code của Youtube không phải Iframe nhe.

    ví dụ:

    <object width="420" height="345"><param name="movie" value="http://www.youtube.com/v/FD7YCXvW0zc?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/FD7YCXvW0zc?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="420" height="345" allowscriptaccess="always" allowfullscreen="true"></embed></object>

    Trả lờiXóa
  16. Hay ta . Tks bác ADMIN fix lỗi chuẩn ^_^

    Trả lờiXóa
  17. Hic, link file js die sạch thảo nào mình làm ko đc, bác up lại đc ko. Thanks, bác nhiều!

    Trả lờiXóa
  18. Trai Đất Mũi ơi có cái tiện ích nào nó hoạt động mà nó đứng im hiển thị 8 video như một trang trình diễn photo ko bạn :d cái này chạy nhanh quá chóng hết cả mặt mà hơi nhỏ à cái này tạo tiện ích bài viết liên quan thì đẹp quá

    Trả lờiXóa
    Trả lời
    1. Nếu bạn muốn dạng tĩnh có thể xem bài viết tại đây.

      Còn với tiện ích này bạn có thể thay đổi thời gian lại với 2 biến:

      speed: 500, //tốc độ scroll
      auto:5000, //thời gian tự động scroll

      Xóa
  19. Không có trang tĩnh mà trình chiếu hàng ngang như thế này sao???

    Trả lờiXóa
    Trả lời
    1. Có bài này rồi thì đâu cần thêm bài như thế nữa bạn, nếu bạn không muốn nó tự động chạy thì bạn chỉ cần thay auto:5000, thành auto:false, là được rồi bạn.

      Xóa
  20. một điểm dở là xài recen youtube không hiển thì hình ảnh video từ nguồn khác, hoặc hình ảnh. chỉ hiển thị với youtube

    Trả lờiXóa
  21. cái này có hiện thị với template post bài youtube dạng:
    " endofvid
    [starttext]

    [endtext] "
    kô anh

    Trả lờiXóa
    Trả lời
    1. Dạng đó thì phải chỉnh Script lại chứ code trên không dùng được em.

      Xóa