"Tiện ích bài viết mới cuộn ngang với 2 nút điều khiển"

(Traidatmui.com) – Được một bạn yêu cầu tạo một tiện ích bài mới với 2 nút điều khiển cuộn qua lại giống với tiện ích "NỔI BẬT" của trang web vn.news.yahoo.com, hôm nay mình chia sẻ cùng mọi người thủ thuật này. Với thủ thuật này thì chúng ta có thể trình diễn bài viết cuộn theo hàng ngang với 2 nút điều khiển qua lại hiệu ứng bằng JQuery trông khá mướt. Để không mất thời gian chúng ta sẽ đi ngay vào thủ thuật này, và muốn thấy rỏ hơn thì bạn có thể xem demo trước khi thực hiện thủ thuật này.

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> hoặc trước thẻ </head>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/Jquery1.3.2.js"></script>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/recent_jcarousel_yahoo.js"></script>
<script type="text/javascript">
jcarousel.setup({
galleryid: 'container',
beltclass: 'belt',
contentclass: 'content',
contentbehavior: {speed:500, wraparound:true, wrapbehavior:'pushpull', persist:false},
defaultbuttons: {enable: false, moveby: 1, leftnav: ['', -10, 300], rightnav: ['', -10, 100]},
statusvars: ['firstnum', 'lastnum', 'totaltnum'],
contenttype: ['inline']
})
</script>

<style type='text/css'>
.allcontainer {
font-size:12px;
font-family:arial;
color:#090404;
width: 640px; /*độ rộng của tiện ích*/
padding-top:6px;
background:#fff; /*màu nền của tiện ích*/
}
.jcarousel{
position: relative;
order-top: 1px solid #333;
overflow: scroll;
padding:0px;
margin-top:0px;
width: 640px;
height: 185px; /*chiều cao của phần nội dung*/
}
.content h2 {
font-size:13px;line-height:1.2em;background:transparent;
margin:0px;}
.content h2 a{text-shadow:1px 1px 1px #ccc;color:#000;}
.content h2 a:hover{color:#666;}

.containerImg{float:left;
margin-right:5px;
padding:2px;
border: 1px solid #ccc;}
.jcarousel .belt{
position: absolute;
left: 0;
top: 0;
}
.jcarousel .content{
float: left;
overflow: hidden;
margin: 0px 6px 5px 5px;
width: 312px;
}
.prev{
margin-top:-5px;
width: 20px;
height: 24px;
float:right;
padding:6px;
background: url(https://lh6.googleusercontent.com/-hessCUkLH14/TkNckajRUzI/AAAAAAAAAf4/ACR9tMA6ZS4/nav.png) 0px 0px no-repeat;}
.next{
margin-top:-5px;
width: 27px;
height: 24px;
float:right;
padding:6px;
background: url(https://lh6.googleusercontent.com/-hessCUkLH14/TkNckajRUzI/AAAAAAAAAf4/ACR9tMA6ZS4/nav.png) -32px 0px no-repeat;}
</style>

5. Save template lại và trở về phần tử trang (Page Elements)
6. Chọn thêm tiện ích (Add a Gadget)
7. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://lh6.ggpht.com/_BTztXRwC9ik/TMmT8UtD9QI/AAAAAAAAElc/wEXpVqs7lt4/no.png";
imgwidth = 80; //độ rộng của ảnh trong tiện ích
imgheight = 75; //chiều cao của ảnh trong tiện ích
showRandomImg = false;
aBold = true;
text = "Nhận xét";
showPostDate = true; //Nếu không muốn hiển thị ngày đăng bài bạn thay TRUE thành FALSE
summaryPost = 350; //số ký tự hiển thị phần tóm tắt bài viết
numposts =20; //số bài viết hiển thị
label = "Advanced blogger"; //thay thành nhãn bài viết của bạn
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn
</script>

<div class="allcontainer">
<span id="container-paginate">
<img src="https://lh3.googleusercontent.com/-NEniU-ywjyM/TkOcjWA2QLI/AAAAAAAAAgU/Ksr677PeioI/opencircle.png" data-over="https://lh5.googleusercontent.com/-dYVb8IRGIlw/TkOcjcIMvJI/AAAAAAAAAgU/lVbrLDaOdQ0/graycircle.png" data-select="https://lh3.googleusercontent.com/-eAd5my2yXHs/TkOcju5B0KI/AAAAAAAAAgU/4nBRatFY7cM/closedcircle.png" data-moveby="2" /></span>

<div style="float: right;text-align:right;">
<span style="margin-bottom: -8px;margin-right:10px;"><span id="firstnum"></span> - <span id="lastnum"></span> / <span id="totaltnum"></span> </span><a href="javascript:jcarousel.stepBy('container', 2)" class="next"></a><a class="prev" href="javascript:jcarousel.stepBy('container', -2)"></a></div>

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

8. Cuối cùng save tiện ích lại

Nếu muốn hiển thị cho tất cả bài viết trên blog bạn thay file JS (re_jcarousel_yahoo-label.js) thành link bên dưới.
http://data-traidatmui.appspot.com/scripts/re_jcarousel_yahoo_allpost.js

Nếu bạn gặp rắc rối vui lòng để lại comment bên dưới mình sẽ giải đáp giúp bạn.

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

Xem khác cùng chủ đề

18 nhận xét | Viết lời bình

Admin
8/14/2011 07:43:00 SA Trả lời

Mình đã đáp ứng theo yêu cầu của bạn My, bạn xem bài viết trên nhé vuivewa

my
8/14/2011 04:21:00 CH Trả lời

Cảm ơn anh nhiều nhé!kemne Không ngờ anh nói hôm nay mới xong mà hoàn thành sớm quá. votay cdv

Admin
8/14/2011 10:19:00 CH Trả lời

Hi, anh cũng định là hôm nay post nhưng hoàn thành xong thôi post để em tham khảo lun,Hi lleu

9/05/2011 05:00:00 SA Trả lời

đã thành công! http://myexpressing.blogspot.com/.
cảm ơn đất mũi nhiều

Admin
9/05/2011 07:03:00 SA Trả lời

Mỗi thủ thuật mình hướng dẫn đều mong các bạn sẽ thực hiện thành công mà! Hi. votay

10/11/2011 07:28:00 SA Trả lời

Traidatmui ơi cái nut Prev/next nó bị lệch, chỉnh giùm mình với =}}

10/11/2011 07:29:00 SA Trả lời

blog của mình http://vinadic.tk

Admin
10/11/2011 07:45:00 SA Trả lời

@ quyetdinh: Bạn chỉnh phần margin trong lớp .prev{...............} và
.next{...............}

để định vị trí 2 nút này

10/11/2011 11:40:00 SA Trả lời

Cảm ơn TĐM nhiều nhé, hiện tại Blog của tôi đang áp dụng rất nhiều thủ thuật của TĐM. Riêng thủ thuật này tôi đã tự tùy biến trên blog chỉ để lại mỗi phần phân trang mà thôi. Tôi đang muốn chuyển phần phân trang đó xuống dưới phần nội dung mà không được, rất mong TĐM chỉnh sửa xuống dưới dùm tôi nhé. Mong nhận được tin sớm từ TĐM. Thank you so much battay

Admin
10/11/2011 09:14:00 CH Trả lời

@ BOY7X: Nếu bạn muốn di chuyển phần phân trang (các nút tròn) xuống phía dưới các bài viết thì bạn di chuyển đoạn code bên dưới

<span id="container-paginate">
<img src="https://lh3.googleusercontent.com/-NEniU-ywjyM/TkOcjWA2QLI/AAAAAAAAAgU/Ksr677PeioI/opencircle.png" data-over="https://lh5.googleusercontent.com/-dYVb8IRGIlw/TkOcjcIMvJI/AAAAAAAAAgU/lVbrLDaOdQ0/graycircle.png" data-select="https://lh3.googleusercontent.com/-eAd5my2yXHs/TkOcju5B0KI/AAAAAAAAAgU/4nBRatFY7cM/closedcircle.png" data-moveby="2" /></span>

Xuống phía dưới phần JS như bên dưới
<script src="http://traidatmui-tips.googlecode.com/files/re_jcarousel_yahoo-label.js" type="text/javascript"></script>

<span id="container-paginate">
<img src="https://lh3.googleusercontent.com/-NEniU-ywjyM/TkOcjWA2QLI/AAAAAAAAAgU/Ksr677PeioI/opencircle.png" data-over="https://lh5.googleusercontent.com/-dYVb8IRGIlw/TkOcjcIMvJI/AAAAAAAAAgU/lVbrLDaOdQ0/graycircle.png" data-select="https://lh3.googleusercontent.com/-eAd5my2yXHs/TkOcju5B0KI/AAAAAAAAAgU/4nBRatFY7cM/closedcircle.png" data-moveby="2" /></span>

</div>

10/11/2011 11:21:00 CH Trả lời

Cảm ơn TĐM nhiều, tôi đã làm được rồi votay hihihi

11/09/2011 01:40:00 SA Trả lời

lacdau

Nặc danh
2/26/2012 07:30:00 CH Trả lời

Anh ơi cho em hỏi nếu em muốn đặt 2 cái tiện ích trên thì làm thế nào hả anh
Em đặt 2 cái thì chỉ hiện thị được một cái thôi ạ

12/10/2012 07:48:00 CH Trả lời

A ơi, em đặt cái tện ích này
Nhưg hôm sau xem thì chỉ còn thấy mỗi cái nút tròn thôi anh ơi, không thấy hiện bài viết :((

Admin
12/10/2012 08:01:00 CH Trả lời

Lỗi đấy là do hosting lưu trữ các file JS bên anh gặp vấn đề, em nên tải các file JS tại đây về và tải lên host riêng của mình và lấy link thay thế vào các file JS bên trên là được.

12/11/2012 12:06:00 SA Trả lời
Nhận xét này đã bị tác giả xóa.
12/11/2012 12:07:00 SA Trả lời
Nhận xét này đã bị tác giả xóa.
12/11/2012 12:23:00 SA Trả lời

ĐƯỢC R A Ạ
Cảm ơn a nhiều nhé :D

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang