.jpg)
SlideTab Recent posts (jQuery)
Thứ Năm, 22 tháng 12, 2011
Phải nói là ở blog của mình tiện ích recent posts rất nhiều, nhiều là do mỗi cái có giao diện khác nhau, chứ về cơ bản thì nó đều như nhau, và đa phần là do các bạn yêu cầu. Và bài này cũng không ngoại lệ. Bài này mình rip lại giao diện theo yêu cầu, chỉ có khác là thay nội dung của nó bằng tiện ích Recent Posts mà thôi.
Xem DEMO
Hình minh họa :
Sau đây là các bước thực hiện :
- Vào code template (thiết kế -> chỉnh sửa code HTML), và chèn đoạn mã code bên dưới vào trước thẻ đóng </head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
- lưu ý là nếu trong code template của bạn đã có file jquery.min.js thì không cần chèn vào nữa, hiện tại jquery đã ra bản 1.7.1- tiếp theo, tạo 1 widget HTML/javascript và chèn đoạn code bên dưới :
<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://fandung.googlecode.com/svn/trunk/js/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.fandung.com";
</script>
<script src="http://fandung.googlecode.com/svn/trunk/js/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>
#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://fandung.googlecode.com/svn/trunk/js/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.fandung.com";
</script>
<script src="http://fandung.googlecode.com/svn/trunk/js/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, như trong demo là 3.
- 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 cam)
- 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 $jx = jQuery.noConflict();
$jx(function() {
$jx(".mygallery").jCarouselLite({
btnNext: ".nextb",
btnPrev: ".prevb",
visible: 5,
speed: 1000,
easing: "backout"
});
});
</script>
- 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.fandung.com"; thay http://www.fandung.com thành tên domain của blog bạn, ví dụ http://YOUR-BLOG-NAME.blogspot.com
- Ngoài ra nếu tiện ích rộng quá thì các bạn tùy chỉnh lại các thông số về chiều dài và rộng trong code CSS.
- Thủ thuật này xin lưu ý là hơi nặng, nên bạn nào thật sự thích thì hãy sử dụng, còn không thì có thể tham khảo thôi.
Thực hiện theo yêu cầu của Việt Nam
Comments[ 0 ]
Đăng nhận xét