» 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>
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>
<script type="text/javascript" src="http://nguyenhoangnam.googlecode.com/files/recent_video.js"></script>
<style type='text/css'>
.recentvideo {
padding:5px 2px 2px 0px;
font-size:12px;
line-height:1.2em;
display:block;
background:#eee;
width:100%;
min-height:59px;
border:1px solid #ddd;
margin-bottom:5px;}
.recentvideo a{
font-weight:bold;
text-decoration:none;
color:#333;}
.recentvideo a:hover{
color:#666;
text-decoration:underline;}
.datetextcm {
font-size:11px;
color:#333;
}
.recent_thumb {
border:1px solid #fff;
margin-right:5px;
margin-top:-5px;
float:left;
width:60px;
height:60px;
padding:2px;
float:left;
}
.recent_thumb:hover {
filter: alpha(opacity:0.7);
KHTMLOpacity: 0.7;
MozOpacity: 0.7;
-khtml-opacity:.70;
-ms-filter:"alpha(opacity=70)";
-moz-opacity:.70;
filter:alpha(opacity=70);
opacity:.70;
}
</style>
<style type='text/css'>
.recentvideo {
padding:5px 2px 2px 0px;
font-size:12px;
line-height:1.2em;
display:block;
background:#eee;
width:100%;
min-height:59px;
border:1px solid #ddd;
margin-bottom:5px;}
.recentvideo a{
font-weight:bold;
text-decoration:none;
color:#333;}
.recentvideo a:hover{
color:#666;
text-decoration:underline;}
.datetextcm {
font-size:11px;
color:#333;
}
.recent_thumb {
border:1px solid #fff;
margin-right:5px;
margin-top:-5px;
float:left;
width:60px;
height:60px;
padding:2px;
float:left;
}
.recent_thumb:hover {
filter: alpha(opacity:0.7);
KHTMLOpacity: 0.7;
MozOpacity: 0.7;
-khtml-opacity:.70;
-ms-filter:"alpha(opacity=70)";
-moz-opacity:.70;
filter:alpha(opacity=70);
opacity:.70;
}
</style>
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
<script type="text/javascript">
var numposts = 5; //số bài viết hiển thị trong tiện ích
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 50;
</script>
<script src="http://www.traidatmui.com/feeds/posts/default/-/LabelName?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
var numposts = 5; //số bài viết hiển thị trong tiện ích
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 50;
</script>
<script src="http://www.traidatmui.com/feeds/posts/default/-/LabelName?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
Bạn hãy thay (http://www.traidatmui.com) thành địa chỉ blog của bạn và tên nhãn (LabelName) video tương ứng.
7. Save tiện ích lại
Tuy nhiên ở trên mình chỉ cho hiển thị theo từng nhãn riêng biệt, nếu blog của bạn chỉ chuyên về video và muốn hiển thị cho toàn bộ bài viết thì bạn thay đoạn code Script ở cuối của bước 6 thành code bên dưới.
<script src="http://www.traidatmui.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
Ở đây mình chỉ hướng dẫn bài viết hiển thị dạng cơ bạn, thời gian tới mình sẽ test và kết hợp một số hiệu ứng cho tiện ích Recent Video này. Nếu bạn có gì không rỏ hay phát hiện lỗi gì thì có thể để lại comment bên dưới để chúng ta có thể trao đổi để hoàn thiện hơn.
» Cập nhật ngày 14/06/2011
Hiện tại mã nhúng của Youtube có chút thay đổi nên file JS ở trên không phù hợp nữa nên ảnh đại diện sẽ không hiển thị được và nay mình cập nhật lại file JS lại để các bạn có thể sử dụng thủ thuật này.
Tuy nhiên, nếu link trong mã nhúng của Youtube có dạng http://www.youtube-nocookie.com/v/xPIbuTx7ENU?fs=1&hl=en_US thì các bạn cứ sử dụng file JS cũ ở trên. Còn nếu link có dạng http://www.youtube.com/v/2ZZRtzCl6Gg?version=3&hl=en_US&rel=0 thì bạn sẽ dùng file JS bên dưới thay cho file JS (recent_video.js) ở trên.
http://nguyenhoangnam.googlecode.com/files/recent_video_youtube.js
Chúc bạn thành công
0 nhận xét:
Đăng nhận xét