Breaking News
Loading...
Thứ Bảy, 16 tháng 6, 2012

Thủ thuật tạo tiện ích video liên quan (Related videos) cho Blogspot

22:42
Traidatmui.com – 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 đâytạ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&amp;alt=json-in-script&amp;callback=relatedvideo"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

9. Cuối cùng save template lại là xong.

Chúc bạn thành công!

0 nhận xét:

Đăng nhận xét

 
Toggle Footer