Hướng dẫn thiết kế blogger toàn tập - Phần 6: Hiển thị danh sách bài viết ra ngoài trang chủ

on

Trong 5 phần trước chúng ta đã cơ bản hiểu và có thể trình bày được trang chủ của website blogspot của chúng ta rồi. Đến phần quan trọng nhất là: làm thế nào để trang chủ hiển thị bài viết của chúng ta?

Trong quá trình vọc template, hẳn chúng ta sẽ thấy đoạn code để hiển thị bài viết ra ngoài trang chủ khá là dài dòng. Đến đây nghe có vẻ căng thẳng rồi đây. Có lẽ nào ta lại ngồi code lại? hay copy từ tem khác để đưa vào?

Nhưng sự thật không phải như vậy, rất đơn giản thôi, chúng ta chỉ cần thêm một đoạn code nhỏ ngay sau thẻ <div class=’main-wrapper’>

 

<b:section class='main' id='mainpost' showaddelement='yes'>



<b:widget id='Blog1' locked='false' title='Bài đăng trên Blog' type='Blog'/>

</b:section>
Lưu mẫu và về phần quản lý bố cục, chúng ta sẽ thấy một chú cực kì quen thuộc xuất hiện :D
Có một vấn đề nhỏ là khi bài viết chứa hình ảnh quá lớn, hình ảnh đó sẽ bị tràn ra ngoài khung của chúng ta. Giải quyết vấn đề này rất đơn giản, chúng ta chi cần thêm 1 css nhỏ để giới hạn độ rộng ảnh lại là xong:


img {
     max-width:100%;
}
Đến đây bạn đã thấy blogger tuyệt vời chưa nào? Rất nhanh, dẽ hiểu và gọn nhẹ đúng không nào :D
Bây giờ blog của chúng ta sẽ như demo: http://demohuongdanthietkeblog5.blogspot.com/

Comments

Post a Comment