Loading post navigation ...
 
 

Pro page

42
Nhận xét

PNO - Recent posts : Thêm 1 style mới cho tiện ích Recent posts

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

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.


Enter your mail address:

42

Góc Nhìn

Rất đẹp, nhìn rất chuyên nghiệp.
Nhưng nhiều hiệu ứng quá có thể làm blog load lâu hơn :D

Khách (ẩn danh)

Cám ơn FD nhiều nhé.

fandung

@Góc Nhìn : cái này cũg ko nặg lắm đâu. :D nhẹ hơn jQuery nhiều.

@letrannguvu : sr bạn nha, bây giờ mới có thể post cho bạn. Hy vọng bạn hài lòng.

mmovn

Anh Dũng cho em hỏi...em muốn sửa temp blogspot offline...thì có thể dùng trình nào hỗ trợ không?

Chi_bao^_^

a Dũng ơi, em muốn làm menu trang chủ giống tinmoi.vn ở chỗ các khung label như tin trong nước,tin thế giới, đời sống như thế kia và cái khung bài nổi bật nữa. em thấy trang này thiết kế được quá, a có thể giúp em không?

Best4Share.Com

hay qua', thanks

http://www.best4share.com

duy782006

Mình muốn làm cho tất cả các nhãn thì sửa thế nào vậy Dũng?

Khách (ẩn danh)

FD xem lại code có bi lỗi ko, mình dán tất cả vào và upload file.js lên host riêng mà ko thấy chạy, chỉ hiển thị được mỗi cái hình quyển ALBUM.

thongtin247

a Dung cho hoi lam cach nao de cho nut readmore trong dep hon co the giong nhu cua a day. chi dum e voi nha.thanks

Dịch thuật Online

Bác ơi, em cũng làm từ sáng sớm nay nhưng không có thấy hiện lên, xin bác kiểm tra giúp xem, thanks bác!

fandung

@hoang anh truong & @dichthuatviet : đc rồi, để mình xem lại.

Phan Dũng

Mình đã sửa lại 1 lỗi nhỏ, do mình sơ xuất đánh nhầm chữ false thành fault, do đó mà tiện ích ko hiển thị bài viết.

Cáo lỗi cùng các bạn

Phan Dũng

@minHMN : muốn sửa template offline có thể sửa trực tiếp trên Notepad, như trong code của template có các code chứa data của blogspot, vì thế khi sửa offline sẽ có những hạn chế. Nếu muốn sửa template cho blog, tốt nhất em nên copy code template của blog cần sửa sang 1 blog mới, rồi sửa trực tiếp trên blog mới này, khi thấy ưng ý thì sửa trên blog chính.

@baothaibinh.net : cũng đc bạn à, có gì mình post sau

Chinhnd

qua' hay. FD = pro of Recent post code

LouLou

cái này nhẹ mà, cái style jquery trước cồng kềnh hơn nhiều
hê hê

Chuyện Đó Đây

Chúc mừng trang bạn có tên miền riêng nhé. Chúc trang phát triển vững mạnh và hữu ích cho blogger Việt.

Teenvnexpress

em muốn làm cái như trên và làm ẩn luôn cái phần blog posts(ân luôn mấy bài viết đó anh) em nhớ lúc trc anh có 1 bài hướng dẫn mà em wên nó rồi, search wài ko thấy, anh cho em xin link nha

Khách (ẩn danh)

Anh ơi với blog khác thì thay đổi như thế nào ạ

Phan Dũng

@Teenvnexpress : muốn ẩn phần bài viết em có thể dùng lệnh này :

#Blog1 {display:none;}

chèn nó vào trước đoạn code ]]></b:skin> là đc

@Nặc Danh : với blog khác bạn chỉ cần đổi địa chỉ blog là đc thôi.

Ác Quỷ

Ehe cái này nhìn lạ mắt ghê nhỉ :D

Khách (ẩn danh)

Amh Dũng ơi phần label có đôie trong file JS không ạ

Khách (ẩn danh)

Mình muốn thay đổi bài viết của nhãn thành cho cả trang blog thi chỉnh như thế nào vậy FD? Hướng dẫn mình nhé. cám ơn nhiều.

Mr.Cuong

Cái này rất hay nhưng không biết có thể làm từng nhãn rồi cho lên blog dược không. Vì nếu cho hiển thị từ hai trở lên nó chỉ được có một cái chạy,còn cái kia nó đứng im. Xin hỏi fanDung là có thể khác phục được không.Mong hồi âm lạ sớm nhé!

Phan Dũng

@Mr.Cuong :Nếu muốn làm trên 2 cái, bạn phải sửa lại tên của các frame, do trùng tên frame nên cái chạy cái không là đúng rồi

Mr.Cuong

Cám ơn Phan Dũng rất nhiều,mình sẽ làm thử xem. Mà Phan Dũng đang học hay đi làm ở đâu nhỉ. Khi vọng sẽ có cơ hội được trao đổi với Phan dũng.
http://saolove.blogspot.com/

Mr.Cuong

Mình làm thử như fanDung nhưng vẫn không được nó vẫn chỉ chạy một cái ở trên,còn cái dưới đứng im.Mặc dù mình thay cả fd mà vẫn không chạy. FanDung có cách nào khắc phục thì chỉ giúp nhé.Thank you.

Teenvnexpress

Một số bài recent post trc của anh, đối với bài viết ko chứa ảnh hay chỉ có video clip thì hiện ảnh mặc định đã tạo link từ trc. Vậy vd em muốn cho hiển thị ảnh của đoạn clip đó thì sao anh FD?

mmovn

@teenvnexpress: y ban la giong' trang http://phim.nghiadoi.com ha?

Unknown
Unknown

FD ơi ,sao mình làm mà nó ko có hiển thị phần hình trong trang bên trái nhỉ, chỉ có phần chữ, còn hình nó ghi No Image, trong khi mỗi bài mình có khá nhìu pic và lun ở đầu mỗi bài, nhưng pic mình kích cỡ khỏag 400px ko ah, ko bít nó có tự thu nhỏ lại ko hay pic to nó ko hiển thị !?!

fandung

@TEDDY : bạn xem lại trong phần bảng điều khiển của mục FEED xem, nhớ điều chỉnh là hiển thị đầy đủ nhé, nếu để chế độ summary (tóm tắt) thì nó sẽ không hiển thị hình ảnh

Unknown

thanks FD nhìu, mình làm đc rùi, mà ko hỉu cái feed đó full or short thì khác nhau sao ta !?!

ah, với lại chỉ mình mí điểm này lun với:
+ làm sao để mình hiển thị all label, all bài viết lần lượt chạy hen, chả lẽ mỗi bài viết đặt label All, rùi mới chạy zị đc !?! và mình phải add thêm toàn bộ số bài viết mình mún có mới chạy zị đc ha, có cách nào ngắn hơn hem ^^

duy782006

Vốn mình dùng cái này chạy ngon lắm nhưng cả ngày nay thì trống trơn. Nó bị sao vậy Dũng?

Ác Quỷ

Mình nghĩ chắc là do feel blogger hoặc do host 110mb mấy ngày nay bất ổn :)

duy782006

Cám ơn . Hum nay nó lại chạy tốt rồi!

teenvnexpress

@min HMN ờ đúng rồi

Phan Dũng

chắc là do host 110mb.com đó :D

Khách (ẩn danh)

Avatar blogger dạo này dang lỗi sao ý nhỉ, chỉ hiện ở 10 comment đầu tiên thôi :(

duy782006

Dũng ơi. Có chỉnh sữa gì không mà cái renpost của mình bị đứng 2 ngày nay. Cả cái các cảm nhận gần đây cũng mất. Không có cái này khó theo dỏi blog quá Dũng có cách nào giúp mình không!

Khách (ẩn danh)

Hi anh FD, anh có nhiều tiện ích recent post rất đẹp, rất chuyên nghiệp mà em áp dụng vào blog không chạy là sao vậy anh? - Lisa

Lossless Musix

hay quá anh ơi :) cũ người mới ta :)
Lossless music for free http://losslessmusix.blogspot.com/

Admin

sao cảu mình chi thấy cái quyển sách không thôi chán quá! nhiều tiện ích ngon quá mà sao blog của mình làm giống mà chẳng hiện được là sao nhi?bạn xem lại đi xem thế nào??



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home