"Tiện ích Recent Video Youtube cho Blogspot"

(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

Xem khác cùng chủ đề

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

5/21/2011 12:01:00 CH Trả lời

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

5/23/2011 02:47:00 SA Trả lời

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

K-N
6/04/2011 08:49:00 SA Trả lời

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!

Admin
6/12/2011 07:13:00 SA Trả lời

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

K-N
6/13/2011 02:16:00 SA Trả lời

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!

Admin
6/13/2011 02:25:00 SA Trả lời

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.

K-N
6/13/2011 04:00:00 SA Trả lời

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

Admin
6/13/2011 07:00:00 CH Trả lời

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.

K-N
6/14/2011 09:30:00 SA Trả lời

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.

Admin
6/14/2011 08:39:00 CH Trả lời

Uhm chúc mừng bạn votay

Nặc danh
10/22/2011 08:16:00 CH Trả lời

Banj oi neu muon no chay ngang thi lam the nao

Admin
10/22/2011 08:35:00 CH Trả lời

Bạn tham khảo bài viết tại đây

12/21/2011 05:11:00 SA Trả lời

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

10/08/2012 01:19:00 CH Trả lời

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

12/13/2012 05:05:00 SA Trả lời

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

7/24/2015 02:20:00 SA Trả lời

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





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