"Tiện ích Recent Video Youtube với hiệu ứng Scroll ngang cho Blogspot"

(Traidatmui.com) – Mình đã từng chia sẻ cùng các bạn thủ thuật tạo tiện ích Recent Video của Youtube cho Blogspot (Bạn có thể xem tại đây), tuy nhiên bài viết trước mình chỉ cho tiện ích này hiển thị ở dạng tĩnh đơn giản. Bài viết hôm nay mình sẽ giới thiệu cho các bạn thủ thuật tạo Recent Video Youtube với hiệu ứng chạy ngang trông đẹp mắt hơn. Tiện ích này mình đã chỉnh sửa code JS để phù hợp với mọi link Youtube, bạn không cần phải lo lắng với sự thay đổi link file của youtube như bài viết trước.

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 trước thẻ </head>
<script src="http://data-traidatmui.appspot.com/scripts/JQuery.eva1.2.3.js" type="text/javascript"></script>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/jquery.easing.1.1.js"></script>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/JQ.jCarouselLite_2.js"></script>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/jCarouselLite_videoytbfixed.js"></script>
<script type="text/javascript">
$(function() {
$(".jCarouselLite").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
speed: 500, //tốc độ scroll
auto:5000, //thời gian tự động scroll
visible:5, //số bài viết hiển thị
scroll:5, //số bài viết 1 lần scroll qua
easing: "easeinout"
}); });
</script>

5. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>
.jCarouselLite {
float: left;
position: relative;
isibility: hidden;
left: -5000px;
}
.carousel a.prev{
float: left;
width: 23px;
height: 143px;
margin-right:-6px;
background: url(https://lh6.googleusercontent.com/_BTztXRwC9ik/TdiuorWP9AI/AAAAAAAAIYM/q1rCChiB4VQ/imageNavLeft.gif) left 60px no-repeat;
}
.carousel a.next {
float: left;
margin-left:-6px;
width: 23px;
height: 143px;
background: url(https://lh4.googleusercontent.com/_BTztXRwC9ik/TdiuontVkmI/AAAAAAAAIYQ/moCmlg70QcA/imageNavRight.gif) right 60px no-repeat;
}
.recentvideo-youtube {
float:left;
padding:0px 3px 5px 2px;
font-size:11px;
line-height:1.2em;
display:block;
width:114px;
height:145px;
background:#fff;
-moz-border-radius-topright: 7px;
-moz-border-radius-topleft: 7px;
-moz-border-radius-bottomright: 7px;
-moz-border-radius-bottomleft: 7px;
border:1px solid #ddd;
margin-right:3px;
text-align:center;}
.recentvideo-youtube a {
font-weight:bold;
text-decoration:none;
color:#333;}
.recentvideo-youtube a:hover{
color:#666;
text-decoration:underline;}
.datetextcm {
font-size:11px;
color:#333;
}
.video_thumb {
border:1px solid #fff;
margin-left:2px;
margin-top:1px;
float:left;
width:105px;
height:90px;
padding:2px;
float:left;
}
.video_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;
}

6. Save template lại và trở về phần tử trang (Page Elements)
7. Chọn thêm tiện ích (Add a Gadget)
8. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<script type="text/javascript">
var numposts = 10; //số bài viết tối đa 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;
label = "Xem hai"; //tên nhãn bài viết của blog bạn
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn
</script>
<div class="carousel">
<a href="#" class="prev"></a>
<div class="jCarouselLite">
<script type="text/javascript">
document.write("<script src=\""+home_page+"feeds/posts/default/-/"+label+"?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs\"><\/script>");</script>
</div>
<a href="#" class="next"></a>
</div>

9. Save tiện ích lại là xong

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

Xem khác cùng chủ đề

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

7/12/2011 12:43:00 SA Trả lời

đưa nhầm link demo rồi anh ơilleu

7/12/2011 06:37:00 SA Trả lời

Demo ngay ở trang chủ Blog này đó Cuoilon

7/12/2011 07:17:00 SA Trả lời

Sao ko áp dụng được vào blog của mình nhỉ
lamgiautuforex.blogspot.com

7/15/2011 04:29:00 SA Trả lời

thủ thuật đẹp nhưng hoi nặng Cuoilon

7/20/2011 07:11:00 CH Trả lời

chào traidatmui! bạn thật có trí tuệ và khả năng cống hiến. thủ thuật này hay và nếu như áp dụng thành công. Như các bạn biết, thủ thuật tạo You tube này KHÔNG THỂ DÙNG ĐƯỢC CHO WEB / BLOGEER. MONG BẠN CHỈNH SỬA LẠI.
CHÚC BẠN THÀNH CÔNG.
http://www.vedepphatphap.com/

Admin
7/27/2011 09:37:00 CH Trả lời

Thủ thuật này mình đã test lại, nó vẫn hoạt động bình thường. Nếu bạn gặp vấn đề không hiển thị được thì bạn có thể đưa code ở bước 4 vào HTML/Javascript cùng với code bước 8.

Ngoài ra nếu bạn gặp vấn đề khó khăn thì có thể mô tả rỏ ràng cụ thể để mình có thể giúp bạn khắc phục.

Chúc bạn thành công. =L:

7/31/2011 08:49:00 CH Trả lời

Mình đã làm giống như các bước mà bạn hướng dẫn nhưng vẫn không hiển thị được.Sau khi làm xong thì trên trang chủ không còn hiển thị bài viết nữa
http://i1099.photobucket.com/albums/g386/rogerminh2401/untitled2.jpg
Bạn xem giúp mình nhé!

Admin
8/05/2011 02:17:00 SA Trả lời

Mình đã test lại rất nhiều lần nó vẫn hiển thị tốt. Còn việc trang chủ của bạn không hiển thị bài viết đó không phải do thủ thuật này vì mình không thay thế code nào cả. Bạn hãy xem lại đã có sai sót ở bước nào không nhe.

8/18/2011 11:11:00 CH Trả lời

Có tiện ích nào recent post bằng hình ảnh với hiệu ứng Scroll ngang như cái này không bạn.
Mình tìm mãi chả thấy

Admin
8/19/2011 05:10:00 SA Trả lời

Hiện tại mình đang test thủ thuật của bạn,bạn theo dõi có thể mình sẽ post vào ngày mai đấy bạn.

9/08/2011 08:12:00 SA Trả lời

MÌnh cũng bị giống bạn rogerminhmmo2401 luôn . Bài viết k hiển thị được gì hết, tốc độ load trang giảm rõ rệt . Không biết do sao nữa hic

9/08/2011 08:25:00 SA Trả lời

Ak. Cái này vào DEMO copy phần scrip + DIV và past vào tiện ích là ok ^_^ (bước 8). Nếu copy và paste đoạn mã ở bước 8 đó vào thì ko được .

Admin
9/08/2011 08:37:00 SA Trả lời

Z là có thể tên nhãn của bạn chưa chính xác, vì tên nhãn mình dùng code trên chỉ là ví dụ không phải là nhãn thật vì trên trang mình post video k phải theo kiểu copy past code Youtube nên phần demo sử dụng JS có chỉnh sửa hơi khác đó bạn.

9/10/2011 02:22:00 SA Trả lời

Bn ơi làm sao để hiển thị ảnh tthumbnails của youtube nhỉ ?

Admin
9/10/2011 03:17:00 SA Trả lời

Vâng mình thật xin lỗi các bạn vì thời gian qua đã không phát hiện ra lỗi đối với tiện ích này khiến các bạn gặp rắc rối khi thực hiện thủ thuật cho blog của các bạn.

Hôm nay mình đã phát hiện có một lỗi nhỏ trong file JS và đã fixed, bây giờ các bạn có thể thực hiện lại. Có gì không rỏ hay trục trặc gì có thể để lại comment ở đây để mình khắc phục nhe.

Bạn Sophie Paris Vietnam thực hiện lại thủ thuật này sẽ hiện thị được ảnh thumbnail

Tuy nhiên các bạn lưu ý code được nhúng vào blog phải là dạng Old Embed Code của Youtube không phải Iframe nhe.

ví dụ:

<object width="420" height="345"><param name="movie" value="http://www.youtube.com/v/FD7YCXvW0zc?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/FD7YCXvW0zc?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="420" height="345" allowscriptaccess="always" allowfullscreen="true"></embed></object>

9/10/2011 03:49:00 SA Trả lời

Hay ta . Tks bác ADMIN fix lỗi chuẩn ^_^

3/12/2012 06:52:00 SA Trả lời

Hic, link file js die sạch thảo nào mình làm ko đc, bác up lại đc ko. Thanks, bác nhiều!

5/07/2012 03:32:00 SA Trả lời

bn ơi up lại file js đi hichic

Admin
5/07/2012 03:45:00 SA Trả lời

File js hoạt động bình thường mà bạn

6/03/2012 12:08:00 SA Trả lời

Trai Đất Mũi ơi có cái tiện ích nào nó hoạt động mà nó đứng im hiển thị 8 video như một trang trình diễn photo ko bạn :d cái này chạy nhanh quá chóng hết cả mặt mà hơi nhỏ à cái này tạo tiện ích bài viết liên quan thì đẹp quá

Admin
6/03/2012 02:02:00 SA Trả lời

Nếu bạn muốn dạng tĩnh có thể xem bài viết tại đây.

Còn với tiện ích này bạn có thể thay đổi thời gian lại với 2 biến:

speed: 500, //tốc độ scroll
auto:5000, //thời gian tự động scroll

6/03/2012 02:46:00 SA Trả lời

Không có trang tĩnh mà trình chiếu hàng ngang như thế này sao???

Admin
6/03/2012 03:23:00 SA Trả lời

Có bài này rồi thì đâu cần thêm bài như thế nữa bạn, nếu bạn không muốn nó tự động chạy thì bạn chỉ cần thay auto:5000, thành auto:false, là được rồi bạn.

7/06/2012 07:08:00 CH Trả lời

một điểm dở là xài recen youtube không hiển thì hình ảnh video từ nguồn khác, hoặc hình ảnh. chỉ hiển thị với youtube

7/17/2012 08:50:00 SA Trả lời

cái này có hiện thị với template post bài youtube dạng:
" endofvid
[starttext]

[endtext] "
kô anh

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

Dạng đó thì phải chỉnh Script lại chứ code trên không dùng được em.

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

ko đc bạn ạ loàm đủ mọi cách rùi

Admin
10/08/2012 06:59:00 CH Trả lời

Nó báo thế nào vậy bạn nói rỏ hơn mình mới có hướng giải quyết cho bạn được

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