SlideTab Recent Posts với hiệu ứng trượt ngang jQuery

Tiện ích SlideTab Recent Posts với ứng dụng trượt ngang và có nút điều khiển tới - lui.

Hình minh hoạ

Cách thực hiện:

1. Đăng nhập Blogspot

2. Vào Thiết kế => Mẫu => Chỉnh sửa HTML

3. Chèn đoạn code này vào trước thẻ đóng </head> :

<script src="http://bongnguoilangle.googlecode.com/files/jquery.min-1.8.2.js" type="text/javascript"></script>

* Lưu ý: nếu bạn đã từng chèn JS JQuery trong CSS Template thì bỏ qua bước này.

4. Quay trở lại trang Thiết kế =&gt; Bố cục =&gt; Thêm tiện ích =&gt; HTML/Javascript
5. Chèn đoạn code bên dưới vào phần nội dung tiện ích:

<style type="text/css">
#slidearea {
height: 242px;
overflow: hidden;
margin: 0px 0px 0 0px;
position: relative;
width: 915px;
background: #transparent url(https://lh4.googleusercontent.com/-URXxSI0ec0o/UKhL-VlH4zI/AAAAAAAAGXQ/GOAzgu72Ev8/s915/slider.png) no-repeat;
}
#gallerycover {
overflow: hidden;
margin: 10px 33px 5px 37px;
width: 855px;
}
.mygallery {
overflow: hidden;
visibility: visible; 
position: relative; z-index: 2; 
left: 0px; 
width: 855px; 
}
.mygallery ul {
margin:0;
padding:0; 
position: relative; 
list-style-type: none; 
z-index: 1; 
width: 2700px; 
left: -1620px; 
}
.mygallery ul li {
overflow: hidden;
float: left; 
width: 180px; 
height: 210px;
}
.mytext {
position: relative;
margin: 0 5px 0 5px;
width: 170px;
height: 210px;
display: inline;
float: left;
color: #C4C4C4;
}
.mytext p {
padding: 0 0;
color: #555;
font-size: 12px;
line-height: 20px;
width: 170px;
}
.mytext h2 {
padding: 5px 0;
color: blue;
width: 170px;
font-size: 14px;
font-weight: bold;
}
.mytext h2 a:link, .mytext h2 a:visited {
color: #0000ff;
text-decoration: none;
outline: none;
}
.mytext h2 a:hover {color:#474cfa;}
img.sidim {
width: 170px;
height: 100px;
}
.prevb {
float: left;
width: 20px;
height: 102px;
z-index: 200;
background: url(https://lh5.googleusercontent.com/-IapcOPB8_rA/UKhQrrjhzCI/AAAAAAAAGXo/wSvflc-xgJ8/s102/prev-01.png)!important;
position: absolute;
left: 5px;
bottom: 70px;
}
.nextb {
float: right;
width: 20px;
height: 102px;
z-index: 200;
background: url(https://lh3.googleusercontent.com/--ihRIIbGy_Y/UKhRyC8dZiI/AAAAAAAAGXw/GJy7RZag4ng/s102/next-01.png)!important;
position: absolute;
right: 5px;
bottom: 70px;
display: block;
}
</style>

<script src="http://bongnguoilangle.googlecode.com/files/slide-mygallery.js" type="text/javascript"></script>

<script stype="text/javascript">
var $jx = jQuery.noConflict();
$jx(function() {
$jx(".mygallery").jCarouselLite({
btnNext: ".nextb",
btnPrev: ".prevb",
visible: 5,
auto: 3000,
speed: 1000,
easing: "backout" 
});
});
</script>

<div id="slidearea">
<div id="gallerycover">
<div class="mygallery">
<ul>
<script type="text/javascript">
var mode = "single";
var g_numposts = 10;
var g_numcontents = 10;
var g_label="Blog-Entries";
var homepage="http://testpage-bnll.blogspot.com";
</script>

<script src="http://bongnguoilangle.googlecode.com/files/feed-mygallery.js" type="text/javascript"></script>
</ul>

<div class="clear"></div>
</div>
</div>
<a class="prevb" href="#"></a>
<a class="nextb" href="#"></a>
</div>

Trong đó:

- visible: 5 là số bài viết sẽ được hiển thị.
- auto: 3000 là thời gian chạy auto, 3000 tương ứng với 3 giây, tức là sau 3 giây tự động chuyển bài.
- speed: 1000 là tốc độ chuyển bài viết khi click vào button left hoặc right (mũi tên màu hồng)
- Lưu ý : nếu không muốn chạy auto, thì bạn chỉ cần bỏ dòng auto: 3000 trong đoạn code javascript.
- var mode = "single"; là chế độ hiển thị theo 1 nhãn nào đó (là biến g_label bên dưới). Nếu muốn hiển thị toàn bộ các nhãn thì thay  single thành all.
- var g_numposts = 10; là số bài viết sẽ được load (lưu ý là số bài viết sẽ load (g_numposts) khác với số bài viết sẽ được hiển thị (visible: {giá trị thiết lập}) )
- var g_numcontents = 10; số chữ (là các chuỗi ngăn cách bằng dấu khoảng trắng) sẽ được hiển thị ở đoạn mô tả bài viết.
- var g_label="Blog-Entries"; tên nhãn sẽ được chọn nếu hiển thị ở chế độ mode = "single";
- var homepage="http://testpage-bnll.blogspot.com"; là địa chỉ trang chủ được truy nhập. Thay http://testpage-bnll.blogspot.com thành địa chỉ blog của bạn.

6. Lưu tiện ích và xem kết quả.

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

Bóng Người Lặng Lẽ