Recent Video Youtube với hiệu ứng Scroll ngang cho Blogspot

» 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://nguyenhoangnam.googlecode.com/files/JQuery.eva1.2.3.js.txt" type="text/javascript"></script>
<script type="text/javascript" src=" http://nguyenhoangnam.googlecode.com/files/jquery.easing.1.1.js"></script>
<script type="text/javascript" src=" http://nguyenhoangnam.googlecode.com/files/JQ.jCarouselLite.js.txt"></script>
<script type="text/javascript" src=" http://nguyenhoangnam.googlecode.com/files/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/AVvXsEgYE3q5ZzA97wCBxFgCxPFeEe3oB35dFo2m44bs5fxF7Ynu51LnKWEaNA12Y5cDG1Keq7TmpHgvoxIUY77Nop_fp4UA1vcf_aWeETyILXqT-xqjcP1BYzJERIwswJel8GwzcVr5BBB5u2-_/) 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/AVvXsEg_Lkt3fbAQJoyxrAYvW40aW_oGF_QfKiMXMIR3fqFq4i2dpaMUCWLYVgY98DQhJohjN6gcbMe0_NFgynqi2c3S4ZcMnIMW9rVpd7ltGy792X0mJgdnW4LrqYkBEhujDidLj69VFLCLXg3f/) 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