» » Tiện ích Recent Video Youtube cho Blogspot
Người đăng: | 22/05/2011 | 03:26

Tiện ích Recent Video Youtube cho Blogspot

Điểm 4.6/5 dựa vào 87 đánh giá

(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ậ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>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/recent_video_youtube.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:&quot;alpha(opacity=70)&quot;;
-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>

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://data-traidatmui.appspot.com/scripts/recent_video_youtube.js

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

Tham khảo template BloggerTube

Chuyên mục:

15 nhận xét

  1. teeeeeee5/22/2011 02:01:00 SA

    bóc tem cái nào :d

    Trả lờiXóa
  2. MoigioiForex.Com5/23/2011 04:47:00 CH

    Dùng file php đếm số lượt view của ai vậy ?

    Trả lờiXóa
  3. K-N6/04/2011 10:49:00 CH

    Chao ban Trai Dat Mui.
    Sao cai hinh dai dien no khong nhu hinh minh hoa cua ban nhi??
    No chi hien http://i2.ytimg.com/vi/0mbjFgWEdDI/default.jpg
    Lam sao no cho no hien hinh dai dien nhu hinh minh hoa cua ban nhi?
    Thanks ban!

    Trả lờiXóa
  4. Công Nghệ Thủ Thuật6/12/2011 09:13:00 CH

    Nó hiển thị ảnh như bạn nói đó là do Video đó bị xóa hay Link bị trục trặc gì đó nên ảnh đại diện không hiện được

    Trả lờiXóa
  5. K-N6/13/2011 04:16:00 CH

    Cám ơn bạn đã trả lời.
    Mình đã kiểm tra lại link, link video vẫn bình thường.
    Nhưng không hiểu sao, không biết có bị xung đột code không bạn àh!
    Mình rất thích tiện ích này!

    Trả lờiXóa
  6. Công Nghệ Thủ Thuật6/13/2011 04:25:00 CH

    Nếu link vẫn hoạt động bình thường bạn hãy xem tên nhãn của bạn đã đúng chưa, tên nhãn phải giống như tên bạn đặt.

    Lưu ý là bài viết nào có Video Youtube thì mới hiển thị ảnh đại diện được nha bạn.

    Trả lờiXóa
  7. K-N6/13/2011 06:00:00 CH

    Label đúng hết bạn ah, Nó vẫn hiển thị đúng bài của Label video luôn, chỉ có điều nó không hiển thị hình ảnh đại diện thôi.
    Hix Hix

    Trả lờiXóa
  8. Công Nghệ Thủ Thuật6/14/2011 09:00:00 SA

    Vâng theo như bạn nói thì có thể do link Youtube bạn nhúng vào blog có thay đổi. Mình đã thử tìm hiểu và đã cập nhật lại bạn xem ở trên nhe.

    Trả lờiXóa
  9. K-N6/14/2011 11:30:00 CH

    Mình đã làm được rồi, nhưng mình phải sửa lại code JS củ của bạn.
    Link của mình có dạng : http://www.youtube.com/v/
    Và mình chỉnh sủa code JS : var vidid = postcontent.substring(postcontent.indexOf("http://www.youtube-nocookie.com/v/")+34,postcontent.indexOf("?fs=1&hl=en_US"));
    Thành code : var vidid = postcontent.substring(postcontent.indexOf("http://www.youtube.com/v/")+25,postcontent.indexOf("&"));
    Mò hoài mò mãi cuối cùng cũng chạy được. Thành thật cám ơn sự nhiệt tình của bạn rất nhiều.
    Mình không để lai Link Blog vì nó chưa hoàn thiện, mong bạn thông cảm.

    Trả lờiXóa
  10. Công Nghệ Thủ Thuật6/15/2011 10:39:00 SA

    Uhm chúc mừng bạn votay

    Trả lờiXóa
  11. Nặc danh10/23/2011 10:16:00 SA

    Banj oi neu muon no chay ngang thi lam the nao

    Trả lờiXóa
  12. Quản trị viên12/21/2011 08:11:00 CH

    Không được bạn ơi.
    Thay như K-N nói thì trong tiện ích đó hiện luôn cái video, chứ đâu phải là hình.
    Hình như Youtube chỉnh lại code rồi hay sao ấy mà hình nó không hiển thị nữa rồi.
    Bạn xem giúp lại nhé. Cám ơn bạn nhiều

    Trả lờiXóa
  13. BQT10/09/2012 03:19:00 SA

    cái này ko dùng đc

    Trả lờiXóa
  14. Unknown12/13/2012 08:05:00 CH

    fix thành
    var vidid = postcontent.substring(postcontent.indexOf("http://www.youtube.com/v/")+25,postcontent.indexOf("&"));

    dùng cho video bình thường nhưng những dạng video hd thì thua ko view dc

    Trả lờiXóa
  15. NGUYEN PHUC7/24/2015 04:20:00 CH

    Bạn ơi bên mình có dịch vụ Đăng tin tự động lên groups trên facebook miễn phí bạn xem qua nhé. miễn phí 100%
    Ngoài ra các bạn có thể đọc tin tức tại Kênh tin tức giải trí yeubao.com
    Các bạn có thể truy cập link sau để xem thông tin công nghệ
    Khoinguoncongnghe.net | kênh thông tin dành cho tín đồ công nghê
    cám ơn bạn đã đọc
    đăng tin tự động trên facebook miễn phí 100% xem tại Đăng tin tự động lên groups trên facebook miễn phí
    xem thủ thuật blogspot, thủ thuật blogger, thủ thuật facebook tại thủ thuật tổng hợp facebook, blogger,coputuer
    xem tin tức giới trẻ, các tin nổi bật tin tức nổi bật, tin sao, tin giới trẻ, đời sống xã hội
    xem thong tin giải trí, cung hoàng đạo, tại bí mật 12 chòm sao,tâm sự,blog tâm sự

    giải trí thư giã relax giải trí thư giãn relax
    khám phá du lịch, bi ẩn khám phá du lịch, bí ẩn
    kho video giải trí khổng lồ video đời sống xã hội, video giải trí
    khởi nguồn công nghệ, xem tin tức công nghệ, tin tức internet
    tin tức internet
    Tin tức itc , tin tức technogoy tin tức ict

    Khám phá công nghệ
    khám phá

    Thủ thuật công nghê thủ thuật công nghệ, tips





    Trả lờiXóa