Thủ thuật tạo playlist cho video youtube ở sidebar của Blogspot

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



Traidatmui.com – Trước đây mình đã giới thiệu các bạn một bài viết về cách post video youtube dạng list, tuy nhiên với thủ thuật trước thì bên dưới video là ảnh thumbnail của các các video liên quan, điều này khó cho người dùng khi xem video. Điều đó sẽ gây khó khăn khi chúng ta post quá nhiều video trong list thì người dùng sẽ khó biết họ đang xem video nào? Với thủ thuật này thì chúng ta sẽ khắc phục được vấn đề đó và hơn nữa nó sẽ linh hoạt hơn, bạn có thể đặt chúng ở bất kì đâu trên blog, bạn có thể đặt ngay trên sidebar của blog, khi click vào các video ở list thì nó sẽ không phải rời khỏi trang blog của bạn. Bạn có thể xem demo để thấy rỏ hơn công dụng của thủ thuật này.

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 sau thẻ <head>
<style>
#ytplay {margin:0;padding:0 0 2px 0;border-bottom:1px solid #ccc;}
।yt-container {color:#333;line-height:1.5;font-size:12px;font-family:arial;background:#eee;
width:300px; /*độ rộng của tiện ích*/
border:1px solid #ccc;}
.yt-container ul{list-style-type:none;border-top:1px solid #fff;margin:0;padding:5px;height: 108px; overflow: auto;}
.yt-container ul li a{background:url(https://lh5.googleusercontent.com/-Fm9icK415H8/TzDtraRfvsI/AAAAAAAABro/HBht2Fug_g8/s15/pl.gif) no-repeat;color:#222;padding:0 0 0 19px;}
.yt-container ul li a:hover{background:url(https://lh4.googleusercontent.com/-HHQGhqe9Yv0/TzDuINfTfsI/AAAAAAAABsA/tru7N9t_6-k/s15/hoverpl.gif) no-repeat;color:#036b5d}
.yt-container ul li.currentvideo a{font-weight:bold;color:#c20404; background:url(https://lh4.googleusercontent.com/-PFFQGfP_K_c/TzDvEJJ3iSI/AAAAAAAABsY/yiIfVgwKneI/s15/cur.gif) no-repeat;padding:0 0 0 19px;}
</style>

<script src="http://data-traidatmui.appspot.com/scripts/Jquery1.3.2.js" type="text/javascript"></script>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/jquery.youtubeplaylist.js"></script>
<script type="text/javascript">
$(function() {
$("ul.ytlist").ytplaylist({
playerWidth: 300, //độ rộng của video
playerHeight:175, //chiều cao của video
addThumbs: false,
thumbSize: 'small',
showInline: false,
showRelated: true,
allowFullScreen: true,
autoPlay: true, holderId: 'ytplay'});
});
</script>

5. Save template lại và trở về phần tử trang (Page Elements)
6. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<div class="yt-container">
<div id="ytplay"></div>

<ul class="ytlist">

<li class="currentvideo"><a href="http://www.youtube.com/watch?v=nQYlLlSo73s" class="yt-vid">Phim "Nợ đa tình" - 1a</a></li>
<li><a href="http://www.youtube.com/watch?v=I0K7Pw34n5A&feature=related" class="yt-vid">Phim "Nợ đa tình" - 1b</a></li>
<li><a href="http://www.youtube.com/watch?v=Il205mA-en0&feature=related" class="yt-vid">Phim "Nợ đa tình" - 1c</a></li>
<li><a href="http://www.youtube.com/watch?v=pAm2ts1lafQ&feature=related" class="yt-vid">Phim "Nợ đa tình" - 2a</a></li>
<li><a href="http://www.youtube.com/watch?v=WzqFohS16xE&feature=related" class="yt-vid">Phim "Nợ đa tình" - 2b</a></li>
<li><a href="http://www.youtube.com/watch?v=vVvZhfjoKyU&feature=related" class="yt-vid">Phim "Nợ đa tình" - 2c</a></li>
<li><a href="http://www.youtube.com/watch?v=M7Bq_Fx6ezU&feature=related" class="yt-vid">Phim "Nợ đa tình" - 3a</a></li>
<li><a href="http://www.youtube.com/watch?v=pL9WlXtqrYA&feature=related" class="yt-vid">Phim "Nợ đa tình" - 3b</a>
</li> <li><a href="http://www.youtube.com/watch?v=KIb5ubk5L74" class="yt-vid">Phim "Nợ đa tình" - 3c</a></li>

</ul></div>

Bạn chỉ cần thay các link video bên trên thành link video (màu tím) và tên của video đó tương ứng (in đậm) mà bạn muốn hiển thị trong tiện ích này.

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

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

Loading...

62 nhận xét

  1. Cảm ơn Bác Đình rất nhiều
    Bác rất nhiệt tình và chu đáo
    Các Blog được hưởng lợi từ Bác rất nhiều
    Chúc Traidatmui.com ngày càng phát triển rực rỡ

    Trả lờiXóa
  2. Bài viết rất hay.
    Chúc Traidatmui ngày càng phát triển.

    Trả lờiXóa
  3. Blog của mình không play được. Nó hiện lên link nhưng không có video, khi bấm vào link nó tự chuyển sang video trên youtube idontknow

    Trả lờiXóa
  4. @ Admin: Có thể trong blog bạn bị trùng các file Jquery, bạn nên tìm và xóa bớt nhé

    Trả lờiXóa
  5. Chào bạn Traidatmui!
    Cho mình hỏi tí. Sao bỗng dưng trang blog của mình đang tải được một lúc là tự động chuyển sang trang khác. mình không biết làm sao nhờ bạn giúp với. Xin cám ơn Địa chỉ mình là buivansum.blogspot.com

    Trả lờiXóa
  6. @ Mr Sum: Do trang nibirin.com đã sử dụng script chống sử dụng iframe trên site khác nên nếu bạn có dùng Iframe để nhúng vào blog bạn thì bạn nên gỡ bỏ nó đi.

    Trả lờiXóa
  7. Nhưng làm sao để biết được bạn chỉ dùm nhe ! Mình vào theme tìm mà cũng chẳng thấy địa chỉ nibirin.com. Tình trạng này mới bị hôm nay , tối mình thấy bình thường và 2 ngày nay mình cũng không đăng bài hay sử dụng mã code nào. Bạn giúp mình nhe

    Trả lờiXóa
  8. @ Mr Sum: Nguyên nhân của bạn là do iframe của đoạn code bên dưới này gây ra, bạn tìm và xóa dòng code bên dưới trong site của bạn.
    [code]<iframe scrolling="yes" frameborder="0" width="175" height="400" name="gamecode1k" nosize src="http://preview.code1k.com/2010/06/choi-game-flash-vui-nhon.html" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginheight="1" marginwidth="1"></iframe>[/code]

    Trả lờiXóa
  9. Cám ơn bạn rất nhiều. Mình đã làm được rồi

    Trả lờiXóa
  10. Bạn vào đây xem giúp mình trong cái template xem có bị trùng file Jquery không? Cuoilon

    http://tanchau123.blogspot.com/2012/02/template-blog-tanchau123.html

    Trả lờiXóa
  11. @ Admin: Trang bạn quá nặng và chứa quá nhiều file Jquery với nhiều phiên bản quá.

    Trả lờiXóa
  12. Bạn giúp mình tìm ra cái file hay Jquery nào xung đột với thủ thuật này với nha. Nêu được cám ơn bạn nhiều! cunghi

    Trả lờiXóa
  13. @ Admin: Bạn vào chỉnh sửa HTML gõ từ khóa jquery để tìm xóa bớt và tìm file jquery trong tiện ích HTML/Javascript nữa nhé

    Trả lờiXóa
  14. Mình làm cũng không được, tình trạng cũng giống như bạn admin. Nhưng mình hỏi bạn là nếu mình xóa jquery đi thì có ảnh hưởng đến các thủ thuật khác đang sử dụng không? Mình thấy thủ thuật này rất hay và rất muốn thực hiện, mong bạn hồi âm sớm nhé. Và thủ thuật này chỉ áp dụng cho các video tại youtube thôi sao? Các video tại các trang khác có được không zậy?

    Trả lờiXóa
  15. Nếu làm không được thì bạn làm theo cái này nè http://tanchau123.blogspot.com/2012/01/thu-thuat-post-video-youtube-dang-list.html
    Xem DEMO tại đây chemgio http://tanchau123.blogspot.com/2012/01/te-cong-la-han-phuc-menh-chau-minh-tang.html
    Chúc bạn thành công!!! dotlua

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

    Trả lờiXóa
  17. @ Admin:
    Làm như của bạn thì mình đã làm được rồi, vì kiểu này traidatmui cung hướng dẫn rồi mà ... hic

    Trả lờiXóa
  18. @ Admin: Bạn admin comment với mục đích quảng cáo site không nhỉ, mình xin nhắc là đối với những comment dạng này thì mình sẽ check Spam để tránh phiền hà các bạn khác. Và mình thấy bạn copy nhiều bài từ site mình mà không thấy bạn ghi rỏ nguồn bài viết, mong bạn xem lại.

    Trả lờiXóa
  19. @ sangnguyenms: Đối với thư viện Jquery thì bạn có thể sử dụng 1 phiên bản mới cho các tiện ích khác, tùy theo tiện ích đó sử dụng phiên bản nào, tốt nhất thì bạn sử dụng phiên bản mới nhất. Vì nhiều thủ thuật có sử dụng Jquery nên khi bạn cài đặt quá nhiều tiện ích sẽ dẫn đến trùng lặp Jquery. Bạn chỉ cần xóa một số file jquery dư thừa thì tiện ích sẽ chạy tốt.

    Trả lờiXóa
  20. Cám ơn traidatmui đã hồi âm, thú thật mình không biết phải xóa như thế nào nữa. Đúng như traidatmui nói mình có sử dụng file Jquery trong tiện ích hiển thị bài tự động chạy ngang phía dưới footer đó, bây giờ mình xó file đó đi được không mà phải xóa từ đoạn nào vậy. Mình không rành về code nên không hiểu lắm, ming trai đất mũi sớm hồi âm. blog của mình: sangnguyenms.blogspot.com. bạn xem thử và giúp mình nhé.

    Trả lờiXóa
  21. @ sangnguyenms:Nếu bạn đã chèn file JQuery vào trong template thì bạn có thể xóa file JQuery ở ngòai các tiện ích HTML/Javascript đi. Bạn xóa luôn file JQuery, ví dụ: Jquery1.3.2.js, hoặc Jquery1.2.6.js.

    Trả lờiXóa
  22. @ Trai Đất Mũi:
    Cám ơn traidatmui, mình chỉ sử dụng file Jquery trong temp thôi còn trong tiện ích mình không có cái nào sử dụng cả?
    Mình đã tìm trong templ, mình cũng chỉ có file Jquery của tiện ích chạy ngang dưới footer thôi, mình xóa file này được không?

    Trả lờiXóa
  23. @ Trai Đất Mũi:
    Cám ơn traidatmui, mình chỉ sử dụng file Jquery trong temp thôi còn trong tiện ích mình không có cái nào sử dụng cả?
    Mình đã tìm trong templ, mình cũng chỉ có file Jquery của tiện ích chạy ngang dưới footer thôi, mình xóa file này được không?
    Cám ơn traidatmui mình đã làm được rồi. Lần nữa chân thành cám ơn, cám ơn, cám ơn... ngàn lần.

    Trả lờiXóa
  24. @ sangnguyenms: Bạn hoàn toàn có thể xóa nó đi

    Trả lờiXóa
  25. Morning Bác!
    Bác ơi cái Video clip mỗi lần mình đăng nhập thì nó lại tự động Auto play, mình không làm chủ được, đôi lúc không tiện vì lỡ may mở vôlum to quá làm ảnh hưởng người khác. Có cách nào để khắc phục không Bác? như có cái biểu tượng (Play) nằm giữ khung hình, khi nào thích thì mình click vào.

    Trả lờiXóa
  26. Cuối cùng mình cũng đã post được dmohoi. Bạn sangnguyenms bạn đưa cái code ở phần head vào trong bài đăng chung với cái code Javascript thử xem hehehe. DEMO blog http://tanchau123.blogspot.com/2012/02/la-han-phuc-menh-chau-minh-tang.html

    Trả lờiXóa
  27. traidatmui mình sẽ xem lại và kể từ sau mình sẽ ghi rõ nguồn. Thanks vì những bài rất hay của bạn votay

    Trả lờiXóa
  28. @ HaMai:
    Mạn phép traidatmui, mình trả lời giúp bạn này nhé, vì mình đã làm được. Để không Auto play thì bạn làm như sau: Bạn tìm lại trong teml của mình dòng chữ sau:
    allowFullScreen: true,
    autoPlay: true, holderId: 'ytplay'});
    });
    Bạn sửa lại autoplay: false
    Chúc thành công.

    Trả lờiXóa
  29. cảm ơn sangnguyenms
    Mấy hôm nay đọc bài của sangnguyenms!
    Blog đẹp ghê :D

    Trả lờiXóa
  30. @ sangnguyenms: Vâng cảm ơn bạn đã trả lời giúp, điều này mình rất vui vì mình không chỉ muốn các bạn hỏi và mình chỉ trả lời mà mình muốn các bạn chia sẻ lẫn nhau. Ai biết thì chia sẻ lại để các bạn cùng nhau học hỏi. Chúc tất cả vui.

    Trả lờiXóa
  31. @ Trai Đất Mũi:
    Cái này mình cũng nói thật lòng là mình chẳng có chút gì kiến thức về viết code cả, chỉ toàn học hỏi từ các blog khác, nhất là từ traidatmui đó thôi, và mình cũng chỉ bắt đầu viết blog cách nay có hơn tháng. Tuy nhiên, cũng từ các blog của các bạn mà mình cũng đã tạo cho riêng mình một blog cá nhân.
    Xin traidatmui bài viết này về blog của mình nhé, nhằm mục đích để lưu trữ thôi. Tất nhiên là mình phải ghi rõ nguồn gốc của nó chứ.
    Lần nữa cám ơn traidatmui nhiều nhé.
    @Hamai: cám ơn bạn đã ghé thăm blog của mình và cả lời khen tặng của bạn. Tuy nhiên bạn đã khen lại còn cả chê nữa chứ. Đã đẹp sao lại cong "ghê"... hi

    Trả lờiXóa
  32. @ sangnguyenms: Kiến thức đâu tự nhiên có được bạn, cần phải học hỏi từ mọi người thì mới khai sáng được đúng không.

    Trả lờiXóa
  33. Bài viết hay quá, mình đã áp dụng thành công. Cho mình xin bài này nhé (tất nhiên mình sẽ ghi rõ nguồn). Thanks!

    Trả lờiXóa
  34. Traidatmui? Mình muốn tạo thêm một playlist nữa thành 2 playlist vì mỗi một list cho một chủ đề riêng. Ví dụ: list 1 cho Hoài Linh, List 2 cho Vân Sơn thì làm thế nào vậy?
    Mình copy code cũ nhưng khi chạy nó lại chỉ hiển thị trên một màn hình video thôi?

    Trả lờiXóa
  35. Thêm nữa, Mình muốn tạo list tự động chạy hết bài này thì tự động qua bài khác (tức là lặp lại)thì phải làm sao nữa? Bạn giúp mình nhé. Cám ơn bạn nhiều.

    Trả lờiXóa
  36. Sao rùi traidatmui, vấn đề của mình hỏi đó bạn tìm được chưa? Giúp mình với nhé

    Trả lờiXóa
    Trả lời
    1. Xin lỗi bạn nhe lúc này bận quá nên chưa thời gian giúp bạn, thời gian tới nếu thành công mình sẽ post bài trên đây bạn theo dõi nhé.

      Xóa
  37. Sớm sớm chút nhé, mình chờ.

    Trả lờiXóa
  38. Nhìn đẹp đó bạn, có thể cho 2 cái icon play và pause không ?

    Trả lờiXóa
  39. [quote]Mình muốn tạo thêm một playlist nữa thành 2 playlist vì mỗi một list cho một chủ đề riêng. Ví dụ: list 1 cho Hoài Linh, List 2 cho Vân Sơn thì làm thế nào vậy?[/quote]

    Mình chia sẻ cho bạn sangnguyenms cách này có thể chưa tối ưu lắm nhưng vẫn như mong muốn của bạn. Bạn hãy thay thế file JS ở trên phần từ jquery.youtubeplaylist.js trở về sau thành code bên dưới
    [code]<script src="http://data-traidatmui.appspot.com/scripts/jquery.youtubeplaylist2.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function() {
    $("ul.ytlist").ytplaylist({
    playerWidth: 300, //độ rộng của video
    playerHeight:175, //chiều cao của video
    addThumbs: false,
    thumbSize: 'small',
    showInline: false,
    showRelated: true,
    allowFullScreen: true,
    autoPlay: true, holderId: 'ytplay'});

    $("ul.ytlist2").ytplaylist2({
    playerWidth: 300, //độ rộng của video
    playerHeight:175, //chiều cao của video
    addThumbs: false,
    thumbSize: 'small',
    showInline: false,
    showRelated: true,
    allowFullScreen: true,
    autoPlay: true, holderId: 'ytplay2'});
    });</script>[/code]
    Tiếp theo bạn thay code ở bước 6 thành code bên dưới và thay thế link Youtube như hướng dẫn ở trên.
    [code]<div class="yt-container">
    <div id="ytplay"></div>

    <ul class="ytlist">

    <li class="currentvideo"><a href="http://www.youtube.com/watch?v=nQYlLlSo73s" class="yt-vid">Tên youtube video</a></li>
    <li><a href="http://www.youtube.com/watch?v=I0K7Pw34n5A&feature=related" class="yt-vid">Tên youtube video</a></li>

    </ul>

    <div id="ytplay2"></div>
    <ul class="ytlist2">

    <li class="currentvideo"><a href="http://www.youtube.com/watch?v=XjhVTk6HAMM" class="yt-vid">Tên youtube video</a></li>
    <li><a href="http://www.youtube.com/watch?v=I0K7Pw34n5A&feature=related" class="yt-vid">Tên youtube video</a></li>

    </ul>
    </div>[/code]
    Các bước khác bạn xem hướng dẫn ở trên bài viết nhé

    Trả lờiXóa
  40. Mặc định video là chất lượng default 360p, các bác có thể cho nó tự động phát ở chất lượng HD 720p được không, cái này mình mò mấy tiếng rồi k ra.

    Trả lờiXóa
    Trả lời
    1. Sao Admin k trả lời câu này giúp mình ah !

      Xóa
    2. Thật xin lỗi bạn nhé vấn đề này mình cũng chưa nghiên cứu, mong bạn nào có cách sớm chia sẻ lại nhé.

      Xóa
  41. Anh có thể hướng dẫn em tạo list nhac dạng giống http://sachnoi.vn được ko?

    Trả lờiXóa
  42. Độ rộng tiện ích là 300 thì được rồi. Mình muốn tiện tích cao hơn nữa thì làm thế nào ? Mong bạn chỉ giúp

    Trả lờiXóa
    Trả lời
    1. Ở trên có 2 biến để bạn tùy chỉnh độ rộng và chiều cao đấy bạn,
      playerWidth: 300, //độ rộng của video
      playerHeight:175, //chiều cao của video

      Xóa
  43. Hi bạn cái này là sử dụng playplist của yahoo webplayer mà ta? nó không giống với hình minh họa bạn chỉ tí nào cả! không biết có đúng vậy không ah?

    Trả lờiXóa
    Trả lời
    1. Không phải bạn ah, nếu bạn thực hiện đúng các bước thì nó sẽ hiển thị như hình ảnh minh họa chứ sao khác được bạn.

      Xóa
  44. Có thủ thuật nào giúp chỉ nhúng Playlist trên Youtube rồi chèn nhúng đó vào Blog mà nó hiện cái danh sách xuống phía dưới Video không anh?
    Mặc định playlist youtube bây giờ nếu nhúng vào blog thì cái danh sách bị ẩn đi và mình chọn thì nó mới hiện ra. Nhưng e lại muốn nó hiện thị ngay phía dưới video đang chạy luôn :D

    Trả lờiXóa
  45. Em cảm ơn anh, nhưng anh có thể giúp em cái vụ này được không, em add vào side demo của em thì được, nhưng em add vào side chính thì nó chỉ hiện playlist không hiện khung video là bị làm sao ạ????
    link side demo: http://democodedaian.blogspot.com/
    link side chính: http://www.muabatdongsan.net/
    mong sớm được bác hồi đáp :(

    Trả lờiXóa
    Trả lời
    1. à cả cái vấn đề tắt auto play anh nhé :( làm ơn giúp em

      Xóa
    2. - Do bị trùng code JQuery, bạn không cần thêm code bên dưới

      [code]<script src="http://data-traidatmui.appspot.com/scripts/Jquery1.3.2.js" type="text/javascript"></script>[code]

      - Để tắt auto play thì bạn chuyển TRUE thành FALSE ở dòng autoPlay: true, holderId: 'ytplay'}); trong code bước 4

      Xóa
    3. Em cũng nghĩ đến trường hợp đấy và đã làm trước rồi những vẫn không hiển thị được anh ạ :((

      Xóa
  46. Bạn hãy kiểm tra xem trong blog co trung JQuery.min k

    Trả lờiXóa
    Trả lời
    1. em lược bỏ hết jquery.min để lại 1 cái thôi, các thứ khác bình thường mỗi cái video đó là vẫn không hiện a ạ

      Xóa
    2. bác làm ơn giúp em với :( em rất thích code này :((

      Xóa
    3. Mình đã xem qua site bạn và thấy vẫn còn nhiều file JQuery trong đó. Ví dụ như:

      http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
      http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js
      http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
      .........

      Bạn hãy kiểm tra kỹ lại đi nhé

      Xóa
    4. à, cái đấy là em bỏ hết đi rồi, để một cái thôi, đẻ hơn nửa tiếng mà vẫn chả thấy j nên em add lại vì sợ nó ảnh hưởng tới các code khác, nick gmail anh là j ạ, em gửi lời mời anh có thể vào chỉnh giúp em được không ạ :(

      Xóa
    5. anh ơi, anh có thể kiểm tra lại site em giúp em được không ạ, em đã lược bỏ toàn bộ rồi đấy ạ

      Xóa
  47. Bạn ơi bên mình có dịch vụ Đăng tin tự động lên groups trên facebook miễn phí bạn xem qua nhé. miễn phí 100%
    Ngoài ra các bạn có thể đọc tin tức tại Kênh tin tức giải trí yeubao.com
    Các bạn có thể truy cập link sau để xem thông tin công nghệ
    Khoinguoncongnghe.net | kênh thông tin dành cho tín đồ công nghê
    cám ơn bạn đã đọc
    đăng tin tự động trên facebook miễn phí 100% xem tại Đăng tin tự động lên groups trên facebook miễn phí
    xem thủ thuật blogspot, thủ thuật blogger, thủ thuật facebook tại thủ thuật tổng hợp facebook, blogger,coputuer
    xem tin tức giới trẻ, các tin nổi bật tin tức nổi bật, tin sao, tin giới trẻ, đời sống xã hội
    xem thong tin giải trí, cung hoàng đạo, tại bí mật 12 chòm sao,tâm sự,blog tâm sự

    giải trí thư giã relax giải trí thư giãn relax
    khám phá du lịch, bi ẩn khám phá du lịch, bí ẩn
    kho video giải trí khổng lồ video đời sống xã hội, video giải trí
    khởi nguồn công nghệ, xem tin tức công nghệ, tin tức internet
    tin tức internet
    Tin tức itc , tin tức technogoy tin tức ict

    Khám phá công nghệ
    khám phá

    Thủ thuật công nghê thủ thuật công nghệ, tips





    Trả lờiXóa