Tiện ích bài viết mới tự động cuộn ngang với 2 nút điều khiển như vnexpress.net
Thứ Hai, 23 tháng 9, 2013

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

Nếu bạn thường xuyên vào trang tin tức vnexpress.net thì chắc hẳn bạn cũng có để ý thấy ở cuối trang có một tiện ích trình bày về thông tin doanh nghiệp với hiệu ứng cuộn ngang với 2 nút điều khiển. Theo yêu cầu của bạn Goccanh thì hôm nay mình chia sẻ cùng các bạn thủ thuật tạo tiện ích với hiệu ứng tuong tự cho bài viết mới trong blogger. Hôm trước thì mình đã có giới thiệu thủ thuật cũng cuộn ngang với 2 nút điều khiển qua lại, tuy nhiên với thủ thuật trước thì nó không có tự động cuộn mà chỉ khi bạn click vào mũi tên nó mới di chuyển. Khác thủ thuật trước thì tiện ích này có thể tự động cuộn ngang sau một khoản thời gian nhất định,để thấy rỏ bạn có thể xem demo bên dưới.

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 sau 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_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/AVvXsEiVa0wfyCmVydOzFFFnQule5JDjljU7Q9voloD0o74SpPwE9twt1Dv8KiQV-ylj4rADIIs50WHRRy7_p0f95UPBL4rkqTYced3nb3pgKEULF03GCx4MfZsEvsfq7Q1E0gah040F2CN9G3w/) 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/AVvXsEjc5RCUd1QoYBpZ6-x9J2c8z3ehWKJ6b6KwqhSne-VvK8q0ctvTbsVhebDlb16R9GE1jZOMapJI01cG2Sk_wuf_AmHYr3rt4aqJbc24U6jIOCTf2DBCRM42CeGvIxJJVlEsIrXrQYIJSdo/) -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/AVvXsEjc5RCUd1QoYBpZ6-x9J2c8z3ehWKJ6b6KwqhSne-VvK8q0ctvTbsVhebDlb16R9GE1jZOMapJI01cG2Sk_wuf_AmHYr3rt4aqJbc24U6jIOCTf2DBCRM42CeGvIxJJVlEsIrXrQYIJSdo/) 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/AVvXsEizg-mW2LroI-xe2t2w8SH_wuD9baKEhoIrXA2Xfg4xWnO8PTgG6lURUv80LvWfSzIuvyTJ1fyOoux_3c1e0DDhf03k0MPAIXg5kSUImnfdTbYCLbC0RRCnHB8kIu1nJMD5oz1A68uWNexL/";
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/AVvXsEjBFxwcqAIW_HluNxf8lPYxpTmS7q7i2gfnWEgOSfOrND7mIBROx0MPdbbLXmR3HxbFN6j43tDz8Yb0cOS3sF3dJ0vk5tZQ_0QcF21utmOCWvebbUmyqLJlrhlTIshLZHtL8lkLn5CUc6k/" style="margin:0px 0px 0px 1px;"/>
<a href="#" class="vnenext"></a><a href="#" class="vneprev"></a>
<script src="http://data-traidatmui.appspot.com/scripts/rescroll_label.js" 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://data-traidatmui.appspot.com/scripts/rescroll_allpost.js


» 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://data-traidatmui.appspot.com/scripts/Jquery1.3.2.js"></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/AVvXsEiVa0wfyCmVydOzFFFnQule5JDjljU7Q9voloD0o74SpPwE9twt1Dv8KiQV-ylj4rADIIs50WHRRy7_p0f95UPBL4rkqTYced3nb3pgKEULF03GCx4MfZsEvsfq7Q1E0gah040F2CN9G3w/) 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/AVvXsEjc5RCUd1QoYBpZ6-x9J2c8z3ehWKJ6b6KwqhSne-VvK8q0ctvTbsVhebDlb16R9GE1jZOMapJI01cG2Sk_wuf_AmHYr3rt4aqJbc24U6jIOCTf2DBCRM42CeGvIxJJVlEsIrXrQYIJSdo/) -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/AVvXsEjc5RCUd1QoYBpZ6-x9J2c8z3ehWKJ6b6KwqhSne-VvK8q0ctvTbsVhebDlb16R9GE1jZOMapJI01cG2Sk_wuf_AmHYr3rt4aqJbc24U6jIOCTf2DBCRM42CeGvIxJJVlEsIrXrQYIJSdo/) 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/AVvXsEizg-mW2LroI-xe2t2w8SH_wuD9baKEhoIrXA2Xfg4xWnO8PTgG6lURUv80LvWfSzIuvyTJ1fyOoux_3c1e0DDhf03k0MPAIXg5kSUImnfdTbYCLbC0RRCnHB8kIu1nJMD5oz1A68uWNexL/";
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/AVvXsEjBFxwcqAIW_HluNxf8lPYxpTmS7q7i2gfnWEgOSfOrND7mIBROx0MPdbbLXmR3HxbFN6j43tDz8Yb0cOS3sF3dJ0vk5tZQ_0QcF21utmOCWvebbUmyqLJlrhlTIshLZHtL8lkLn5CUc6k/" 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://data-traidatmui.appspot.com/scripts/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://data-traidatmui.appspot.com/scripts/rescroll_post_new.js" type="text/javascript"></script>

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

Nguồn : traidatmui.com
Copy : CGC Blog
Khi copy, các bạn nhớ ghi rõ nguồn gốc. Xin chân thành cảm ơn!
Từ Khóa :

0 Bình Luận:

Đăng nhận xét

☺ Nội quy comments của CGC Forum :
1. Comments không được sử dụng lời lẽ thiếu văn hóa, ảnh hưởng xấu đến chính trị, tổ chức, cá nhân.
2. Không được sử dụng comments với mục đích spam.
Những comments làm trái quy định sẽ bị xóa...!
Xin cảm ơn các bạn đã đóng góp comments và tuân thủ nội quy của blog !
Notice by Admin

 
CGC Forum | Thủ Thuật © 2011 - 2012 by Tran Viet Duc
Top Page