Loading post navigation ...
 
 

Pro page

6
Nhận xét

Mẹo nhỏ cho việc loại bỏ khoảng trống khi ẩn phần date-header (ngày đăng)

| by Phan Dũng | views

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

[FD's BlOg] - Đây là 1 thủ thuật nhỏ thích hợp cho các bạn tự chỉnh sửa template cho blog từ những template mà blogger cung cấp sẵn. date-header là phần hiển thị ngày đăng của bài viết ở ngay trên tiêu đề bài viết, trước kia mình có giới thiệu thủ thuật làm ẩn nó đi, tuy nhiên khi nó ẩn đi vẫn để lại 1 khoảng trống nhỏ ở phía trên tiêu đề bài viết. Ở bài này mình sẽ hướng dẫn các bạn loại bỏ nó đi.

Thông thường, ở trang chủ (homepage) thì phần date-header chỉ hiển thị ở ngay trên bài viết mới nhất trong ngày đó, còn trong trang bài viết thì nó luôn hiển thị ở phía trên tiêu đề bài viết.


Trước kia mình có giới thiệu cách ẩn nó là dùng lệnh display:none; để làm ẩn nó, như code bên dưới :



h2.date-header {
font-weight:bold;
text-transform:uppercase;
letter-spacing:.1em;
font-size:90%;
color:#F00;
display: none;

Và ta có kết quả như bên dưới:


Tuy nhiên dùng cách này để làm ẩn nó đi thì sẽ tạo ra 1 khoảng trống nhỏ, các bạn so sánh hình trên với hình bên dưới này sẽ rõ.


Khoảng trống này sẽ làm cho việc hiển thị bài viết ở trang chủ không được đồng nhất. Ví dụ như thủ thuật "Hiển thị bài viết ngoài trang chủ giống Bo-blog (dạng list)" (các bạn có thể xem thủ thuật này ở đây), thủ thuật này mình giới thiệu cách modify lại việc hiển thị các bài viết ở trang chủ, lần trước khi test ở blogtest của mình, mình không thấy được khoảng trống của phần date-header tạo ra, nên thủ thuật chưa hoàn chỉnh (có các khoảng trống giữa các list), vì thế các bạn có thể sử dụng thủ thuật ở bài viết này để khắc phục cho khuyết điểm đó.

☼ Để thực hiện điều này, các bạn chỉ cần thực hiện vài thao tác đơn giản bên dưới:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chọn mở rộng mẫu tiện ích
4. Tìm đến đoạn code của phần date-header , nó sẽ tương tự như bên dưới :

<b:if cond='data:post.dateHeader'>
<span style='padding: 0 40px 0 0; text-align: right;'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</span>
</b:if>

5. Để loại bỏ khoảng trống do nó gây ra, cách đơn giản là loại bỏ nó đi, có 2 cách loại bỏ, 1 là bạn thêm đoạn code để biến nó thành đoạn text chú thích, 2 là xóa hẳn code của nó đi, ở đây mình sẽ dùng cách 1, cách này an toàn hơn (có thể khôi phục lại được). Để thực hiện các bạn chỉ việc thêm đoạn code màu đỏ vào code của phần date-header như bên dưới:

<!--
<b:if cond='data:post.dateHeader'>
<span style='padding: 0 40px 0 0; text-align: right;'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</span>
</b:if>
-->

6. Save template.

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


Enter your mail address:

6

suckhoe

Chao Dung, dung la minh dang tim cai nay! Cua minh khi xoa cac dong time va comment di thi khoang cach giua cac bai viet rat lon, nhung khong sua duoc, day la demo, Nho Dung ghe qua tham va chi giup minh cach khac phuc khoang cach giua 2 bai khi xem o trang label voi nhes

http://suckhoe24h.blogspot.com/search/label/B%E1%BB%87nh%20Th%C6%B0%E1%BB%9Dng%20G%E1%BA%B7p
Mong hoi am cua Dung

fandung

@suckhoe : thông thường phần comment và phần time nó được nằm trong phần post-footer, nếu bạn muốn loại bỏ khoảng trống này đi thì xóa hẳn phần post-footer đi.

suckhoe

Minh da xoa kha nhieu nhung ko duoc,



Day la phan post-footer cua Minh, Hay la Ban co the cho minh xin dia chi email, minh se gui ban file xml cua template hoac set Ban quan tri blog cua Minhva nho Ban chinh gium minh chut duoc khong Ban?

Minh gui phan footer cua minh nen thi bao khong gui duoc vi co html, Mong Ban cho minh email cua Ban de Minh gui thu moi quan tri blog nhe!

Cam on Ban va rat mong hoi am

Yeusuckhoe.blogspot.com

Chà suckhoe24 có tên miền giống mình ghê.

KID_KTV2K

Rất hay :D

Nguyễn Chí Thanh

Hi bạn, mình làm theo hướng dẫn của bạn nhưng sao nó vẫn bị trống một đoạn vậy nhỉ. Đoạn này nếu không hiển thị ngày thì nó vẫn trống. Bạn xem giúp mình nhé.
Blog mình LamGiauTuForex.blogspot.com



☺ 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