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

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX70yR55WnKLcU-w__GI2zwGltKFxtKHRXzEX_OLJmnCaT-sWzzSw_Y9gohHjf_BnOTX6h2bYMMOmkMSrfLFdOBMOHzwQPFvBkYORZ_n03XdmlQfDTNZVg7xUVvNUrjbaqKmurE_MnCQdP/) left 60px no-repeat;
}
.carousel a.next {
float: left;
margin-left:-6px;
width: 23px;
height: 143px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhewQTZ4zK7cqI-2OqCeWOKmKdvfbWJk2kyPpbikps7qvh4bZe6kzxSZhFM1h2BHYCwWT8ylOWotZeIUFKVOfJHZZD4I-m9p7dLtoO4JHGVIhdE4dmP7agi8oIbLiP6vuvUxm2GGLPNFKf1/) 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


Nguồn: TRAIDATMUI.com