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

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='https://codeuser.googlecode.com/svn/trunk/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!

Xem khác cùng chủ đề

20 nhận xét | Viết lời bình

6/17/2012 12:27:00 CH Trả lời

thanks post !

6/18/2012 08:43:00 SA Trả lời

Cám ơn về bài viết

7/16/2012 08:44:00 CH Trả lời

Chân thành cám ơn anh.Tiện ích quá hay.hihi :X

7/17/2012 01:36:00 SA Trả lời

anh ơi template iTube 2.0
Template này em không biết đăng video Youtube kiểu gì để hiện thị ảnh đại diện đc cả.Mong anh giúp em với.Nhưng tiện ích bài đăng phổ biến thì vẫn hiện ảnh.huhu
Demo của em nè: http://www.xemphims.co.cc/

7/17/2012 02:18:00 SA Trả lời

Có thể cho em hỏi thêm 1 cái nữa.Đó là khi mình đăng bài mình chèn ảnh vào bài viết,nhưng khi vào xem chi tiết bài đó thì sẽ kô hiện thị ảnh đó.Anh có thể giúp em làm thủ thuật đó được kô anh.hihi

Admin
7/17/2012 04:37:00 SA Trả lời

Đối với template đó thì em nhúng code dạng iframe là đúng rồi ví dụ:
[code]<iframe allowfullscreen="" frameborder="0" height="388" src="http://www.youtube.com/embed/lOaTsplKhDc" width="690"></iframe>[/code]
Tuy nhiên để hiển thị hình ảnh ở các tiện ích thì em phải đăng kèm hình ảnh theo trong bài viết. Ví dụ:
[code]<iframe allowfullscreen="" frameborder="0" height="388" src="http://www.youtube.com/embed/lOaTsplKhDc" width="690"></iframe>

<img border="0" height="0" width="0" src="http://i2.ytimg.com/vi/8Pjh0visgJI/0.jpg" />[/code]
Vấn đề này em có thể xem ở phần hướng dẫn của bên cung cấp template cho em nhe.

Admin
7/17/2012 04:45:00 SA Trả lời

Việc không cho hình ảnh hiển thị khi xem bài viết chi tiết thì em có thể dùng mẹo nhỏ là ẩn nó đi bằng cách thêm thuộc tính display:none; và trong style="" hoặc sử dụng height="0" width="0". Ví dụ:
[code]<img border="0" height="0" width="0" src="http://traidatmuidotcom.appspot.com/logo/logo-new-2012.gif" />

Hoặc
<img style="display:none;" src="http://traidatmuidotcom.appspot.com/logo/logo-new-2012.gif" />
Như vậy là đã có thể ẩn hình ảnh được rồi em.

7/17/2012 06:30:00 SA Trả lời

cái thủ thuật ẩn ảnh khi xem đơn giản thế mà em k nghĩ ra.hihi cám ơn anh nhiều.Anh thật nhiệt tình. :X

7/17/2012 06:43:00 SA Trả lời

ok rồi anh ơi.hi mày mò Blog cũng thấy cái thú vị :D

7/17/2012 06:48:00 SA Trả lời

Em giờ đang còn muốn anh giúp cho em 1 thủ thuật Video liên quan cho em nữa k biết em có đòi hỏi quá kô. Em muốn Blog này: http://www.x5nghiphu.name.vn/ của em có 1 tiện ích video liên quan mà nằm bên tay phải ý.Hihi nếu được thì em chân thành cám ơn.Hi.Cái template của http://www.x5nghiphu.name.vn/ đăng bài chỉ lấy đc video từ youtube mà thôi nà.

Admin
7/17/2012 06:14:00 CH Trả lời

Uhm tự mày mò sẽ biết được nhiều thứ hơn em

7/17/2012 09:11:00 CH Trả lời

Anh ơi xem em template này với.Em đăng Video từ Youtube nó kô hiện Video.template này post bài kiểu " [m]...[/m] ".
Demo em nè: http://www.bay68.co.cc/2012/07/ngay-xua-anh-noi_18.html
Em post đúng sao lại kô hiện thị.Chỉ có trang Zippyshare là đc thôi.Anh xem em với nhé

7/19/2012 03:04:00 SA Trả lời

Em muốn có 1 menu giống trang này của anh. :(

Admin
7/19/2012 07:38:00 SA Trả lời

Menu như của anh thì anh chưa có bài hướng dẫn, ở trang Fandung có bài hướng dẫn em tìm hiểu và tùy biến lại nhé. :)

8/19/2012 07:45:00 SA Trả lời

Nho ban huong dan cach tao trang web ban hang bang blogger duoc khong?Tren mang khong thay ai huong dan ca.

8/19/2012 07:46:00 SA Trả lời

Nho ban huong dan cach tao trang web ban hang bang blogger duoc khong?Tren mang khong thay ai huong dan ca.

Admin
8/19/2012 07:19:00 CH Trả lời

Để thiết kế được 1 Blogger Template đòi nhiều nhiều kiến thức về code, đồ họa... nhiều thứ lắm bạn chứ không đơn thuần vài thao tác là xong, nó kết hợp nhiều thứ lại nên rất phức tạp vì thế rất khó mà hướng dẫn thông qua những bài viết. Chỉ có cách bạn tự làm vấn đề gì chưa rỏ thì hỏi những người đi trước thôi.

Mình chỉ chia sẻ với các bạn thủ thuật thôi còn việc kết hợp chúng lại thế nào là ý tưởng của các bạn.

8/20/2012 03:04:00 SA Trả lời

Bạn ơi có bài nào hướng dẫn về cách tạo số lượt view cho bài viết ko anh

Admin
8/20/2012 09:29:00 CH Trả lời

Mình không có bài hướng dẫn về thủ thuật đó bạn ơi

11/09/2013 02:52:00 SA Trả lời

Anh ơi hướng dẫn em dùng cái newsticker cho jw player với!!! Em dùng cho blogger

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang