Loading post navigation ...
 
 

Pro page

40
Nhận xét

Hiển thị bài viết ngoài trang chủ giống trang news.zing.vn

| by Phan Dũng | views

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

[FD's BlOg] - Với tiêu chí tổng hợp thật nhiều style khác nhau cho tiện ích "Recent posts" hôm nay mình sẽ lại giới thiệu cho các bạn 1 style khác theo phong cách giống trang news.zing.vn . Style này giống với style giống trang vnExpress mà mình đã từng giới thiệu. Trong bài viết này mình có convert lại độ rộng để có thể hiển thị được trên blogspot.

Xem demo : LIVE DEMO


Hình ảnh minh họa :


- Ở style này có thêm 1 điểm khác với các style cũ, là mình có chèn phần "Mô tả bài viết (summaryPost)" vào các link ở cột topo_news dưới dạng title. Các bạn có thể xem hình bên dưới :

☼ Các bước thực hiện thủ thuật :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đoạn code CSS bên dưới vào trước thẻ đóng </head> (hoặc có thể chèn thẳng vào widget HTML/javascript chung với code chính của thủ thuật)

<style type="text/css">
*
{ padding: 0;
margin: 0;
font-family: Arial;
font-size: 12px;
}

#index_news
{
width: 525px;
margin: 5px;
}

#main_content
{
width: 525px;
float: left;
overflow: hidden;
}

#main_content .top_news
{
width: 525px;
margin-bottom: 10px;
}
#main_content .top1_news
{
width: 234px;
float: left;
margin-top: 8px;
}
#main_content .top1_news .top1_news_image img
{
border: 1px solid #CCC;
padding: 1px;
width:230px;
height:165px;
}
#main_content .top1_news .top1_news_title
{
padding: 8px 0;
text-align: justify;
}
#main_content .top1_news .top1_news_title a
{
font-size: 16px;
color: #002392;
text-decoration: none;
}
#main_content .top1_news .top1_news_title a:hover
{
text-decoration: underline;
}
#main_content .top1_news p
{
text-align: justify;
}
#main_content .top1_news p a
{
padding-left: 4px;
}
#main_content .top1_news p img, #main_content .top2_news img
{
vertical-align: bottom;
}
#main_content .top2_news
{
width: 95px;
float: left;
margin-left: 8px;
margin-top: 14px;
padding-right: 6px;
}
#main_content .top2_news .top2_news_image
{
background: url(http://farm3.static.flickr.com/2509/3847739522_6980c393a3_o.gif) no-repeat;
width: 90px;
height: 65px;
padding: 4px;
}
.top2_news_image img {
width:90px;
height:65px
}


#main_content .top2_news h2
{
padding-top: 2px;
}
#main_content .top2_news h2 a
{
color: #002dbe;
text-decoration: none;
}
#main_content .top2_news h2 a:hover
{
text-decoration: underline;
}
#main_content .top2_news .dot3x1
{
background: url(http://farm4.static.flickr.com/3574/3847739556_d334d7aa61_o.gif) repeat-x center

center;
margin: 10px 0;
height: 1px;
font-size: 1px;
}
#main_content .topo_news
{
width: 174px;
float: right;
background: url(http://farm4.static.flickr.com/3508/3846949497_b0f76c94df_o.gif) no-repeat;
padding: 5px 1px 0 1px;

}
#main_content .topo_news .topo_news_title
{
background: url(http://farm3.static.flickr.com/2598/3846949449_4c4b03d2fa_o.gif) no-repeat;
width: 160px;
height: 22px;
color: #FFF;
padding: 4px 0 0 14px;
font-weight: bold;
font-size: 11px;
}
#main_content .topo_news ul li
{
background: url(http://farm3.static.flickr.com/2532/3847739582_8f41366c2f_o.gif) no-repeat 8px 10px;
padding: 2px 2px 2px 20px;
list-style: none;
}
#main_content .topo_news ul li a
{
color: #002392;
font-weight: bold;
font-size: 11px;
line-height: 1.5em;
text-decoration:none;
}
#main_content .topo_news ul li a:hover {text-decoration: underline;}
</style>

- Code màu cam : là độ rộng của ảnh lớn nhất
- Code màu đỏ : là độ rộng của 2 ảnh nhỏ hơn
- Code màu xanh : là độ rộng của các cột của tiện ích (gồm 3 cột : top1_news, top2_news, topo_news)
- Xem hình minh họa bên dưới :

- Lưu ý : thay đổi lại độ rộng của các cột để hiển thị tốt nhất trên blog của mình (kể cả các ảnh nền). Code trên chỉ là code mẫu để các bạn tham khảo. Ở code mẫu này mình cũng đã resize lại tương đối phù hợp rồi (độ rộng 525px;)

4. Save template.

5. Tạo widget HTML/javascript và dán code bên dưới vào :

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
imgnew = "http://farm4.static.flickr.com/3438/3847739416_077831a5c5_o.gif";

showRandomImg = true;

aBold = false;
summaryPost = 147; // Phần summary post sẽ hiển thị
numposts = 12; // số bài viết sẽ hiển thị
topoTitle = "Bài viết khác";
label = "Love"; // Nhãn cần hiển thị bài viết (nếu muốn hiển thị bài viết của cả blog thì không cần quan tâm dòng này)
home_page = "http://fandung.blogspot.com/"; //thay đổi thành địa chỉ URL blog của bạn

</script>
<script src="http://data.fandung.com/blog/demo/Z-homepgae/z-recent-label.js" type="text/javascript"></script>

- 2 dòng code màu đỏ bạn có thể thay đổi tùy thích (xem hình minh họa bên dưới)

☼ Để hiển thị các bài viết mới cho cả blog thì các bạn thay code bên dưới :

<script src="http://data.fandung.com/blog/demo/Z-homepgae/z-recent-label.js" type="text/javascript"></script>

thành code bên dưới:

<script src="http://data.fandung.com/blog/demo/Z-homepgae/z-recent-post.js" type="text/javascript"></script>

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


Enter your mail address:

40

Yeusuckhoe

Bai viet nay hay day, phu hop voi trang kieu tin tuc.

Tuấn P.H.A

cái này phối hợp với menu bo-blog của anh dũng không biết đẹp không ta thôi đợi anh dũng viết hướng dẫn rồi test luôn ^^!

Mê Vui

Chờ đợi ^^ !

share4vnn

chà chà... đẹp quá ta !

mmovn

he he... dạo này bận rộn quá a dũng à...
chả test tiếc gì nữa..
bữa nào rảnh phải thử cái coi

Mê Vui

Quá đẳng kấp - nhưng mà làm có vẻ khó đây !

Hay anh Dũng vik hẳn 1 temp mới cho nó choáng ^^ !

fandung

@Mê Vui : choáng thì có choáng đó, nhưng cũng đâu phải dễ, với lại cũng ngốn nhiều thời gian lắm, mà anh thì dạo này bận rồi :D

hophong

Tuyệt quá, không thể chê vào đâu được. FD làm thêm cái dưới cho trọn bộ. :D

Cao Lâm

sao em test thử ko dc khi em thay địa chỉ blog của anh bằng địa chỉ blog của em thì nó ko hiện :-s

fandung

@Cao Lâm : nếu bạn xài file z-recent-label.js tức là hiển thị bài viết theo 1 nhãn nhất định thì phải thay đổi code :
label = "Love";

thay Love thành nhãn mà bạn muốn hiển thị bài viết.

P/s : sr mọi người mình post thiếu file JS dùng cho hiển thị bài viết của cả blog. Sẽ cập nhật ngay

Cao Lâm
Cao Lâm

CẢm ơn anh nha em làm dc rồi demo:http://vn360.blogspot.com

vutd

Chào FanDung và mọi người! bên mình vừa khai trương chương trình đặt banner liên kết tới blog được truy xuất. FanDung và các bạn thiết kế banner 468x60 px để mình cập nhật nhé

fandung

ok Anh Vietutd

Trần Thừa

Post code js qua googlepages đi bác

txthai1405

style này cũng được quá nhỉ? FD cố gắng post nhiều bài hay hơn nữa nhé để các bloger học tập

Viet's Beauties

Hi anh Dung,

Anh co the viet doan code chi co phan khung recent posts ma khong co phan hinh anh duoc khong. Cam on anh

Unknown

Làm khó quá bác ơi :( http://www.duyanhblog.com/

Phan Dũng

@www.duyanhBlog.com : khó là làm cho nói phù hợp với blog mình thôi, cố gắng đi :D

Khách (ẩn danh)

Thanks you,Mysite http://www.cogiaothao.info

Thiên Long

Mình đã ẩn nội dung trang chủ - giờ muốn đưa phần hiển thị này xuống mà chưa đưa được. Xin hướng dẫn giúp mình với. (covua.gso.media@gmail.com)

blonghung

pro vãi chưởng =((

Hung Nguyen

@Fandung: Mình đã thử làm Pro TabNews và 1 cái như bài này viết nhưng mình hỏi là làm cách nào để ẩn đi 2 thành phần này khi bấm vào xem từng bài một?

Finance

anh phan Dung ui, cho em hoi, làm như anh hướng dẫn thì nó luôn luôn hiện thị ở trang HOME như vây. nhưng nếu em muốn là khi mình chuyển sang Menu khác thì nó không hiện thị như ở HƠM nữa thì làm như thế nào? nghĩa là cái phần hiển thị ở trang chủ nó sẽ phải ẩn đi đó :)) mong anh sơm giúp đỡ, cảm ơn anh nhiều

Nguyễn Lê Giang

Anh Dũng ơi, kíu em với. Từ tối qua đến tối hôm nay, em làm theo chỉ dẫn của anh mà vẫn không xong :((

Cái top2 new, có chữ và ảnh cứ bị lung tung và chèn lên nhau, anh giúp em chỉnh cho nó cách đều ra đi.
Blog em đây: http://giang127.blogspot.com
Anh comment sớm nhé, em bất lực mất rùi ....

Hồ Công Cường

FD check lại dùm tôi tip này đi, nó không hiện hình ảnh đại diện của bài viết, thay vào đó là hình notthumbnail (?)
Reply nhanh nhé!

son

http://fandung.110mb.com/JS-files/z-recentposts/z-recent-label.js

mình muốn up file .js thế nào phải làm sao chỉ mình với

Thien Van Store

Bác à lỗi vỡ khung menu bên trái của blog các nhãn label ở bên trái trôi xuống phía duwois hết cách khắc phục làm sao bác nhỉ?

B

ko làm được. chán

B

sao mình nhấn vào link bài viê mà mấy cái widget ko mất đi nhỉ?help me

Sim 9x

blog của bạn pro thiệt. Thế giới Sim VIP http://simvip.co.cc Mời các bạn ghé chơi

Người đưa tin

Bếp nghiệp dư: Sao mình làm nó ra lỗi no image hoài ah???

[SeS] St0Rm

bác xem giúp em cách sửa cái cột topo_news, nếu tiêu đề bài viết dài quá toàn bị tràn xuống dưới với :((

Unknown

Chào bạn:
Trước hết cảm ơn bạn vì bài viết quá hay.
Minh đã làm như hướng dẫn của bạn. Tuy nhiên bị lỗi như sau, bạn chỉnh giúp mình nhé:
- Mình đã chỉnh lại độ rộng của 3 cột để phù hợp với blog của mình: cột 1: 400 cột 2: 150 Cột 3: 250. Vì tổng bề rộng blog là 800;
Nhưng khi xem Blog thì 3 phần cách nhau không đề nhau (Cột giữa gần với cột bên trái quá, xa cột bên phải)
- Chữ trên cột 3 (bên phải) bị lọt ra khổi ô, phải chỉnh chỗ nào vậy?
Bạn xem Blog của mình nhé: http://sangnguyenms821087.blogspot.com.
- Mình muốn bỏ cột ở giữa (cột 2) đi được không? Vì mình thấy chỉ cần 2 cột như trabf dantri.vn đó.
Bạn nhớ hồi âm cho mình nhé: sangnguyenma@gmail.com.
Cám ơn bạn

Unknown

MÌNH KHÔNG LÀM ĐƯỢC BẠN À

GIANG

@SangnguyenMS: Bạn có thể xem mẫu này, cũng na na dantri va vnexpress

@Phụ Trách Nhân Sự: bạn nên chỉ cho các widget racent post hiện ở trang chủ thôi, khi xem bài viết nó vẫn còn hiện ra kìa.

GIANG

@SangnguyenMs: xin lỗi, thiếu link: http://www.fandung.com/2009/07/style-moi-cho-tien-ich-recent-post-theo.html

caycanhnonbo

hichic sao em không làm như vậy ở trang chủ được anh Dũng ơi

blog tu

cay xa den
Phan dũng ơi, Mình mún hỏi cách hiện thị bài đăng giống trang chủ Share2Vn thì làm như thế nào nhỉ? dũng giúp mình với

Khoa NN-VH Trung Quốc

Không hiểu sao mình cứ add widget này vào là các widget ở right side bar cứ chạy vào khu vực main content, FanDung giúp mình với!



☺ 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