10/14/2011

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

Hình ảnh minh họa

» Bắt đầu thủ thuật
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://traidatmui-tips.googlecode.com/files/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/AVvXsEhhLqhSRCVGYCZI61q3qt3zHjBQMmGE6f2n_9muHvY2jJtByT1mmjsfRbIJEEJuU4pSgn9fJ7MDV03As5H8uXgpUJQduYR8m9Q3dmudjssE3Ejub2H1pgQGnbpI-jMSMNCYDFQHlQT8vyY/) 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/AVvXsEgn7Oo2aJaKhBBYqHOJ_fv5vF70TifYiZqg097fOLTVU3Q8t6_Wlj871EbXiRekSvyndl1kyEY10N1Vgj5qG7IwzXgiLu89QwwEl1EhDC4nn2ofvzdwBEHsKh7A9MNafzFPLE9C2CIv_BM/) -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/AVvXsEgn7Oo2aJaKhBBYqHOJ_fv5vF70TifYiZqg097fOLTVU3Q8t6_Wlj871EbXiRekSvyndl1kyEY10N1Vgj5qG7IwzXgiLu89QwwEl1EhDC4nn2ofvzdwBEHsKh7A9MNafzFPLE9C2CIv_BM/) 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/AVvXsEgLL5aIOBSEgXRAxzMU0cQJWAVHAIsRF8aUxWh3mHwSnL3Jn-Imu6Z7hPiZrK7RkcDkk-z05KDFsyT7skQi_T3GnTnJLd_HaOHLmUZoMk1cgsMRcgwqshUKYNjWMb-G7S3sdOYRhiiD6gc4/";
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/AVvXsEh0sOheZm7XY-zdnAZTmF037Onat81hR-iGynWJDlXXIQRPG8sR9L8Tq8JajjvO2ievnCKeOGlSnNyaSpYug6D-Kn6eHtd-EDxTzXt_MN8gcDKa_aDOBVgY-HXltRQrEza_GHjwk9te0zY/" 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://traidatmui-tips.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://traidatmui-tips.googlecode.com/files/rescroll_post_new.js" type="text/javascript"></script>

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

Share this post

0 nhận xét

:)

:-)

:))

=))

:(

:-(

:((

:d

:-d

@-)

:p

:o

:>)

(o)

[-(

:-?

(p)

:-s

(m)

8-)

:-t

:-b

b-(

:-#

=p~

:-$

(b)

(f)

x-)

(k)

(h)

(c)

cheer

© 2011 Luat1x1
Designed by BlogThietKe Cooperated with Duy Pham
Released under Creative Commons 3.0 CC BY-NC 3.0

Posts RSS ∙ Comments RSS
Back to top