Loading post navigation ...
 
 

Pro page

44
Nhận xét

[ Yêu cầu ] : Hiển thị bài viết ngoài trang chủ giống như trang tin247.com

| by Phan Dũng | views

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

Theo yêu cầu của bạn Thuấn (share4vnn.tk)
[FD's BlOg] - Theo yêu cầu, thủ thuật sẽ tạo các chuyên mục ngoài trang chủ, mỗi chuyên mục tương ứng với 1 nhãn. Bài viết mới nhất của nhãn đó sẽ hiển thị có kèm ảnh thumbnail, các bài viết khác sẽ hiển thị dạng list, có kèm hiệu ứng mô tả bài viết. Đây là 1 style lấy ý tưởng từ trang tin247.com.

Cập nhật yêu cầu của bạn Vietmanga (vietmanga.blogspot.com) - (3/7/2009)

Xem demo trực tiếp ở đây.

Hình ảnh minh họa từ trang tin247.com


và đây là kết quả sẽ dùng cho blogspot:

Nếu bạn nào muốn thực hiện giống như trang tin247.com thì phải làm 4 bước sau:
- Bước 1: làm ẩn bài viết mới nhất ở trang chủ.
- Bước 2: tạo các widget HTML/javascript, mỗi widget là 1 chuyên mục, sau đó dán code của thủ thuật vào.
- Bước 3 : Chỉ cho phép các chuyên mục vừa tạo hiển thị ở trang chủ.
- Bước 4 : là bước trang trí cho các chuyên mục, như tạo khung, màu nền, tạo header cho các chuyên mục...

Và ở bài viết này mình sẽ không hướng dẫn các bạn từng bước, mà chỉ cung cấp cho các bạn code của thủ thuật mà thôi. Còn thủ thuật chỉ cho phép các widget này hiển thị ở trang chủ hoặc ẩn bài viết ngoài trang chủ, các bạn có thể tham khảo bài viết này.

☼ Và bây giờ ta bắt đầu :
1. Đăng nhập blog
2. Vào bố cục
3. Vào chỉnh sửa code HMTL
4. Dán code CSS bên dưới vào trước dòng code ]]></b:skin>

.mota{
position: relative;
z-index: 0;
text-decoration:none;
}

.mota:hover{
background-color: transparent;
z-index: 50;
}

.mota span{
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
border: 1px solid #000;
visibility: hidden;
color: black;
text-decoration: none;
}

.mota span img{
border-width: 0;
padding: 2px;
}

.mota:hover span{
padding:5px;
visibility: visible;
top: 20px;
left:50px;
width:250px;
background:#ccc;
text-align: justify;
}

5. Save template.
6. 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";


showRandomImg = true;
tablewidth = 245;
cellspacing = 1;
borderColor = "#30a1db";
bgTD = "#fff";


imgw = 130;
imgh = 130;

imgwidth = 60;
imgheight = 60;

fntsize = 12;
fontsize = 18;
fontsizecm = 11;

acolor = "#000";
titlecolor = "#f00";
aBold = true;
icon = " » ";

text = "Nhận xét";

showPostDate = true;
poston = "Ngày đăng :";

minisummaryPost= 200;
summaryPost = 350;
summaryFontsize = 12;
summaryColor = "#000";
icon2 = " » ";

numposts = 8;
sobaiviet = 10;
label = "Love";
nhan= "Tình Yêu";
home_page = "http://fandung.blogspot.com/";

</script>

<script src="http://data.fandung.com/blog/demo/label-tin247/a-label.js" type="text/javascript"></script>
<script src="http://data.fandung.com/blog/demo/label-tin247/b-label.js" type="text/javascript"></script>

Để có thể hiểu rõ và tùy chỉnh code theo ý mình thì các bạn xem hình minh họa bên dưới:


Một vài thiếu sót của thủ thuật : do mình không rành về việc chỉnh sửa code javascript, nên thủ thuật này không hoàn hảo cho lắm :

+ Thứ nhất : chưa thực hiện được việc bài viết mới nhất (đầu tiên) không cho phép hiển thị ở list, vì thế phải dùng tới 2 file javascript.
+ Thứ 2 : chưa áp dụng được hiệu ứng mô tả bài viết bằng javascript (như của trang tin247.com) vào thủ thuật này.

Hy vọng sau này mình sẽ rành hơn về javascript để có thể có nhưng bài viết tốt hơn.


☼ Thực hiện yêu cầu của bạn Vietmanga
- Trong yêu cầu có việc lấy bài viết từ 1 blog khác, cái này rất đơn giản, bạn chỉ việc thay link(code màu xanh) trong code home_page = "http://fandung.blogspot.com/"; thành URL của blog mà bạn muốn lấy bài vết.

Yêu cầu chỉnh sửa như hình bên dưới:


Và đây là kết quả :

Xem demo trực tiếp: http://data.fandung.com/blog/demo/label-tin247/fix2/index.html

☼ Và đây là code của thủ thuật :
- Lưu ý, code chỉ dùng được cho 1 blog, nếu muốn hiển thị cho nhiều blog thì phải chỉnh sửa lại đôi chút trong file JS.

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

imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
img_icon = "http://farm3.static.flickr.com/2426/3638176588_31366a6822_o.gif";

showRandomImg = true;

imgw = 130;
imgh = 130;

fntsize = 12;
fontsize = 16;
fontsizecm = 11;
acolor = "#000";
titlecolor = "#f00";
aBold = true;

text = "Nhận xét";

showPostDate = true;
poston = "Ngày đăng :";

summaryPost = 350;
summaryFontsize = 12;
summaryColor = "#000";

numposts = 6;
home_page = "http://www.fandung.com/";
blogname = "Blog FD";

</script>

<script src="http://data.fandung.com/blog/demo/label-tin247/fix2/fix1-247-post.js" type="text/javascript"></script>

<div style="padding-left:30px;">
<script src="http://data.fandung.com/blog/demo/label-tin247/fix2/fix-247-post.js" type="text/javascript"></script>
</div>

- Vài lưu ý :

+ img_icon = "http://farm3.static.flickr.com/2426/3638176588_31366a6822_o.gif"; : đây là link của ảnh icon đầu dòng.
+ padding-left:30px; : có thể tùy chỉnh lại, nếu muốn thụt vào nữa thì tăng lên là 40px, 50px;...
+ blogname = "Blog FD"; : tên blog mà bạn muốn hiển thị bài viết.
+ Những đoạn code khác thì có lẽ khá quen thuộc.


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


Enter your mail address:

44

vietutd

Tuyệt cú mèo. Tinh thần vì cộng đồng của Fan Dung thật đáng quý.

fandung

thanks anh Vietutd , bài mới đăng chưa đc mấy phút anh đã bóc tem :D

LouLou

đúng vậy, quá tuyệt, những thiếu sót mà bác nói em thấy ko ảnh hưởng gì lắm
phần mô tả em nghĩ ko nên hiện ảnh vì như thế trang chủ sẽ rất nặng nếu ảnh của nhiều bài viết load về

^^

Quá khủng ! ^^ ! kái này thì kực hay nhoa ^^ !để em thử xem

fandung

@LouLou: đúng rồi, nếu mình tạo mô tả như trang tin24.com thì sẽ dùng tới 1 file javascript nữa, như thế sẽ rất nặng.

Thành Công

Hix cái này hay quá mà qua bên tui phải chia header thì sẽ ko đẹp, phải ma giáo với mấy cái màu nền cho giống cái template blog thì đuối luôn :(

phattrien▲so

Khac gi cai anh dang thuc hien ben vnpressnet.com dau phai khong DUng, anh su dung cai recent posst cua anh vo ys ma.

phattrien▲so

Nhuwng xem xet lai thay cuc pro. Luc nao ranh anh phai lam lai theo cai thu thuat cua em.

Cam on FD nhieu nhe.

Phan Dũng

@Phattrienso: ờ, thì em cũng dùng cái recent posts của Anhvo mà :D

share4vnn.tk

hoan hô anh dũng...yêu cầu của em là thế đấy..à mà anh ơi...tên em là thuấn..ko phải là thuận :(

share4vnn.tk

anh dũng ơi..làm ơn tắt hộ em cái hiệu ứng hiện ảnh và chữ khi chỉ vào link bài viết cùng chủ đề đi..em nghĩ như vậy hay hơn và chuyên nghiệp hơn

Phan Dũng

@Thuấn: vậy hả, anh cũng ko biết, tại mấy lần trước chát quên hỏi tên của em, nên anh ghi đại là Thuận luôn :D, ai dè trật :D

Như vậy em không muốn nó hiển thị phần mô tả à, tại anh tưởng em muốn làm giống y như nó, nên anh thêm phần mô tả vô luôn :D

1vn.biz

ẩn bài viết mới ở trang chủ như nào vậy anh FD :( em ấn vào link kia nhưg nó là ẩn Widget mà :( em đâu thấy nhắc đến ẩn bài viết đâu T_T

bùi văn tú

trang blog của bạn load chậm quá

Phan Dũng

@1vn.biz: anh đang post bài này, em theo dõi blog nhé.

Tùng Shady

hay day, nhung minh thich don gian nen se hok lam, nhung bai viet cua ban dung la rat hay

Phan Dũng

Thanks bạn Tùng Shady đã ghé thăm blog mình và cũng cảm ơn lời khen của bạn.

Quang Minh

anh fandung ơi, làm sao để bỏ cái phần nhận xét đi dc vậy a?

Quang Minh

à quên, còn nữa, a fandung ơi, e làm 5 cái widget thì cái thứ 5 nó hông có hiện lên cái dòng "Bài viết khác từ chuyên mục ..." giờ phải làm sao hở a?

fandung

@Quang Minh : bỏ dòng Nhận xét đi thì em chỉ cần sửa dòng code text = "Nhận xét"; thành text = "no";

cowboyvn

FD ơi! Mình muốn sửa lại font hiển thị là Arial thì làm sao? Tại sao mà mình cài đặt thủ thuật này một thời gian thì giờ nó không hiện hình thumnail nữa? Mặc dù đã chuyển file javascript sang host 110mb của mình rồi. Toàn ra hình No Image không à. www.seosite1.com. FD coi dùm mình nha. Cảm ơn nhiều

Phan Dũng

@cowboyvn: à, mình hiểu rồi, đó là do bạn chọn chế độ hiển thị link feed dạng Summary đó, do vậy mà nó không tìm thấy ảnh để hiển thị.

Bây giờ bạn phải chỉnh qua chế độ hiển thị feed dạng full. Để điều chỉnh lại, bạn vào Bảng điều khiển » Vào cài đặt » Vào phần nguồn cấp trang web » Ở phần "Cho phép nguồn cấp dữ liệu blog" chọn chế độ đầy đủ.

trantuan

Mình muốn chỉnh cho text chỗ sumamrypost=350 và text ở các link bên dưới thành bình thường chữ không phải là in đậm thì chỉnh chỗ nào hả Bạn? Mình tìm mà không thấy thẻ b ở chỗ nào, cảm ơn Bạn nhiều!

trantuan

Mình nhờ Bạn có thể sửa lại code 1 chút cho mình như hình này được không Bạn ơi ? rất mong bạn giúp mình, http://img26.imageshack.us/img26/5406/nhobandung.gif Cảm ơn bạn nhiều!

fandung

@trantuan: aBold = true; thuộc tính này là chỉnh chữ đậm đo bạn. muốn bỏ chữ đậm thì chỉnh lại thành aBold = false; , nhưng khi chỉnh vậy thì tất cả các chữ đều ko in đậm. MÌnh ko có tùy chỉnh từng phần.

- CÒn phần summary post, mình có minh họa trên hình đó, có 2 phần summary post, bạn xem lại ở trên rồi chỉnh.

- CÒn việc tùy chỉnh như hình của bạn đưa, mình có thể chỉ ngay cho bạn việc sửa bỏ comment và ngày đăng:

+ text = "Nhận xét"; thay bằng code text = "no";
+ showPostDate = true; thay bằng code showPostDate = false;
+ Còn việc chỉnh chữ đậm thì như ở trên.

+ CÒn 2 việc còn lại, thay đổi icon và dòng chữ thì mình sẽ sửa link JS sau.

Phan Dũng

@trantuan : đã thực hiện theo yêu cầu của bạn.

Xem demo ở đây : http://fandung.110mb.com/label-tin247/fix/index2.html

Thực hiện tương tự thủ thuật trên, nhưng có những thay đổi nhỏ :
+ thêm dòng code bên dưới (đây là link ảnh icon phía trước tiêu đề bài viết)
img_icon = "http://farm3.static.flickr.com/2426/3638176588_31366a6822_o.gif";

vào sau dòng code này:
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";

thay link JS :
+ http://fandung.110mb.com/label-tin247/a-label.js thay bằng link này :
http://fandung.110mb.com/label-tin247/fix/fix1-s2-label.js

+ http://fandung.110mb.com/label-tin247/b-label.js thay bằng link này :
http://fandung.110mb.com/label-tin247/fix/fix-s2-label.js

Vietmanga

Anh FD sửa code lại như cái hình này cho em với:
http://i182.photobucket.com/albums/x263/orcsy/p1.gif

Thanks anh rất nhiều. :D

fandung

@Vietmanga : đc bạn, để mình fix lại rồi cập nhật bài sau :D

Minh Hai

Hay quá. Cám ơn FD nha

cowboyvn

Trong phần thủ thuật đã chỉnh sửa lại đó anh FD. Làm các nào hiện bài theo label của blog khác vậy anh?

phattrien@so

Anh làm cái kiểu thủ công nông dân, nên nó không đẹp cho lắm, cái kiểu anh làm là ghép nối thôi, kiểu này của Dũng hay và gọn nữa, anh vừa áp dụng cho vnpressnet thấy pro hơn nhiều.

Anh xin luôn bài này nhé, mà từ hỗi biết cái cu cậu tên FanDung mình lười search trên mạng những thủ thuật của mấy ông nước ngoài qá, cứ vo FD cho nó tiện.:D

phattrien@so

Anh làm cái kiểu thủ công nông dân, nên nó không đẹp cho lắm, cái kiểu anh làm là ghép nối thôi, kiểu này của Dũng hay và gọn nữa, anh vừa áp dụng cho vnpressnet thấy pro hơn nhiều.

Anh xin luôn bài này nhé, mà từ hỗi biết cái cu cậu tên FanDung mình lười search trên mạng những thủ thuật của mấy ông nước ngoài qá, cứ vo FD cho nó tiện.:D

Phan Dũng

Cám ơn anh PTS vì những lời khích lệ của anh :D

Tinh

Một cao thủ về blogger mà mình đã không biết, cám ơn về những thủ thuật hay của bạn

Phan Dũng

@Tinh : chào bạn, rất vui khi đc bạn ghé thăm vào theo dõi blog :)

phattrien@so

fandung.110mb.com có vấn đề rồi

fandung

uh, lâu lâu nó bị khìn , host free mà anh :(

ngan ling

bài này rất hay nhưng anh ơi có thể nâng cấp lên
có khung đóng được không

Khách (ẩn danh)

Khó xơi rùi .e làm theo mà không được. có rất nhiều thủ thuật của anh hay thiệc đó , có cái e thử code với notepad thì chạy ok nhưng khi áp dụng cho blogspot lại không được.k phải do link file JS die , nguyện nhân do sao nhỉ nhỉ anh FD ?

Khách (ẩn danh)

Ngoài lời cảm ơn, thật không biết nói gì hơn trước tấm lòng của các bạn. Chúc nhóm BIOg FD luôn gặt hái được thành công.
TatThiet

Bin™ hAndSomE

thủ thuật hỏng r`

Trai Đất Mũi (admin)

Cảm ơn FD! Cách hiển thị này cũng được sử dụng khá nhiều, tuy nhiên mình thấy thủ thuật trên có một nhược điểm là sử dụng tới 2 file JS và bị lặp lại bài viết đối với bài viết đầu tiên. Mình thấy điều này không cần thiết. Mình đã tham khảo thủ thuật này và đã khắc phục 2 lỗi trên (chỉ còn 1 file JS và không lặp bài), hy vọng điều này sẽ giúp thủ thuật này hoàn thiện hơn. Bạn quan tâm có thể xem http://www.traidatmui.com/2010/03/hien-thi-bai-viet-giong-trang-tin247com.html

Bạn xem phần cập nhật

topviet247

em làm theo nhưng ko được mong chỉ giáo ạ

bich phuong nguyen

Mình rất cảm ơn bài viết hay và đúng chủ đề mình đang tìm, rất hay và thực tế
quán karaoke giá rẻ ở tphcm



☺ 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