Tiện ích Recent posts khá ấn tượng với jQuery

[FD's BlOg] - Ở bài viết này mình sẽ lại giới thiệu 1 style mới cho tiện ích Recent Posts, đó là sẽ tạo thêm button "Xem thêm" bên dưới, khi click vào button này thì sẽ hiển thị thêm các bài viết khác. Với hiệu ứng hiển thị sử dụng từ jQuery. Ngoài việc hiển thị bài viết, ở thủ thuật này mình cũng giới thiệu khung trang trí mẫu cho tiện ích.

Xem demo : LIVE DEMO

Hình ảnh minh họa :

Ở thủ thuật này, khung trang trí mẫu có kích thước cố định, vì thế nếu muốn hiển thị tốt trên blog của bạn, bạn phải chỉnh sửa các hình ảnh của khung mẫu lại cho phù hợp. (Việc chỉnh sửa đơn thuần là dùng các chương trình đồ họa để tăng hoặc giảm kích thước của ảnh)

Bên dưới là 3 file ảnh của khung trang trí, các bạn có thể download về để chỉnh sửa lại :

http://i342.photobucket.com/albums/o433/bkprobk/head.gif
http://i342.photobucket.com/albums/o433/bkprobk/center.jpg
http://i342.photobucket.com/albums/o433/bkprobk/footer.jpg

☼ Các bước thực hiện:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn code bên dưới vào trước thẻ đóng </head>

<script type="text/javascript" src="http://data.fandung.com/blog/demo/jQuery-RP/ScriptHandler.js">
<script type="text/javascript" src="http://data.fandung.com/blog/demo/jQuery-RP/jquery-ui-1.js">

<style type="text/css">
*
{
margin:0;
padding:0;
}


#divContainerRight
{
width:300px;
background:#ffffff url(http://i342.photobucket.com/albums/o433/bkprobk/center.jpg) repeat-y top left;
}

#divContainerRightHead
{
width:300px;
background: url(http://i342.photobucket.com/albums/o433/bkprobk/head.gif) no-repeat top left;
}

#divContainerRightFoot
{
width:300px;
height:6px;
background: url(http://i342.photobucket.com/albums/o433/bkprobk/footer.jpg) no-repeat bottom left;
}


#ulrelateArtist
{
list-style-type:disc;
width:270px;
margin:0 auto;
}

#ulrelateArtist li
{

border-bottom:1px dotted #cccccc;
padding-left:5px;
padding-top:10px;
list-style-position:inside;
color:#00A79B;
}

#ulrelateArtist li a
{
color: #009f92;
font-size: 11px;
font-family:Arial;
text-decoration:none;
}

#ulrelateArtist li a:hover
{
color: #009f92;
font-weight: normal;
text-decoration:underline;
}

</style>

4. Save template
5. Tạo 1 widget HTML/Javascript và dán code bên dưới vào:

<div style="margin: 0pt auto; width: 300px; padding-top: 5px;">

<div style="padding-bottom: 5px;">
<div id="divContainerRight">
<div id="divContainerRightHead" class="clearfix">
<div style="line-height: 28px; color: rgb(255, 255, 255); padding-left: 10px; font-weight: 900; font-size:12px;">&nbsp;
</div>

<script language="JavaScript">
imgr = new Array();

imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";

showRandomImg = true;

aBold = true;

numposts = 10; // số bài viết sẽ hiển thị khi click vào button "Xem thêm"
showposts = 5; // số bài viết sẽ được mặc định hiển thị

home_page = "http://fandung.blogspot.com/";
label = "Love";

</script>

<script src="http://data.fandung.com/blog/demo/jQuery-RP/RP_jQuery-post.js" type="text/javascript"></script>

<div id="ctl00_ContentPlaceHolder1_ucMp3Detail1_ucRelateArtistOnSearch1_divButtonArtistNext" style="margin:0pt auto; width: 270px; text-align: right; cursor: pointer; padding-top: 4px; ">Xem thêm <label style="color:rgb(250, 1, 134);">»</label>&nbsp;</div>
</div>
<div id="divContainerRightFoot"></div>
</div>
</div>

- Nếu muốn hiển thị bài viết theo nhãn nào đó thì các bạn đổi file RP_jQuery-post.js thành file RP_jQuery-label.js.
- Và đây là link của file RP_jQuery-label.js :

http://data.fandung.com/blog/demo/jQuery-RP/RP_jQuery-label.js

- Gợi ý nhỏ khi hiển thị các bài viết từ nhãn, các bạn có thể chú thích thêm ở phần header của khung như hình bên dưới :

- Để làm điều này, các bạn tìm đến đoạn code như bên dưới (trong code của thủ thuật), và thêm vào đoạn code màu đỏ như bên dưới:

<div style="line-height: 28px; color: rgb(255, 255, 255); padding-left: 10px; font-weight: 900; ">&nbsp;Love
</div>

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