Đã có nhiều bài giới thiệu về cách post video youtube dạng list, tuy nhiên với thủ thuật đó thường 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.
» 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://vahanamokblog.googlecode.com/files/Jquery1.3.2.js" type="text/javascript"></script>
<script type="text/javascript" src="http://vahanamokblog.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="Link của Video 1" class="yt-vid">Tên phim 1 </a></li>
<li><a href=" Link của Video 2 " class="yt-vid"> Tên phim 2 </a></li>
<li><a href=" Link của Video 3 " class="yt-vid"> Tên phim 3 </a></li>
<li><a href=" Link của Video 4 " class="yt-vid"> Tên phim 4 </a></li>
<li><a href=" Link của Video 5 " class="yt-vid"> Tên phim 5 </a></li>
<li><a href=" Link của Video 6 " class="yt-vid"> Tên phim 6 </a></li>
<li><a href=" Link của Video 7 " class="yt-vid"> Tên phim 7 </a></li>
<li><a href=" Link của Video 8 " class="yt-vid"> Tên phim 8 </a></li>
<li><a href=" Link của Video 9 " class="yt-vid"> Tên phim 9 </a></li>
</ul></div>
<li><a href=" Link của Video x " class="yt-vid"> Tên phim x </a></li>
» 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://vahanamokblog.googlecode.com/files/Jquery1.3.2.js" type="text/javascript"></script>
<script type="text/javascript" src="http://vahanamokblog.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="Link của Video 1" class="yt-vid">Tên phim 1 </a></li>
<li><a href=" Link của Video 2 " class="yt-vid"> Tên phim 2 </a></li>
<li><a href=" Link của Video 3 " class="yt-vid"> Tên phim 3 </a></li>
<li><a href=" Link của Video 4 " class="yt-vid"> Tên phim 4 </a></li>
<li><a href=" Link của Video 5 " class="yt-vid"> Tên phim 5 </a></li>
<li><a href=" Link của Video 6 " class="yt-vid"> Tên phim 6 </a></li>
<li><a href=" Link của Video 7 " class="yt-vid"> Tên phim 7 </a></li>
<li><a href=" Link của Video 8 " class="yt-vid"> Tên phim 8 </a></li>
<li><a href=" Link của Video 9 " class="yt-vid"> Tên phim 9 </a></li>
</ul></div>
Bạn chỉ cần thay các link video bên trên thành link video mà bạn muốn 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.
Xin lưu ý:
- Nếu không muốn video tự động Play thì chỉ cần thay " true" trong code trên thành "false" là được.
- Bạn có thể thêm vào (hoặc xóa bớt) nhiều Video bằng cách thêm vào (hoặc xóa bớt) các đoạn code:
<li><a href=" Link của Video x " class="yt-vid"> Tên phim x </a></li>
Nguồn TRAIDATMUI.COM
0 nhận xét:
Đăng nhận xét
Xin mời bạn cho một nhận xét để động viên người viết.
(Nhận xét của bạn sẽ được kiểm duyệt trước khi đăng)