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://traidatmui-tips.googlecode.com/files/Jquery1.3.2.js" type="text/javascript"></script>
<script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/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.
» 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://traidatmui-tips.googlecode.com/files/Jquery1.3.2.js" type="text/javascript"></script>
<script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/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.
nguồn traidatmui.com
0 nhận xét:
Đăng nhận xét