Home » TTNC
Thứ Tư, 21 tháng 12, 2011
Tiện ích Recent Video Youtube với hiệu ứng Scroll ngang cho Blogspot

Hình ảnh minh họa

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://traidatmui-tips.googlecode.com/files/JQuery.eva1.2.3.js" type="text/javascript"></script>
<script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/jquery.easing.1.1.js"></script>
<script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/JQ.jCarouselLite.js"></script>
<script type="text/javascript" src="http://traidatmui-tips.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>
<script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/jquery.easing.1.1.js"></script>
<script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/JQ.jCarouselLite.js"></script>
<script type="text/javascript" src="http://traidatmui-tips.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/AVvXsEjfb7Fuf6m69Y2oWd3XrlaBbwfJZkAj0EC7JgVZTCB4PsfXADCzMt-KswGltoVH9vr5u4lEFoaxTEQeoNZ-AkASih1uxYm1OjJVo_XayXJiwCbdo48n_NDxAfMJSjMAhsi6IiPjFjiihh1S/) 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/AVvXsEhYFTQLR2_-gdPQ9cyYwhf3pRs926gnIfmUDvVSRrb9kmqzwBaYgIXR_Hb5Kbung_ofE1Yt5FRieiMS0r9gl5VcLstWMxHLOH5kkPNnpVX_jPs6_YdlSRmRu9ymJKcrok1qayqH3ZnwPSDg/) 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;
}
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/AVvXsEjfb7Fuf6m69Y2oWd3XrlaBbwfJZkAj0EC7JgVZTCB4PsfXADCzMt-KswGltoVH9vr5u4lEFoaxTEQeoNZ-AkASih1uxYm1OjJVo_XayXJiwCbdo48n_NDxAfMJSjMAhsi6IiPjFjiihh1S/) 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/AVvXsEhYFTQLR2_-gdPQ9cyYwhf3pRs926gnIfmUDvVSRrb9kmqzwBaYgIXR_Hb5Kbung_ofE1Yt5FRieiMS0r9gl5VcLstWMxHLOH5kkPNnpVX_jPs6_YdlSRmRu9ymJKcrok1qayqH3ZnwPSDg/) 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>
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
You may also...
Hot
-
(Traidatmui.com) – Hiện nay có rất nhiều trang website cung cấp cho bạn host miễn phí tuy nhiên không phải hosting nào cũng tốt, cũng đảm...
-
Bài 2 hướng dẫn sử dụng phần mềm Simatic S7.200 để viết chương trình điều khiển cho PLC. Ngoài ra, cũng hướng dẫn sử dụng phần mềm Simulator...
-
Bài 1 trình bày tổng quan về PLC S7.200, cấu trúc phần cứng, phương thức hoạt động của PLC S7.200. Đồng thời nêu những ưu điểm khi các nhà...
-
Babylon là phần mềm từ điển và dịch thuật hàng đầu thế giới, cung cấp cho bạn công cụ trực quan nhất cho mọi nhu cầu dịch thuật của mìn...
-
[FD's BlOg] - Footer của bài viết có chứa tiện ích như : Người đăng, thời gian post bài, nhãn comment... Các bạn có thể chỉnh sửa the...
-
Giáo trình Máy điện - Khí cụ điện trình bày cơ bản về các nguyên lý và cấu tạo của các loại máy điện như: Máy biến áp; Máy điện không đồng b...
-
Có khá nhiều bạn thắc mắc, gửi yêu cầu cho tôi về cách cài đặt phần mềm cho PLC của Mitsubishi. Tuy nhiên, vì quá bận nên tới nay mới hướng ...
-
Với việc sử dụng mootools thì thanh HotNews sẽ trở nên pro hơn nhiều, mặc định các bài viết sẽ tự động luân chuyển trong 1 khoảng thời g...
-
SN-MS) - Đã có key mới cho Kaspersky Đức (91 ngày), ai chưa có thì vào đây tải về. Bài này mình chỉ hướng dẫn cách kích hoạt Key mới tháng ...
-
[FD's BlOg] - Một vài lệnh đơn giản từ CSS kết hợp với tiện ích " Recent posts " sẽ tạo cho bạn 1 thanh tin tức đơn giản. Do...
Comments[ 0 ]
Đăng nhận xét