Thủ thuật tạo tiện ích video liên quan (Related videos) cho Blogspot
Chủ Nhật, 4 tháng 11, 2012
Theo yêu cầu của bạn Nguyễn Minh Ngọc
thì hôm nay mình xin chia sẻ cùng các bạn thủ thuật tạo tiện ích liên
quan cho video lấy từ Youtube. Trước đây thì mình cũng đã có chia sẻ 2
thủ thuật là Recent Video, liên quan đến video từ youtube (bạn có thể
tham khảo tại đây và tại đây).
Với tiện ích này khi bạn nhúng code lấy từ Youtube vào blog thì nó sẽ
tự động lấy ảnh thumbnail bạn không cần phải upload hình ảnh kèm theo
trong khi đang bài viết nữa. Những video trong cùng 1 nhãn sẽ được hiển
thị ngay bên dưới video mà bạn đang xem.
» 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
mở rộng mẫu tiện ích (Expand Widget Templates)
5. Chèn code bên dưới vào sau thẻ
<head>
<script src='http://traidatmuidata.appspot.com/scripts/related_video_youtube.js' type='text/javascript'></script>
<script type='text/javascript'>
var relatedvideos = 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>
6. Chèn tiếp code CSS bên dưới vào trước thẻ
]]></b:skin>
.relatedvideo {
padding:2px 2px 0px 2px;
font-size:12px;
display:block;
background:#eee;
width:100px;
float:left;
border:1px solid #ccc;
border-radius:5px;
margin:0 8px 8px 0px;}
.relatedvideo h3{height:45px;padding:5px 2px 4px 2px;margin:0;line-height:0.8em!important;}
.relatedvideo h3 a{
font-weight:bold;
text-decoration:none;
color:#333!important;
font-size:12px;}
.relatedvideo h3 a:hover{
color:#666;
text-decoration:underline;}
.related_thumb {
margin:0px;
width:94px;
height:80px;
padding:0px;
}
.related_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;
}
7. Tìm đến dòng code như bên dưới hoặc tương tự
<div class='post-footer-line post-footer-line-3'/>
8. Tiếp theo chèn đoạn code bên dưới ngay sau code vừa tìm được ở trên
<b:if cond='data:blog.pageType == "item"'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name +
"?orderby=published&alt=json-in-script&callback=relatedvideo"'
type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
9. Cuối cùng save template lại là xong.
Tags:
WEB/BLOG
Ý kiến bạn đọc [ 0 ]
Ý kiến của bạn