Loading post navigation ...
 
 

Pro page

63
Nhận xét

[ Yêu cầu ] : Hiển thị bài viết ngoài trang chủ giống template Revolution City

| by Phan Dũng | views

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

Theo yêu cầu của bạn dichthuatviet (dichthuatviet.blogspot.com)
[FD's BlOg] - Thủ thuật này mình sẽ giới thiệu cho các bạn cách trang trí cho trang chủ của blogspot. Thủ thuật sẽ hiển thị các bài mới theo nhiều nhãn khác nhau ở trang chủ, với bố trí thành các ô , với mỗi ô tương ứng với 1 nhãn khác nhau.
Tham khảo thủ thuật từ template Revolution City
Cập nhật : Fix lỗi trên IE6 (15/8/2009)

Khác với bản DEMO mà mình đã giới thiệu trước, ở thủ thuật hoàn thiện này mình chỉ dùng 1 file JS thay vì 4 file JS như đã giới thiệu trước cho các bạn xem.

Xem DEMO template gốc : Revolution City

Còn đây là bản mình đã test : LIVE DEMO


Hình ảnh minh họa:

Hình ảnh đã test

Hình ảnh từ template Revolution City


Để thực hiển thủ thuật này, các bạn sẽ thực hiện 2 bước như bên dưới :
1. Đầu tiên sẽ là bước "Ẩn bài viết ở trang chủ" :
- Có thể tham khảo thủ thuật này ở đây

2. Sau khi đã ẩn bài viết ở trang chủ, các bạn hãy tạo 1 widget HTML/Javascript ở phần Main và dán tất cả code ở bên dưới vào :

<style type="text/css">
.featured {
background: #FFFFFF;
float: left;
width: 250px;
margin: 0px 10px 20px 0px;
padding: 10px 10px 10px 10px;
border: 1px dotted #94B1DF;

}

.featured img {
border: none;
margin: 0px 10px 0px 0px;
float: left;
width:70px;
height:70px;
}

#content {
width: 600px;
margin: 0px auto 0px;
padding: 10px 0px 0px 0px;
line-height: 18px;
}

#content h3 {
background: #FFFFFF url(http://farm3.static.flickr.com/2656/3807676662_397525ba0b_o.gif);
color: #FFFFFF;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
text-align: center;
text-transform: uppercase;
margin: 0px 0px 10px 0px;
padding: 7px 0px 5px 0px;
}

.botline {
border-bottom: 1px dotted rgb(148, 177, 223);
padding: 0px 0px 10px;
margin-bottom: 10px;
clear: both;
}
</style>

<div id="content">

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

imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";

showRandomImg = true;

aBold = true;

summaryPost = 70; // số kí tự tối đa cho phép hiển thị ở phần summary post
summaryTitle = 25; // số kí tự tối đa cho phép hiển thị ở tiêu đề bài viết

numposts = 3; // số bài viết đc hiển thị
home_page = "http://fandung.blogspot.com/";

label1 = "Love";
tLabel1 = "Tinh yeu";
Title1 = "Love";

label2 = "Film";
tLabel2 = "Phim truyen";
Title2 = "Film";

label3 = "Thu%20Thuat%20Blog";
tLabel3 = "Thu Thuat Blog";
Title3 = "Blog Tips";

label4 = "Xe";
tLabel4 = "Xe";
Title4 = "Xe Do";

</script>

<script src="http://data.fandung.com/blog/demo/Revolution-City-RP/4col-final.js" type="text/javascript"></script>
</div>


☼ Bây giờ sẽ là 1 hướng dẫn nho nhỏ cho các bạn thực hiện:
- Ở thủ thuật này ta sẽ có 4 ô cho phép hiển thị bài viết mới nhất cho mỗi nhãn, với độ rộng của mỗi ô là 250px, cộng thêm các khoảng căn lề và đường viền thì độ rộng tổng cộng của 1 ô sẽ là 250px + 2*10px + 10px + 2*1px = 283px, như hình bên dưới

- Như vậy muốn cho hiển thị được như trong demo, độ rộng của phần main của bạn tối thiểu phải là 566px. tốt nhất cứ thay đổi độ rộng của class featured (thay đổi giá trị 250px) để việc hiển thị được hợp lý nhất.
- ở mỗi ô sẽ là 1 nhãn, tương ứng với 1 ô sẽ có 3 giá trị sau :
+ label1 = "Love"; : đây là tên của nhãn mà bạn muốn hiển thị vào ô nội dung này. (tên này phải chính xác với nhãn đó)
+ tLabel1 = "Tinh yeu"; : tên hiển thị của link liên kết ở cuối mỗi ô nội dung (có thể thay đổi tùy thích)
+ Title1 = "Love"; : tiêu đề của ô nội dung này.
- Để việc hiển thị được hợp lý. tức là các ô có cùng kích thước, thì mình đã dùng thủ thuật rút ngắn tiêu đề, để các tiêu đề có cùng độ dài, tránh trường hợp tiêu đề của các bài dài ngắn khác nhau sẽ dẫn đến các ô có độ dài khác nhau, như thế trông ko được đẹp cho lắm.
- Còn về phần kích thước của ảnh thumbnail, các bạn có thể tùy chỉnh trong code CSS của class featured img.

Fix lỗi hiển thị không tốt trên IE6

- Do việc dùng 1 file JS nên thủ thuật không hiển thị được trên IE6, để khắc phục lỗi này, mình tạm thời trở lại bản ban đầu, tức mỗi ô nội dung sẽ dùng 1 file JS. Như thế ta sẽ có 4 file JS
- Để khắc phục điều này, các bạn chỉ cần thay đoạn code bên dưới :

<script src="http://data.fandung.com/blog/demo/Revolution-City-RP/4col-final.js" type="text/javascript"></script>
</div>

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

<script src="http://data.fandung.com/blog/demo/Revolution-City-RP/4col-1.js" type="text/javascript"></script>
</div>
<script src="http://data.fandung.com/blog/demo/Revolution-City-RP/4col-2.js" type="text/javascript"></script>
</div>
<script src="http://data.fandung.com/blog/demo/Revolution-City-RP/4col-3.js" type="text/javascript"></script>
</div>
<script src="http://data.fandung.com/blog/demo/Revolution-City-RP/4col-4.js" type="text/javascript"></script>
</div>

- Do mình không có thời gian nên tạm thời chỉ có thể fix lại như vậy, sau này sẽ có cách khắc phục tốt hơn.
Chúc các bạn thành công.


Enter your mail address:

63

share4vnn

to quá..bác nên thu nhỏ lại cho gọn.. width khoảng 250 thui

fandung

uh, anh thấy cũng hơi to, do đây là bản nháp nên anh mới làm sơ sơ vây thôi, như em nói 250px thì chắc hợp lý, tại đa số độ rộng của phần main thường là khoảng 500-600px.

anh đang tính gôm nó lại thành 1 file JS, nhưng chưa đc, để như thế này (4 file JS) load chậm quá.

dichthuatviet

@Anh Dũng: cảm ơn anh, mong chờ anh post sớm :D

fandung

có thể tối nay anh sẽ có bài post, do dạo này anh chỉ rảnh vào buổi tối mà thôi.

dichthuatviet

@Anh Dũng: vân em vui lắm, đội ơn bác

Khách (ẩn danh)

add thêm cái sideshow của nó nữa thì tuyệt vời FD à :X

vnbook

cái này hay nè đang đón xem :)

share4vnn

cái slideshow của nó thì ko khó...

fandung

nếu các bạn theo dõi kĩ những thủ thuật của mình thì sẽ để ý thấy là cái slideshow này mình đã thực hiện rồi, và có post 1 bài hướng dẫn rồi. :D

Thử tìm nó xem :D

share4vnn

cái template kia là của WP à...nhìn đẹp gì..rất giống template của blogspot.. chỉ cần mô ni phê chút là ok.. chờ bác hoàn thành thủ thuật này.. thứ 2 tuần tới thề với lòng sẽ làm 1 cái template blogspotb như thế

DNPB

anh ơi cho em hỏi cái này ạ, làm thế nào để cho ngoài trang chủ blog của mình, các bài viết nó hiển thị nhiều và có chữ "xem thêm" hay là "xem chi tiết" ạ? em tìm mãi mà ko biết ~X( anh giúp em với :( của em toàn hiện full 1 bài viết :((

danghienIT

danghienIT đã áp dụng nó vào blog của mình rùi mọi người vào xem nhé! Cảm ơn FD nhiều :D!

Tran & Lee Insurance Agency Team

Cái này mà thành công thì Revolution City sẽ rất đẹp!! Và em sẽ áp dụng nó cho blog mới chuyên về Vật Lý của SpTP. Bữa nào "khai trương" mời anh FD mới được :D

fandung

@Tiến : rất vinh hạnh :D, mình sẽ chờ , và sẽ có "phát biểu" đôi lời. hehehe :)

fandung

@_DNPB_ : đây là 1 trong những thủ thuật cơ bản để chỉnh sửa blogspot, bạn có thể vào trang của Anhvo (www.vietwebguide.com) mà tham khảo các thủ thuật về readmore của Anhvo, anh ấy đã ra tới version 4.0 rồi. có gì thắc mắc bạn cứ hỏi anh í, anh í rành vụ này lém.

Không phải mình ko muốn giúp bạn, nhưng thực ra trong blog mình ko có nhiều bài hướng dẫn cụ thể về việc tạo readmore cho bài viết, với lại bên blog của Anhvo đã có khá nhiều nên mình muốn giữ bản quyền cho Anhvo nên mình không phổ biến lại ở bên blog của mình, dù sao xem bên nào cũng vậy, bạn chịu khó qua đó xem nhé.

Rất vui vì có thêm 1 blogger mới như bạn ghé thăm blog của mình, có gì thắc mắc về blogspot bạn cứ vào khu vực "Hỏi & Đáp" ở blog của mình, ở đó mọi người sẽ hỗ trợ cho bạn (kể cả mình :D)

LouLou

anh Zũng giới thịu rất nhiều thủ thuật show bài viết hay, nhưng sao bác hok áp dụng cho chính blog FD nhỉ ;) blog FD hok hề xài bất kì widget bài mới có thumbnail nào trong khi bác sáng chế ra vô cùng style :)
Loulou chân thành cảm ơn bác Zũng, trc' nay đã xài rất nhìu thủ thuật từ bác rùi
Mong bác sắp tới có thêm nhìu bài hay cho ae nữa nhé.

Yeusuckhoe.blogspot.com

Link tải theme blogger revolution city nè. Fandung giới thiệu cho các bạn nhé. Dạo này thấy chú em ít bài.

http://dstats.net/download.php?file=http://deineshd.110mb.com/bloggertemplates/Revolution%20city%20blogger%20template.zip

fandung

@LouLou : bạn tinh ý nhỉ, mình cũng muốn dùng lắm chứ, như sợ load chậm nên ko dám dùng nhiều. Nếu có 1 host riêng, mình sẽ dùng ngay :D

@YSK : anh thông cảm, dạo này em bận từ sáng tới 5h30 chiều, nên ko có thời gian post bài

DNPB

dạ em thanks anh ạ ^^ em cũng hay vào blog anh để xem các tut hướng dẫn lắm ý :">

dichthuatviet

Hi Anh Dũng, một tuần mới vui vẻ nhé anh. Anh ơi em không tài nào xóa 4 ô đó đi và thêm widget html vào để đưa code của anh vào, anh có cách nào chỉ em với. Thanks anh nhiều.

hdu

có ai thử chưa. mình làm mài ko được. các bài viết nó ko nằm trong khung

Phan Dũng

@dichthuatviet : cái đó em xem trong code template , coi code của nó nằm ở chỗ nào rồi xóa đi, đơn giản thế thôi.

@hdu : sao các bài viết ko nằm trong khung đc nhỉ, thủ thuật này bạn đâu cần phải làm gì, chỉ cần thay đổi các label cho hợp lý là file JS tự động xuất ra cho mình.

Chỉ có thể là chạy hoặc ko chạy thôi, chứ sao lại bài viết ko nằm trong khung đc.

Bạn danghienIT đã test thành công trước khi mình post bài hoàn thiện luôn rồi đó, bạn qua bên ấy mà xem thử.

hdu

Mình tes trên FFox thì chạy bình thường nhưng trên IE6 thì bị lỗi
ảnh:(ảnh này mình tes ko thay đổi ji trên label cả)
IE
http://2.bp.blogspot.com/_j3whsUD5B0E/SoGTRdfBt2I/AAAAAAAACzM/XrfJ50f14tE/s320/ie.bmp
FF
http://4.bp.blogspot.com/_j3whsUD5B0E/SoGTQ-rBQQI/AAAAAAAACzE/r3dKJESBxLo/s320/ff.bmp

fandung

@hdu :để mình xem lại

Khánh Trắng®

Chào bạn Dung,
Bạn HDU nói đúng đó, mình cũng làm theo đúng hướng dẫn nhưng các bài nó không nằm trong 4 khung đó. 4 khung chỉ có 4 labels thôi, bài viết thì nằm ở ngoài và nhìn rất lộn xộn. Bạn kiểm tra lại xem nó bị lỗi như thế nào nhé!
Cái này thật sự rất hay và mình đang cần.
Chờ tin bạn.
Chúc bạn vui khỏe nhé!

Khánh Trắng®

Bạn Dũng ơi, luôn tiện cho mình hỏi la mình muốn làm cái box liên kết logo chạy ngang như ở dưới trang của bạn thì làm như thế nào? Bạn hướng dẫn cho mình với nhé!
Thanks!

fandung

@Khánh Trắng : bạn có thể tham khảo code này

http://sites.google.com/site/fdblogsite/Home/code-logo.txt

Phan Dũng

Cái lỗi không hiển thị tốt trên IE có thể là do mình đã gộp chung nó vào 1 file JS nên mới bị như vậy, nếu dùng nhiều file JS (mỗi label 1 file) thì không việc gì.

Mình sẽ khắc phục sau

sexy Darling asia

thanks FD nhìu lém rất nhiều thủ thuật FD trình bầy mình đã áp dụng và cảm thấy thủ thuật trình bầy khá dễ hiểu và ngắn gọn Thanks nhìu lém. kick vào Ads để thay choa lời cảm ơn nhá brro

Khánh Trắng®

Chào bạn Dũng,
Mình vẫn đang chờ bản sửa lỗi của bạn đấy!
Khi nào Sửa xong thì bạn Dũng nhớ làm luôn 6 ô hoặc 8 ô luôn nhé!
Đang sốt ruột chờ bạn đó!
Chúc bạn vui!

Ác Quỷ

Còn đây là giao diện giống trang home.iuvip.com nèk ^^

http://www.geocities.jp/RoboOnline19932/boxlabel/

Khánh Trắng®

Chao ban Dung,
minh da nang cap len IE8 roi ma no van khong thay doi duoc gi ca, minh khong biet no bi gi nua, xem demo cung vay. Con su dung Fix loi IE6 thi bai viet no co nam trong 4 o, nhung sap xep khong deu, va load cham lam ...
Thoi tam thoi minh phai cho doi tiep thoi, neu Ban Dung co link nao tuong tu ve bai viet nay thi gioi thieu cho minh voi nhe!
Cam on ban

NAD

Thủ thuật này sau khi thực hiện xong thì rất đẹp ở Home, nhưng khi vào trong một bài viết thì bài viết lại tụt xuống dưới sâu widget và ko còn đẹp nữa. Có cách nào khắc phục ko bác? :D

NAD

Hình như có cách cho ẩn widget khi vào một bài nào đó :D

ngan ling

anh dũng ơi cả ie8 nữa đấy

Phan Dũng

@NAD : bạn nên ẩn tiện ích này khi xem bài viết, như thế sẽ đẹp hơn.

@ngan ling : bị lỗi trên IE8 hả bạn ???

ucmasnb

em bị lỗi này anh chỉ giúp em với :(( em không giỏi về css :(

http://upanh.com/uploads/11-Sep-2009/wlh8a8otzvn11lf73p.png

thanks anh trước

ucmasnb

sao không ai giúp em vậy :(( sao em vào bài viết mà cái khung nó không ẩn đi :(( chiếm hết diện tích bài viết và load trang :((

Chi_bao^_^

thế e muốn là nhiều khung thì thế nào, 4 khung ít quá

Khách (ẩn danh)

Anh ơi. em muốn có thêm nhiều cột thì phải làm sao ạh

Lại Thế Dũng

To da an dc bai dang nhung them cai widget vao thi khong hien j ca da thu di lam lai nhieu lan,ban xem lai code nhe

Khách (ẩn danh)

hic. JS die rùi anh ơi

Unknown

Mấy cái file Js của anh die hết rồi anh ơi, anh up lại đi
http://fandung.110mb.com/4col-recentposts/4col-final.js

fandung

http://data.fandung.com/blog/demo/Revolution-City-RP/4col-final.js

Bạn có thể vào đây để xem lại thủ thuật ở bên mothuthuat.com

http://mothuthuat.com/thu-thuat-yeu-cau-hien-thi-bai-viet-ngoai-trang-chu-giong-template-revolution-city.html

Sau này có die file nào bạn cứ qua mothuthuat.com comment vào bài viết đó, rồi mình fix lại

HNT

Mình muốn tạo nhiều cột như thế này phải làm sao vậy bạn ? giúp mình với nha

Nguyễn Thanh Khương

Khi ấn vào link bài viết - thì các mục không bị ẩn đi - làm thế nào khi ấn vào 1 bài viết thì tất sẽ ẩn hết chỉ còn bài viết. ai giúp em với

Khách (ẩn danh)

Mong admin FD sớm fix lỗi xem trên IE cho anh em - và tối ưu hóa về 1 file JS thôi . thank anh nhiều

Dr.House

có cách nào bắt buộc các khung phải bằng nhau không fandung ơi, blog mình cái ngắn cái dài muốn thêm vài cột nữa mà không được, FD xem giúp nha, blog mình đây http://ghost2s.blogspot.com

cảm ơn FD trước!

Đồng Tính Việt

anh dũng ơi sao nó hiện trong bài viết nửa anh có cách nào khác phục không anh ........

Đồng Tính Việt

Anh dũng ơi em đã áp dụng thủ thuật này của anh nhưng khi nhấn vào xem 1 bài viết nào đó thì nó vẩn hiện trong bài viết đó luôn , có các nào chỉ cho nó hiện ngoài trang chủ không anh làm ơn trả lời dùm em nhe blog em đây !

http://dongtinhvn.blogspot.com/

Đồng Tính Việt

dakhucbuonsd@yahoo.com nick em

Unknown

@ Chỉ hiện widget ở trang chủ sẽ khắc phục đc lỗi của bạn .

Khách (ẩn danh)

Anh Dũng fix lỗi trên IE sớm giúp tụi em đi.

Huy Tập

anh dũng ơi thủ thuật này hay quá mà js bị die rồi, làm sao đây

Unknown

bẠN ƠI LÀM THẾ NÀO ĐỂ CÁI NÀY CHỈ HIỂN THỊ Ở TRANG CHỦ THÔI BẠN

GIANG

http://www.fandung.com/2009/05/thu-thuat-cho-phep-hien-thi-widget-o.html mình thích nhất thủ thuật này :)

iG4VN

Chào bạn Dũng, mình cũng mới tiếp xúc blogspot mới đây, và đến đây thì bí, mình làm theo như những gì bạn hướng dẫn, đã rất thành công, nhưng khi click vào để xem nội dung bài viết thì nó không ra 1 trang full nội dung hoàn toàn, mà nó lại nằm tận dưới cùng, bạn có thể hướng dẫn mình rỏ hơn ở khúc mắc này không. Và cũng nhân đây cảm ơn những bài hướng dẫn rất là bổ ích cảu bạn,chúc bạn nhiều niềm vui và sức khỏe để cống hiến cho cộng đồng blog Việt nhiều hơn nữa. chào bạn

iG4VN

mình lại quên mất cái link blog mình ^^!
http://next-gamevn.blogspot.com/

Khách (ẩn danh)

minh có hỏi về bài viết trang này ! mong bạ tham khảo và site mình ! và cho ý kiến ! rất thank bạn !
Nuế có thể ! bạn hướng dẫn mình nhé

Khách (ẩn danh)

site mình là ! thichghe.info ! thank bạn rất nhiều ! chào bạn

thaivinh68

ANH DŨNG ƠI
em muốn tăng thêm khung được không anh,hay chỉ được có 4 ô vậy anh.mong tin của tin
mail em là :thaichivinh@gmail.com

Admin
Lamnt

A ơi link .js bị die rồi a, link sơ cua cũng bị vậy luôn, a up lại file .js giúp e nha. Cám ơn a nhiều



☺ 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