(Traidatmui.com) – Thời gian có nhiều bạn đã thắc mắc và hỏi mình về việc tạo Recent Video cho Blogspot, và mình đã test thử và thành công hôm nay chia sẻ cùng các bạn. Trước đây mình đã giới thiệu cho các bạn nhiều thủ thuật tạo Recent Posts cho Blogspot với ảnh thumbnail, thủ thuật đó sẽ hiển thị ảnh thumb nếu trong bài viết của bạn có kèm theo hình ảnh. Tuy nhiên đối với video không có hình ảnh kèm theo thì sao? Việc này có thể sử dụng mẹo nhỏ để giải quyết được, nhưng đối với blog chuyên đăng tải video thì việc làm thủ công rất mất thời gian và phức tạp, ở đây mình sẽ giúp các bạn tạo tiện ích Recent Video sẽ tự động hiển thị ảnh thumb từ các Video của Youtube, bạn không cần theo hình ảnh tiện ích này cũng sẽ giúp bạn có được tiện ích hiển thị tiêu đề và ảnh thumb của video đó.Hình ảnh minh họa
» Bắt đầu thủ thuật1. Đă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://traidatmui-tips.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.
Chúc bạn thành công
Địa chỉ bài viết: http://www.traidatmui.com/2011/05/tien-ich-recent-video-youtube-cho.html#ixzz1OT02agtt
Nguồn: TRAIDATMUI.com
Không có nhận xét nào:
Đăng nhận xét