Loading post navigation ...
 
 

Pro page

29
Nhận xét

[ Yêu cầu ] : Hiển thị bài viết dạng list ở các trang Home, Label, Archive

| by Phan Dũng | views

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

Theo yêu cầu của bạn Phạm Xuân Tú (xtu08.blogspot.com)
[FD's BlOg] - Mình đã từng giới thiệu với các bạn thủ thuật chỉ hiển thị tiêu đề bài viết ở các trang Home, Label, Archive (xem thêm ở đây), hôm nay mình sẽ giới thiệu 1 cách hiển thị cũng tương tự, nhưng có hơi phức tạp hơn 1 chút. Cũng với dạng hiển thị dạng list, nhưng ở thủ thuật này sẽ bổ xung thêm phần ngày đăng, tác giả, nhãn...


Hình ảnh minh họa :

Đây là ảnh gốc của yêu cầu :

Đây là ảnh ở blog test mà mình đã thực hiện :
Chú ý : đây là thủ thuật tương đối "rối rắm", nếu bạn nào chưa rành thì hãy save template lại trước khi thực hiện, hoặc có thể test trước với blog mới nào đó. Nếu ai đã rành (tức là có thể tự gỡ bỏ nếu ko thích) thì có thể thử ngay trên blog của mình.

☼ Các bước để thực hiện thủ thuật:
A. Thiết lập lại ngày giờ hiển thị của bài đăng
B. Ẩn toàn bộ phần bài viết ở các trang Home, Label, Archive.
C. Thực hiện thủ thuật hiển thị bài viết dạng list.

I. Bước A : Thiết lập lại ngày giờ hiển thị của bài đăng
Để hiển thị được ngày giờ như trong hình demo, các bạn thực hiện các bước sau:
- Vào Cài đặt » Định dạng » tới mục Định dạng dấy thời gian , và điều chỉnh lại như hình minh họa bên dưới :


II. Bước A : Ẩn toàn bộ phần bài viết ở các trang Home, Label, Archive
Phần bài viết bạn sẽ có 3 chỗ phải ẩn, đó là Header bài viết, nội dung bài viết và phần Footer của bài viết.
- Phần Header bài viết : gồm có 2 phần, đó là tiêu đề và phần date-header (ngày đăng bài viết).
- Phần nội dung : chưa nội dung bài viết.
- Phần Footer : gồm ngày đăng, nhãn, tác giả...


Để hoàn thực bước 2 này, các bạn làm theo các bước bên dưới :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Nhấp chọn mở rộng mẫu tiện ích
4. Chèn đoạn code bên dưới vào trước thẻ đóng </head>

<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.post-footer {display : none;}
.date-header {display : none;}
.post-title {display : none;}
</style>
</b:if>

5. Tiếp tục tìm đoạn code bên dưới :

<data:post.body/>

hoặc có thể là

<p><data:post.body/></p>

và thêm đoạn code được đánh dấu highlight vào như bên dưới :

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>

- bước 4 là ẩn phần header & footer của bài viết, bước 5 là ẩn nội dung bài viết.
6. Save template.

III. Bước C : Thủ thuật chính
1. Trước tiên ta sẽ tạo header cho phần list này (xem hình minh họa)

- Các bước thực hiện :
a. vào bố cục
b. vào chỉnh sửa code HTML
c. chọn mở rộng mẫu tiện ích
d. tìm đoạn code bên dưới (hoặc tương tự):

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>

<b:include data='top' name='status-message'/>

<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>

e. thêm đoạn code được đánh dấu highlight như bên dưới:

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>

<b:include data='top' name='status-message'/>

<b:if cond='data:blog.pageType != "item"'>
<table style='background:#eee; width:100%'>
<tr>
<td style='width:70%; text-align:center; font-weight:bold;'>Tiêu đề</td>
<td style='width:15%; text-align:center; font-weight:bold;'>Tác Giả</td>
<td style='width:15%; text-align:center; font-weight:bold;'>Ngày đăng</td>
</tr>
</table>
</b:if>


<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>

- Khoan Save template, tiếp tục thực hiện sang bước 2.

2. Tạo & trang trí cho list bài viết:
a. Tìm đến đoạn code bên dưới:

<div class='post-header-line-1'/>
<div class='post-body entry-content'>

b. Thêm đoạn code được đánh dấu highlight như bên dưới:

<div class='post-header-line-1'/>

<b:if cond='data:blog.pageType != "item"'>
<table style='border-bottom:1px solid #aaa; width:100%'>
<tr>

<td style='width:70%; font-weight:bold;'>
[<span class='post-labels'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if></b:loop> </b:if>
</span>] <a expr:href='data:post.url'><data:post.title/></a>

</td>

<td style='width:15%; font-weight:bold; text-align:center;'>

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
</td>

<td style='width:15%; font-weight:bold; text-align:center;'>

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:post.timestamp/>
</b:if>
</span>

</td>

</tr>
</table>
</b:if>


<div class='post-body entry-content'>

- Thay đổi các code màu đỏ ở trên để có độ rộng thích hợp. Lưu ý, các code màu đỏ ở bước 1 và 2 phải bằng nhau để việc hiển thị được hợp lý.
- Save template để hoàn tất bước C này.

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


Enter your mail address:

29

viet-offer.com

boc tem cho ngay moi:D

VT

Cái này khá hay....cuối cùng blogger củng lột xác cải tiến gần tiến tới đa chức năng hơn ^.^

Phạm Xuân Tú

Cảm ơn fan dung nhé :D

min HMN

chà... công nhận rắc rối thật... save lại đã... sẽ có lúc em dùng tới

Trần Việt Thái

hay :) boc tems :x

fandung

thủ thuật này cũng ngốn cả 1 buổi tối của mình, thời gian test và post bài. Mình cũng rất tâm đắc với nhưng thủ thuật như thế này, 100% là của mình

Tuấn P.H.A

nhìn giống Bo-Blog wá anh dũng ơi em đang làm thử :D

Tuấn P.H.A

anh dũng xem giúp em với làm sao de xóa mấy cái viền em bọc đỏ lại http://upanh.com/uploads/20-Aug-2009/m2o7orhrccjw0joqcu6p.jpg giờ anh dũng

fandung

@Tuấn P.H.A : em thử coi code CSS của phần Nội dung bài viết xem, nó có lệnh nào là border-bottom hoặc border ko???

Rồi xóa nó hoặc ẩn nó đi, nói chung anh chỉ hướng dẫn sơ sơ đc như thế thôi, phải đi vào code anh mới trả lời chính xác đc

Tuấn P.H.A

hahha thanks anh dũng em làm được rồi :D

Tuấn P.H.A

anh dũng có cách nào tùy biến nó thành 1 dòng trắng 1 dòng xám 1 dong trắng 1 dong xám ... không anh dũng nếu được càng tốt không được củng không sao (được voi đòi luôn 2 bà trưng) :p:p:p

★☆★ Lê Hữu Tài ★☆★

Sẽ có ngày Bo-blog kiện FD vì tội lấy công nghệ show post của người ta đem về cho blogspot. Hehehe. :D

Thủ thuật này thật đáng để btemplate.com desize vài cái giống Bo :D Hihi

fandung

heheh, nói thiệt từ lúc nhận thủ thuật này, mình cũng ko để ý là nó là của bo-blog, mãi khi Tuấn P.H.A và Tài comment thì mình mới biết đó chứ.

À, nhân tiện Tài cho cái link logo khác đi nhá, logo của Tài hết Bandwith rồi, nên mình tạm ẩn logo của Tài rồi (nó làm lệch khung liên kết logo).

Tuấn P.H.A

em thích cái thủ thuật này rồi em xài luôn :D

Tuoitteen Blog

này FAnDung ,cám ơn bạn nhiều lắm nha!Nhưng thủ thuật này bị lỗi một chỗ,khaak,may mắn tôi đã tìm ra và sữa đc rồi,Bạn xem wa Blog tôi đây,Các bài viết khích sát lại với nhau giống Trang Bo-BLog rồi đó.
Link tôi đây
http://tuoiteenblog.blogspot.com/
Với thủ thuật này làm blog tôi Load nhanh lên rồi đấy!

fandung

@Tuoitteen Blog : bạn có thể chia sẻ cho mọi người là lỗi ở chỗ nào ko?
Do mình test bên blog test của mình không thấy có khoảng cách đáng kể nào giữa các bài viết.
Với lại việc các bài viết nó có sát lại với nhau hay ko còn tùy thuộc vào template nữa bạn à, như bạn thấy đó, trong thủ thuật mình ko có dùng 1 lệnh nào liên quan tới khoảng cách giữa các hàng cả.

NAD

Thủ thuật hay, thanks. Nhưng mình muốn chỉ áp dụng cho Labels thì thế nào nhỉ? :D

Tùng Shady

lam rui, nhung ko dc nhu y mun

Phan Dũng

@Tùng Shady : ko dc như ý muốn chắc có thể do khoảng cách của các list ko sát nhau phải ko? nếu vậy bạn có thể tham khảo bài viết này để loại bỏ khoảng trống đó đi, như thế sẽ đẹp hơn:

http://fandung.blogspot.com/2009/09/meo-nho-cho-viec-loai-bo-khoang-trong.html

Mr.Kít

Anh có thể chỉ cách làm với label được k ạh !

Khách (ẩn danh)

Bổ sung chứ không phải bổ xung. Dũng viết sai chính tả. không chấp nhận được. hị hị

Gain Capital

Thanks, bài post rất hay !
http://patternstrader.blogspot.com/

mAn ĐiezEl

CẢM ơm bài viết nhưng e cũng chỉ muốn cho nó hoạt động theo nhãn hoặc archive?thi pải làm sao vậy anh nhở
? ;;)

haductu

Fan Dung Ơi,sao blog của mình khi click vào 1 nhãn bất kỳ là nó cứ hiển thị chi tiết tất cả các bài viết của nhãn đó như là khi mình xem 1 bài viết vậy,giờ mình muốn khi click vào 1 nhãn nó sẽ hiển thị các bài viết với ảnh và tiêu đề bài viết như phần comment thì làm như thế nào vậy Fan Dung ,Rất mong được sự giúp đỡ ,xin chân thành cảm ơn

Ao Kenh

hay lắm đã có demo
http://download.bkav.thaudem.com

ilovekazehikaru

Anh ơi, nó hiển thị không đủ số bài mỗi label / archive. Tức là nếu label có 5 bài, em để số post tối đa mỗi trang là 10, nhưng nó chỉ hiển thị được có ba, bốn bài. CÒn những bài cũ nó ẩn đi, không có nút next / previous luôn.

Lâm Voi

Một demo cho anh em nữa nè :d mp3.nethoabinh.com

Minh Tuấn .

sao mình làm thì nó ẩn luôn nhỉ, nóp không hiên tên bài viết lên

Minh Tuấn .

Mình đã làm đúng theo hướng dẫn rồi nhưng không hiểu sao nó ra thế này, bác Dũng coi giúp với http://demo.ltnt.org



☺ 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