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>
#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>
<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.
