Trình diễn 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. Thủ thuật 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.

Ả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> hoặc trên 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/AVvXsEjCAAQXc-8hsjLtzY4rjeVaesO3FkMdgS0K1pse4JGvwg4jmrVFkmgv77twEBBq2-eLi0Gzn3HiwI1xGSYMTdQhNdkWSK0FisskDpbzF_AWGfLzxvks5OWDKvYzfCWq2maSlXOFN1oVrT8/) 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/AVvXsEiyUXjQ1Pwqvf47FNZbJR81S4kJ1u2K0-tDMemAOPJorMnlB__kf81225yf-Knx9BEwakW1Z6vwWcfv1JcgDudjcnD1G8DkiBzUXbBAe8plJsyOCvRey75fizKCQrGXIAiP1b-ceynrXiw/) -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/AVvXsEiyUXjQ1Pwqvf47FNZbJR81S4kJ1u2K0-tDMemAOPJorMnlB__kf81225yf-Knx9BEwakW1Z6vwWcfv1JcgDudjcnD1G8DkiBzUXbBAe8plJsyOCvRey75fizKCQrGXIAiP1b-ceynrXiw/) 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/AVvXsEhI-W6NS70WcLhTj7YF1uX56BBTZcL6Lee6s1PJ8Liu0fbzlJjpasHcUPlUl-V6ahKUpNv-25FmKesAsn3uRmv1z3MdaBDdd8owrmkomHlT3WVo7MkcUc9ZczewcB7Ubx7T7juoyUwvLw9-/";
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 = "Nhansu"; //thay thành tên nhãn của blog bạn
home_page = "http://cdqtkd5a.blogspot.com/"; //thay thành địa chỉ blog của bạn
</script>
<div class="slideHighlight">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5uuf-LTFaxsCg5zrUKL4w5VNXwGzLxV00kuyZHQOKLfWmg51VxM_BXjPWC0P52i69AXacMUW9UwQV8VAlukXV6-QRm7MrzMWr_zHjfFlwtoByka1cxX0m4-HDbmF6yrg_w8O8K5TmKt8/" 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.

Nếu các bạn muốn hiển thị bài viết cho toàn blog thì thay đoạn code sau

<script src="http://data-traidatmui.appspot.com/scripts/rescroll_label_new.js" type="text/javascript"></script>

thành đoạn code bên dưới:

<script src="http://data-traidatmui.appspot.com/scripts/rescroll_post_new.js" type="text/javascript"></script>

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

0 nhận xét:

Đăng nhận xét

» CĐQTKD5A cảm ơn bạn đã giành chút time để đọc bài viết.
» Nếu có thắc mắc hay góp ý, bạn hãy để lại một nhận xét.
» Nếu thấy bài viết hay hãy chia sẻ với những người thân, bạn bè biết.
» Vui lòng đăng những nhận xét lịch sự và gõ tiếng Việt có dấu.
» Những lời comment thiện ý của bạn sẽ giúp trang CDQTKD5A ngày một phát triển!