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://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>
#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>
Lưu ý: code trên là chạy tự động khi xem blog của mình, để không chạy tự động thì sửa autoPlay: false là được
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>
<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.
Không có nhận xét nào:
Đăng nhận xét