Các bạn có thể xem demo ở đây : LIVE DEMO
Hình ảnh minh họa :
Như ở trên mình có nói là thủ thuật này mình có chỉnh sửa đôi chút cho phù hợp với blogspot. Thứ nhất là về khung ảnh mẫu, mình đã chỉnh lại nhỏ hơn, tầm 500px cho vừa với khung bài viết của blogspot. Thứ 2 trong thủ thuật gốc chỉ hiển thị cố định 5 bài viết, ở đây mình có thêm 1 chút code để hiển thị được nhiều hơn.
☼ Để thực hiện, các bạn tạo 1 widget HTML/Javascript và dán toàn bộ code của thủ thuật vào.
- Dưới đây là toàn bộ code của thủ thuật :
<!--code CSS --><style type="text/css">
.homeTop,.dd-homeTop{
width:500px;
}
.homeTop .topnews{
height:210px;
background:url('
http://i342.photobucket.com/albums/o433/bkprobk/bg-phunu-rc.gif') no-repeat;
margin-left:0px;
padding-left:5px;
}
div.topnews div.topnewsImg{
width:265px!important;
float:left;
padding-top:20px;
}
.topnews div.topnewsImg a{
padding:0px 0px 0px 15px;
display:block;
}
.topnewsImg img{
border:0px;
width:200px;
height:160px;
}
div.topnews div.topnewsCont div{
float:left;
width:215px!important;
}
div.topnews div.topnewsCont{
float:left;
width:215px!important;
padding-top:15px;
}
.topnewsTitle{
color:#fff;
font-size:1px;
padding:10x 0px 7px 0px;
font-weight:bold;
}
.topnews-title{
font-weight:bold;
padding-bottom:5px;
font-family:Arial;
}
div.topnews-title a,div.topnews-title a:link, div.topnews-title a:visited{
color:#457a02;
font-size:17px;
text-decoration:none;
}
div.topnews-title a:hover{
color:#d00;
text-decoration:none;
}
.topnews-des{
color:#000;
height:125px;
overflow:hidden;
font-family:Arial!important;
font-size:13px!important;
font-weight:normal!important;
}
.topnews-des p, .topnews-des strong, .topnews-des b, .topnews-des span{
padding:0px;
margin:0px;
font-weight:normal;
}
.topnews-other{
color:#a2adb0;
padding-top:0px;
padding-right:30px;
float:right;
}
.topnews-pre{
padding-left:5px;
}
.topnews-next{
padding-left:5px;
}
.topnews-other img{
cursor:pointer;
padding:3px 5px;
border:0px;
}
</style>
<!-- Code chính của thủ thuật --><div class="homeTop">
<div class="topnews">
<div>
<script type="text/javascript" src="
http://fandung.110mb.com/JS-files/PNO-RecentPosts/PNO-Resource.js"></script>
<div id="fd_Div" style="overflow: hidden; position: relative; height: 175px; width: 500px;">
<div id="fd_FrameContainer" style="position: relative; width: 500px; top: 0px; left: 0px;">
<script language="JavaScript">
imgr = new Array();
imgr[0] = "
http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
fd_frame = new Array();fd_frame[0] = "fd_frame0";fd_frame[1] = "fd_frame1";fd_frame[2] = "fd_frame2";fd_frame[3] = "fd_frame3";fd_frame[4] = "fd_frame4";fd_frame[5] = "fd_frame5";showRandomImg = true;
fntsize = 12;
acolor = "#555";
cmcolor = "#555";
aBold = true;
text = "no";
showPostDate = false;
summaryPost =
120;
summaryFontsize =
12;
summaryColor = "
#000";
numposts = 6;label = "
Love";
home_page = "
http://www.fandung.com/";
</script>
<script src="
http://fandung.110mb.com/JS-files/PNO-RecentPosts/PNO-recentpost.js" type="text/javascript"></script>
</div>
</div>
<script type="text/javascript">
window["fd"] = new RadRotator('fd',1);
window["fd"].AutoAdvance = 1;
window["fd"].FrameTimeout = 5000;
window["fd"].RotatorMode = 'Slideshow';
window["fd"].NumberOfFrames = 6;window["fd"].PauseOnMouseOver = 1;
window["fd"].HasTickers = 0;
window["fd"].FrameIdArray = new Array('fd_frame0', 'fd_frame1', 'fd_frame2', 'fd_frame3', 'fd_frame4', 'fd_frame5');window["fd"].UseRandomSlide = 0;
window["fd"].UseTransition = 0;
window["fd"].Start();
</script>
</div>
<div class="topnews-other">
<span class="topnews-pre"><img src="
http://i342.photobucket.com/albums/o433/bkprobk/iconPre.gif" onclick="fd.ShowPrevFrame()"></span>
<span class="topnews-next"><img src="
http://i342.photobucket.com/albums/o433/bkprobk/iconNext.gif" onclick="fd.ShowNextFrame()"></span>
</div>
</div>
</div>
- Thay đổi các code màu tím cho phù hợp (phần này khác quen thuộc, nên mình sẽ đi qua).
- Bây giờ tới phần chính của thủ thuật, bây giờ các bạn sẽ chú ý tới các đoạn code màu đỏ. Code này chính là điểm khác biệt so với khác style khác của tiện ích recent Posts. Chúng ta thấy có 4 vùng được tô đỏ, trong đó :
+ numposts = 6; và code window["fd"].NumberOfFrames = 6; : đây là 2 đoạn code điều chỉnh số bài viết sẽ được trình diễn.
+ Mảng :
fd_frame = new Array();
fd_frame[0] = "fd_frame0";
fd_frame[1] = "fd_frame1";
fd_frame[2] = "fd_frame2";
fd_frame[3] = "fd_frame3";
fd_frame[4] = "fd_frame4";
fd_frame[5] = "fd_frame5";
và mảng :
window["fd"].FrameIdArray = new Array('fd_frame0','fd_frame1','fd_frame2','fd_frame3','fd_frame4','fd_frame5');
hai mảng này chính là code để điều chỉnh số frame sẽ được hiển thị. Nếu bạn cho phép hiển thị 10 bài viết mà quên điều chỉnh lại các mảng này, thì số bài viết sẽ hiển thị sẽ không phải là 10.
Việc chỉnh sửa 2 mảng này rất đơn giản, ở trong code mẫu là dùng cho hiển thị 6 bài viết, nếu bạn muốn hiển thị 10 bài thì sửa lại code của 2 mảng như bên dưới :
fd_frame = new Array();
fd_frame[0] = "fd_frame0";
fd_frame[1] = "fd_frame1";
fd_frame[2] = "fd_frame2";
fd_frame[3] = "fd_frame3";
fd_frame[4] = "fd_frame4";
fd_frame[5] = "fd_frame5";
fd_frame[6] = "fd_frame6";
fd_frame[7] = "fd_frame7";
fd_frame[8] = "fd_frame8";
fd_frame[9] = "fd_frame9";
mảng thứ 2
window["fd"].FrameIdArray = new Array('fd_frame0', 'fd_frame1', 'fd_frame2', 'fd_frame3', 'fd_frame4', 'fd_frame5', 'fd_frame6', 'fd_frame7', 'fd_frame8', 'fd_frame9');
Chúc các bạn thành công.
[FD's BlOg] - Như các bạn đã biết, ở blogger, khi ta xem các trang như trang Home, Label, Archive thì ngày đăng bài viết (date-header) chỉ được hiển thị với bài viết mới nhất của ngày đó, còn các bài viết cũ hơn trong ngày đó sẽ không được hiển thị. Dưới đây mình sẽ hướng dẫn 1 cách để hiển thị ngày đăng ở các bài khác cùng ngày.
Công cụ tìm kiếm bài viết trên FD's BlOg bằng Google. Điền từ khóa muốn tìm và nhấn Tìm Kiếm.
