PNO - Recent posts : Thêm 1 style mới cho tiện ích Recent posts
Theo yêu cầu của bạn letrannguvu
[FD's BlOg] - Bài viết này mình sẽ lại giới thiệu 1 style khác cho tiện ích recent posts theo yêu cầu của letrannguvu. Đây là 1 style mang phong cách 1 cuốn sách, được mình modify từ trang phunuonline.com.vn. Đây cũng là 1 trong những style khó chịu, vì thế mà mình cũng tốn khá nhiều thời gian để chỉnh sửa cho phù hợp với khung mẫu của blogspot.Các bạn có thể xem demo ở đây : LIVE DEMO
Thủ thuật tạm thời đã bi thất lạc, mình sẽ code lại sau
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.
- Nút điều khiển lên xuống toàn trang cho blogspot
- Menu ngang co kèm hình ảnh bên cạnh rất đẹp
- Hiệu ứng Like page Facebook (FB), G+, twitter động cực đẹp cho Web, blogspot
- CSS3 với hiệu ứng hình ảnh động cực đẹp cho Web, blogspot
- Bài viết liên quan cho blogspot - Hiệu ứng ảnh thu nhỏ
- Thủ thuật thêm thống kê Blog 3 trong 1 cho blogspot
- Code đếm số lượt download
- Hướng dẫn kiếm tiền online với Adnet.vn
- Modify Form Comment : Bài 9 - Thêm ảnh avatar đại diện cho các comment - (Cập nhật)
- Menu nằm ngang - Hiệu ứng sổ menu con kiểu 1 hàng ngang (Mootools effect)
- Nâng cấp ANCMedia 3.3 - add server.
- Chèn Chabox Gtalk vào BlogSpot.
Comments[ 0 ]
Đăng nhận xét