728x100 AdSpace

Home > thu-thuat > Bài viết mới tự động cuộn ngang với 2 nút điều khiển như vnexpress.net

Bài viết mới tự động cuộn ngang với 2 nút điều khiển như vnexpress.net


» 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 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_fixed2.js"></script>

<script type="text/javascript">
$(function() {
$(".jQCarouselLitevn").jQCarouselLitevn({
vnNext: ".vnenext",
vnPrev: ".vneprev",
speed: 500,
auto:5000,
visible:5, //số bài viết hiển thị
scroll:5, //số bài viết 1 lần cuộn qua
easing: "easeinout"
}); });
</script>

5. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>
.jQCarouselLitevn {
float: left;
position: relative;
left: -5000px;
background: #e3e4e5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwZnFIy50GiK8JLVKM3oI4TZhgUMiUyXa6uHVqQBuUs1-j2cJdYQd5Ro8BgiQqGab__sDVy_WOXR4l7YB9Yf_sch7SLHXjNp0PBfx5TqzwCU9jm-O8n9AcOI6nKAYBauaEZHs9FuuFfhg/) repeat-x 0px 1px;
-moz-border-radius-topright: 7px;
-moz-border-radius-topleft: 7px;
-moz-border-radius-bottomright: 7px;
-moz-border-radius-bottomleft: 7px;
height:120px;
}
.carousel a.vneprev{
float: right;
margin:8px 3px 0px 0px;
width: 13px;
height: 10px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj69RwM3wmmQycRe-MT-u7siRBLLTIWCrSF-60PGb6Zc8oi500BioQOoDIBzo2R1ZkkxpeR_kTcz6kVXJGKdTa3BbbzNxWqVF3eIVV8ATVPtBPgpd7H04bzgv_tIrfl_7slSN7qx7h62Bg/) -10px 0px no-repeat;
}
.carousel a.vnenext {
float: right;
margin:8px 15px 0px 0px;
width: 13px;
height: 10px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj69RwM3wmmQycRe-MT-u7siRBLLTIWCrSF-60PGb6Zc8oi500BioQOoDIBzo2R1ZkkxpeR_kTcz6kVXJGKdTa3BbbzNxWqVF3eIVV8ATVPtBPgpd7H04bzgv_tIrfl_7slSN7qx7h62Bg/) 0px 0px no-repeat;
}
.re_hscrollpost {
font-family:arial;
float:left;
padding:0px 3px 5px 2px;
font-size:12px;
line-height:1.3em;
display:block;
width:200px;
height:87px;
border-right:1px dashed #ddd;
margin-top:-1px;
text-align:left;}

.re_hscrollpost a {
line-height:1.1em;
font-size:11px;
font-weight:bold;
text-decoration:none;
color:#333;}
.re_hscrollpost a:hover{
color:#666;
text-decoration:underline;}

.re_hscrollimg {
border:1px solid #ccc;
margin-right:4px;
float:left;
width:80px;
height:83px;
padding:2px;
float:left;
}

6. Save template lại và trở về phần tử trang (Page Elements)
7. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj04dif5kbnu82fVC6TtFeSngULu_2R8l1h2FStDbc8YdTOdBBADw5FYkmJfvzV5dg14gMkIlTUJPagxVkSNr2vQpshOpJlIIpS9drbgeSV8nVczPN7pwRAdAyQ6CpqwAW4b8KDcLf-JDnf/";
showRandomImg = true;
aBold = true;
text = "";
showPostDate = true;
summaryPost = 50; //số kí tự phần tóm tắt
numposts = 15; //số bài viết hiển thị
label = "Advanced blogger"; //thay thành tên nhãn 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">
<div class="jQCarouselLitevn">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaXqlFhjjwwus4YSl31_Yl03pWKqVv_qxbiEzfdIyAL_pjkRv008Yhjp4RC0tuR08kA0H-iosYJz5Rj3cALDEdTUrCBmjWWs0CyT0nmq74D3uRQV6ewvj2o54BIEuVYxB9j_0TO20PewA/" style="margin:0px 0px 0px 1px;"/>
<a href="#" class="vnenext"></a><a href="#" class="vneprev"></a>
<script src="http://nguyenhoangnam.googlecode.com/files/rescroll_label.js.txt" type="text/javascript">
</script>
</div> </div>

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

Nếu muốn hiển thị cho tất cả bài viết bạn thay file JS (rescroll_label.js) trên thành file bên dưới
http://nguyenhoangnam.googlecode.com/files/rescroll_allpost.js.txt


» Cập nhật 12/10/2011

Như các bạn đã thấy với tiện ích ở trên chúng ta sử dụng khá nhiều file JS nên có thể gây một số xung đột với các code có sẵn trên blog của bạn và ảnh hưởng tốc độ load trang. Chính vì thế để có thể giúp các bạn dễ dàng sử dụng tiện ích này thì hôm nay mình xin cập nhật lại thủ thuật này với việc giảm số file JS, và dễ dàng thực hiện hơn. Các bước thực hiện như bên dưới:

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> hoặc trước thẻ </head>
<script type="text/javascript" src="http://nguyenhoangnam.googlecode.com/files/Jquery1.3.2.js.txt"></script>
<script language="javascript" type="text/javascript">
var currenttab = 1;
var maxtab = 3; // số tab cuộn qua ví dụ bạn có 15 bài thì chọn là 3, 20 bài chọn 4...
var round_t = setTimeout("roundHotNews()",5000); //thời gian bài viết tự động scroll
/* <![CDATA[ */ function slide_forward() {
currenttab++;
if (currenttab > maxtab) currenttab = 1;
if (currenttab <= maxtab) {
var leftpx = (currenttab-1) * (-1040);
$('#slide_animation').animate({ left: leftpx }, 500);
}
clearTimeout(round_t);
}
function slide_backward() {
currenttab--;
if (currenttab < 1) currenttab = maxtab;
if (currenttab >= 1) {
var leftpx = (currenttab-1) * (-1040);
$('#slide_animation').animate({ left: leftpx }, 500);
}
clearTimeout(round_t);
}

function roundHotNews()
{
if(currenttab == 1) currenttab=2;
else if(currenttab == 2) currenttab=3;
else if(currenttab == 3) currenttab=1;
if (currenttab >= 1) {
var leftpx = (currenttab-1) * (-1040);
$('#slide_animation').animate({ left: leftpx }, 500);
}
round_t = setTimeout("roundHotNews()",5000); //thời gian bài viết tự động scroll
}/* ]]> */
</script>

<style>
.slideHighlight {
color:#000;
width: 1040px; /* độ rộng của tiện ích*/
background: #e3e4e5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwZnFIy50GiK8JLVKM3oI4TZhgUMiUyXa6uHVqQBuUs1-j2cJdYQd5Ro8BgiQqGab__sDVy_WOXR4l7YB9Yf_sch7SLHXjNp0PBfx5TqzwCU9jm-O8n9AcOI6nKAYBauaEZHs9FuuFfhg/) repeat-x 0px 1px;
-moz-border-radius-topright: 7px;
-moz-border-radius-topleft: 7px;
-moz-border-radius-bottomright: 7px;
-moz-border-radius-bottomleft: 7px;
height:120px;}
.slideHighlight .viewpost{float:left;width: 100%;height:120px;overflow:hidden;padding:0px;}
.slideHighlight .viewpost .view {float:left;width: 100%;height:120px;overflow:hidden;position:relative}
#slide_animation{left:0;position:absolute;top:0}
.slide{float:left;width:5000px;}
.vnscrollitem{
font-family:arial;
float:left;
padding:3px 3px 5px 4px;
font-size:12px;
line-height:1.3em;
display:block;
width:200px; /* độ rộng mỗi bài viết*/
height:87px; /* chiều cao của mỗi bài viết*/
border-right:1px dashed #ddd;
margin-top:-1px;
text-align:left;}

.slidebackward{
cursor:pointer;
float: right;
margin:8px 3px 0px 0px;
width: 13px;
height: 10px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj69RwM3wmmQycRe-MT-u7siRBLLTIWCrSF-60PGb6Zc8oi500BioQOoDIBzo2R1ZkkxpeR_kTcz6kVXJGKdTa3BbbzNxWqVF3eIVV8ATVPtBPgpd7H04bzgv_tIrfl_7slSN7qx7h62Bg/) -10px 0px no-repeat;
}
.slideforward {
cursor:pointer;
float: right;
margin:8px 15px 0px 0px;
width: 13px;
height: 10px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj69RwM3wmmQycRe-MT-u7siRBLLTIWCrSF-60PGb6Zc8oi500BioQOoDIBzo2R1ZkkxpeR_kTcz6kVXJGKdTa3BbbzNxWqVF3eIVV8ATVPtBPgpd7H04bzgv_tIrfl_7slSN7qx7h62Bg/) 0px 0px no-repeat;
}
.vnscrollitem a {
line-height:1.1em;
font-size:11px;
font-weight:bold;
text-decoration:none;
color:#333;}
.vnscrollitem a:hover{
color:#666;
text-decoration:underline;}

.vnscrollitemimg {
border:1px solid #ccc;
margin-right:4px;
float:left;
width:80px;
height:83px;
padding:2px;
float:left;
}</style>

5. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj04dif5kbnu82fVC6TtFeSngULu_2R8l1h2FStDbc8YdTOdBBADw5FYkmJfvzV5dg14gMkIlTUJPagxVkSNr2vQpshOpJlIIpS9drbgeSV8nVczPN7pwRAdAyQ6CpqwAW4b8KDcLf-JDnf/";
showRandomImg = true;
aBold = true;
text = "";
showPostDate = true;
summaryPost = 50; //số kí tự phần tóm tắt
numposts = 15; //số bài viết hiển thị
label = "Advanced blogger"; //thay thành tên nhãn của blog bạn
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn
</script>
<div class="slideHighlight">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaXqlFhjjwwus4YSl31_Yl03pWKqVv_qxbiEzfdIyAL_pjkRv008Yhjp4RC0tuR08kA0H-iosYJz5Rj3cALDEdTUrCBmjWWs0CyT0nmq74D3uRQV6ewvj2o54BIEuVYxB9j_0TO20PewA/" style="margin:0px 0px 0px 1px;"/>
<div onclick="slide_forward()" class="slideforward"></div><div onclick="slide_backward()" class="slidebackward"></div>
<div class="viewpost"><div class="view"><div class="slide" id="slide_animation">
<script src="http://nguyenhoangnam.googlecode.com/files/rescroll_label_new.js" type="text/javascript"></script>
</div></div></div></div>

6. Cuối cùng bạn save tiện ích lại là xong

Và mình cũng cung cấp cho các bạn file JS dành cho bạn muốn hiển thị bài viết cho toàn blog.
<script src="http://nguyenhoangnam.googlecode.com/files/rescroll_post_new.js" type="text/javascript"></script>

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



  • Blogger Comments
  • Facebook Comments

0 nhận xét:

Đăng nhận xét

Item Reviewed: Bài viết mới tự động cuộn ngang với 2 nút điều khiển như vnexpress.net Rating: 5 Reviewed By: Unknown
Đăng ký: Đăng Nhận xét (Atom)
Scroll to Top