nad blog

[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot ( phần 4 ) - main-post

Trong bài hôm nay, mình sẽ chỉ các bạn chỉnh sửa phần quan trọng nhất là main-post của blog, phần này chỉnh sửa khá phức tạp và hơi khó do ông lớn google làm phần này thô quá, vì vậy mình có thể chia bài này làm hai phần.

[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot ( phần 5 ) - main-post
[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot (phần 3) - navbar

Trong phần này, mình tính sẽ thêm một số thứ như: share, like, bài viết liên quan, next - preview page,...còn các bạn muốn thêm gì nữa là ở bạn.
Trước khi bắt đầu, mình sẽ xóa cái ngày, tháng trên đầu mỗi bài đăng đi, nhìn nó ngứa mắt quá. Các bạn vào code HTML, các bạn di chuyển đến tiện ích "Blog1", mở rộng thẻ <b:includable id='main' var='top'>...</includable> ra, tìm đến:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'>
<span>
<data:post.dateHeader/>
</span>
</h2>
</b:if>

và xóa nó đi. Bạn tìm thêm code CSS: ".date-header span" xóa đi và lưu lại, xem thành quả.

Tiếp theo, mình sẽ chỉ các bạn cách để hiển thị thông tin bài viết gồm: tác giả, thời gian, nhãn, số comment. Trước tiên, các bạn vào "Bố cục", trong phần "Bài đăng trên Blog" chọn "Chỉnh sửa", tích chọn tất cả, và sắp xếp các mục như hình, mà cũng chỉ cần tập chung chúng nó lại một chỗ thôi.

Rồi các bạn lưu lại, vào code HTML, tìm đến thẻ <div class='post-footer'>, vì có thể có vài thẻ thế này nên các bạn chú ý là nó nằm trong <b:includable id='post' var='post'>, copy tất cả thẻ này. Thay vào vị trí của thẻ:
<div class='post-header'>
<div class='post-header-line-1'/>
</div>
thẻ này cũng nằm trong <b:includable id='post' var='post'>, các bạn chú ý ở bên dưới sẽ thấy. Lưu lại và xem thử sẽ có mấy cái đại loại như "Được đăng bởi..., vào lúc..., nhãn..., và cả cái share box nữa,..." ở ngay dưới thanh tiêu đề.
Rồi, bạn xem code sẽ thấy trong <div class='post-footer'> sẽ có 3 thẻ:
<div class='post-footer-line post-footer-line-1'>...</div>
<div class='post-footer-line post-footer-line-2'>...</div>
<div class='post-footer-line post-footer-line-3'>...</div>
Trong đó:

<div class='post-footer-line post-footer-line-1'>...</div> sẽ chứa thông tin bài đăng, back-link, quick-icon, share-box.
<div class='post-footer-line post-footer-line-2'>...</div> và <div class='post-footer-line post-footer-line-3'>...</div> không quan trọng.

Vậy, bạn xóa cái line-2 và line-3 đi, mở cái line-1 ra sẽ thấy nó chú thích khá rõ ràng đâu là back-link, đâu là quickedit pencil, đâu là share buttons, không thích thì xóa nó đi. Còn về phần thông tin bài đăng thì các bạn có thể tự căn, chỉnh sao cho hợp lý là ok thôi.

Trong phần này các bạn có thể chèn thêm code like facebook hay G+ như sau:

<div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>

Hoặc có một cách khác đơn giản hơn là các bạn vào trang http://www.addthis.com/, đăng ký, chọn kiểu mà bạn thích và lấy code.

Hôm nay mình xin phép dừng ở đây, chúc các bạn thành công.

28 tháng 6, 2014

[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot ( phần 4 ) - main-post

Subscribe