Tin mới đăng:

Tạo SlideTab Recent Posts hiệu ứng trượt ngang jQuery với 2 nút điều khiển

Trong tiện ích Recent Posts, hiệu ứng trượt ngang bằng JQuery cho Blogspot với 2 nút điều khiển ứng dụng trượt của JQuery để làm cho Blog sinh động hơn. Hôm nay mình đem đến 1 tiện ích mang phong cách "cao cấp" hơn, đó là 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 ảnh minh họa
» Cách thực hiện Thủ thuật như sau:
1. Đăng nhập Blogger
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://buixuandoanh.com.vn/js/jquery.min.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ế => Bố cục => Thêm tiện ích => 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 20px 0 20px;
position: relative;
width: 960px;
background: url(http://4.bp.blogspot.com/_xpQK9GsnDPs/TOxSyMhIKWI/AAAAAAAAAms/5jwLO9VyuHo/s000/slider.png) no-repeat;
}
#gallerycover {
overflow: hidden;
margin: 15px 30px 0 30px;
width: 900px;
}
.mygallery {
overflow: hidden;
visibility: visible;
position: relative; z-index: 2;
left: 0px;
width: 900px;
}
.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;
text-shadow: 1px 1px 0 #F6F6F6;
}
.mytext h2 {
padding: 5px 0;
color: black;
width: 170px;
font-size: 14px;
font-weight: bold;
}
.mytext h2 a:link, .mytext h2 a:visited {
color: black;
text-decoration: none;
outline: none;
}
.mytext h2 a:hover {color:#888;}
img.sidim {
width: 170px;
height: 100px;
}
.prevb {
float: left;
width: 20px;
height: 35px;
z-index: 200;
background: url(http://4.bp.blogspot.com/_xpQK9GsnDPs/TOxSyrTi7KI/AAAAAAAAAmw/i4FOV7EzbIQ/s000/prev.png)!important;
position: absolute;
left: 5px;
bottom: 110px;
}
.nextb {
float: right;
width: 20px;
height: 35px;
z-index: 200;
background: url(http://3.bp.blogspot.com/_xpQK9GsnDPs/TOxSzDyhK7I/AAAAAAAAAm0/EOkU1_3E9Y0/s000/next.png)!important;
position: absolute;
right: 5px;
bottom: 110px;
display: block;
}
</style>
<script src="http://k3nvil.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 = "all";
var g_numposts = 10;
var g_numcontents = 15;
var g_label="B-advance";
var homepage="http://www.xuandoanh.com";
</script>
<script src="http://k3nvil.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>
Hướng dẫn tùy chỉnh:
- Visible: 5 đây là số bài viết sẽ được hiển thị ra ngoài.
- Auto: 3000 đây 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 đỏ)
- Lưu ý : Nếu không muốn chạy auto, thì bạn bỏ dòng Auto: 3000, trong đoạn code javascript, tức là đoạn script ở trên chỉ còn như bên dưới :
<script stype="text/javascript">
var $jx = jQuery.noConflict();
$jx(function() {
$jx(".mygallery").jCarouselLite({
btnNext: ".nextb",
btnPrev: ".prevb",
visible: 5,
speed: 1000,
easing: "backout"
});
});
</script>
- var mode = "All"; là chế độ hiển thị theo cả blog hoặc theo 1 nhãn nào đó, nếu giá trị là All thì hiển thị các bài viết mới của blog, nếu giá giá trị là "Single" thì sẽ hiển thị bài viết theo nhãn được chọn (là biến g_label bên dưới)
- var g_numposts = 10; là số bài viết sẽ 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 = 15; 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="B-advance"; tên nhãn sẽ được chọn nếu hiển thị ở chế độ mode = "Single";
- var homepage="http://www.xuandoanh.com"; thay thành tên domain của blog bạn, ví dụ "http://YOUR-BLOG-NAME.blogspot.com".

                                       Chúc bạn thành công
Tạo SlideTab Recent Posts hiệu ứng trượt ngang jQuery với 2 nút điều khiển Tạo SlideTab Recent Posts hiệu ứng trượt ngang jQuery với 2 nút điều khiển
9/10 356 bình chọn

Chia sẻ:

Xin chào! Mình là Bùi Xuân Doanh. Mình muốn được chia sẻ cùng các bạn những gì mình biết.

Theo dõi tôi trên Facebook Or Youtube


1 bình luận | Viết bình luận

ECH CON DI HOC
21:42 6 tháng 1, 2017
code này bị hỏng rồi bạn!

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 »

Quản trị

    Admin Bùi Xuân Doanh

    Click để Chat với Admin! Click để Chat với Admin!

    Email: buixuandoanh@gmail.com

    Hotline: 0983.379.818

Tư vấn Kỹ thuật