recent posts blogger jquery

Các bạn có thể xem demo ở đây: http://fandung.110mb.com/JS-files/RecentPosts-jQuery/test.html

Hình ảnh minh họa :

Ở tiện ích này, vì 1 số lí do nên mình sẽ không cho phép hiển thị comment và ngày đăng, nên mọi người không cần thắc mắc hoặc yêu cầu show nó ra.
Một vài thông tin về tiện ích này :
- Hiển thị ảnh thumbnail là chính
- Tiêu đề bài viết và phần tóm tắt bài viết sẽ hiển thị khi ta đưa chuột vào ảnh.
- Có button cho phép di chuyển qua lại giữa các bài viết.
☼ Bây giờ ta bắt đầu thủ thuật:
- Vào bố cục
- vào chỉnh sửa code HTML
- Chèn đoạn code bên dưới vào trước thẻ đóng </head>

// Code JS
<script src=’http://fandung.110mb.com/JS-files/RecentPosts-jQuery/jquery-1.2.6.min.js‘ type=’text/javascript’></script>
<script src=’http://fandung.110mb.com/JS-files/RecentPosts-jQuery/jquery-ui-personalized-1.5.2.packed.js‘ type=’text/javascript’></script>
<script src=’http://fandung.110mb.com/JS-files/RecentPosts-jQuery/hover.js‘ type=’text/javascript’></script>
<script src=’http://fandung.110mb.com/JS-files/RecentPosts-jQuery/glide.js‘ type=’text/javascript’></script>
<script src=’http://fandung.110mb.com/JS-files/RecentPosts-jQuery/superfish.js‘ type=’text/javascript’></script> <script type=’text/javascript’>
jQuery(function(){
jQuery(‘ul.sf-menu’).superfish();
});
</script>
<script type=’text/javascript’>
featuredcontentglider.init({
gliderid: “glidercontent”,
contentclass: “glidecontent”,
togglerid: “togglebox”,
remotecontent: “”,
selected: 1,
persiststate: true,
speed: 300,
direction: “leftright”,
autorotate: true,
autorotateconfig: [10000, 1] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})
</script>
// Code CSS
<style type=’text/css’>
#glidercontent{
margin:0px 0 5px 0px;
font-family:Arial;
}
.glidecontentwrapper{
position: relative; /* Do not change this value */
width: 570px;
height: 300px;
overflow: hidden;
margin:0px 0px 0px 0px;
background:#D9D1CE;
}
.glidecontent{
position:absolute; /* Do not change this value */
padding:0px 10px 0px 10px;
width:540px;
color:#fff;
margin:0px 0px;
height: 330px;
background:#ec03d9 url(http://i36.photobucket.com/albums/e2/alvaris924/zinmagtribune/minibg.pg) no -repeat;
overflow:hidden;
float:left;
}
.glidemeta h2{
margin:5px 0px 5px 0px;
padding:5px 0px;
font-size:18px;
font-weight:bold;
}
.glidemeta h2 a:link, .glidemeta h2 a:visited{
color:#fff;
text-decoration:none;
}
.glidemeta{
height: 85px;
width: 550px;
padding:0px 5px 5px 5px;
position:absolute;
background: url(http://i36.photobucket.com/albums/e2/alvaris924/zinmagtribune/balloon.png);
top:165px;
line-height:14px;
color: #fff;
font-size:12px;
overflow: hidden;
display:none;
border-top:1px solid #000;
}
.gnav{
width: 100px;
height:50px;
z-index:150;
float:right;
padding-right:25px;
}
.glidecontenttoggler{
height:38px;
z-index:150;
width: 570px;
background: url(http://farm3.static.flickr.com/2440/3670445565_757cfaaee8_o.gif);
}
.glidecontenttoggler a{
display: -moz-inline-box;
display: inline-block;
color: #2e6ab1;
font-weight: bold;
text-decoration: none;
}
.glidecontenttoggler a.selected{
background: #E4EFFA;
color: black;
}
.glidecontenttoggler a:hover{
background: #E4EFFA;
color: black;
}
.glidecontenttoggler a.toc{
}
.glidecontenttoggler a.prev{
top:6px;
right:35px;
position:absolute;
display:block;
background:url(http://i36.photobucket.com/albums/e2/alvaris924/zinmagtribune/left.jpg) bottom;
width:36px;
height:25px;
}
.glidecontenttoggler a.next {
float:right;
display:block;
background:url(http://i36.photobucket.com/albums/e2/alvaris924/zinmagtribune/right.jpg) bottom;
width:36px;
height:25px;
position:absolute;
top:6px;
right:5px;
}
.glidecontenttoggler a.next:hover {
background:url(http://farm4.static.flickr.com/3376/3670481633_24740d7c90_o.gif) bottom;
}
.glidecontenttoggler a.prev:hover {
background:url(http://farm3.static.flickr.com/2594/3670481657_5465256487_o.gif) bottom;
}
</style>

- Bây giờ mình sẽ hướng dẫn 1 chút để các bạn có thể tùy chỉnh code CSS.

Trước tiên hãy xem qua hình bên dưới :

- Phần khung bên ngoài chính là id glidecontentwrapper , các bạn có thể thay đổi kích thức của tiện ích ở đây.
- Phần màu đen chính là vùng hiển thị của tiêu đề và summary post. đó chính là id glidemeta. và như trong hình độ rộng của nó là 85px, chiều cao 550px; ngoài ra ta sẽ thấy còn có 1 lệnh top:165px; lệnh này để căn lề trên cho phần màu đen, tức là nó sẽ bị đẩy xuống dưới 1 đoạn là 165px. Và lưu ý : 85px+165px = chiều cao của ảnh thumbnail. Nếu như bạn chỉnh ảnh thumbnail nhỏ lại mà quên chỉnh 2 thông số này, nhất là lệnh top:165px; thì khi đó phần màu đen sẽ bị đẩy sâu xuống dưới, kết quả có thể vùng màu đen không hiển thị được.
- Ngoài ra các bạn có thể tùy chỉnh thêm sao cho hợp lý nhất, mình chỉ có thể hướng dẫn tới đây.
- Save template sau khi đã tùy chỉnh xong
- Và bây giờ hãy tạo 1 widget HTML/Javascript và dán đoạn code bên dưới vào :

<div class=’glidecontentwrapper‘ id=’glidercontent’> <div class=’glidecontenttoggler‘ id=’togglebox’>
<a class=’prev‘ href=’#'></a>
<a class=’next‘ href=’#'></a>
</div>
<script language=”JavaScript”>
imgr = new Array();
imgr[0] = “http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif“;
showRandomImg = true;
imgwidth = 550;
imgheight = 250;
fntsize = 16;
acolor = “#f00“;
aBold = true;
text = “no”;
showPostDate = false;
summaryPost =200;
summaryFontsize = 12;
summaryColor = “#000″;
numposts = 6;
home_page = “http://fandung.blogspot.com/“;
</script>
<script src=’http://fandung.110mb.com/JS-files/RecentPosts-jQuery/recentposts_jQuery.js‘ type=’text/javascript’></script>
</div>

- Các phần tùy chỉnh bên trên có lẽ đã quá quen thuộc vì thế mình sẽ không đề cập ở đây(nếu không rõ hãy tham khảo các bài viết về tiện ích recent posts ở blog của mình).
(mothuthuat)
mình đọc nhầm thành mộ thủ thuật hay một thủ thuật hóa ra lad mỏ thủ thuật