Hướng dẫn hiển thị danh sách bài viết ra ngoài trang web

Trong các bài viết trước, chúng ta đã cũng nhau tìm hiểu cách thiết kế header cho 1 trang web rồi. Tiếp tục, trong bài này, chúng ta sẽ đi đến tìm hiểu các code phần thân cho trang web của chúng ta.

Các bạn nếu như đã vọc qua Template của Blogger rồi thì chắc cũng biết rằng đoạn code hiển thị bài viết trong Blogger thật sự rất dài. Vậy là sao để chúng ta có thể ngồi viết hết lại chúng ấy code được bây giờ? Hay là chúng ta copy đoạn đó từ 1 Template khác sang để sửa dụng?

Câu trả lời không phải là như vậy. Chúng ta chỉ việc copy đoạn code ngắn ngủn dưới đây và dán nó vào trong phần thân web của ta mà thôi. Nó cũng giống như việc ta đã tùng làm với header vậy. Cái tuyệt vời của Blogger là đây. Code web rất nhanh và nhẹ nhàng :D

Bây giờ bạn hãy tìm đến phần muốn hiển thị nội dung bài viết của bạn. Nếu bạn làm giống như y như mình là từ đầu đến giờ thì bạn có thể tìm đến thẻ này: <div class='main-wrapper'>, và chèn đoạn code sau ngay dưới nó.

<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 lại và quay về xem phần quản lý bố cục thôi nào. Bạn sẽ thấy xuất hiện thêm một widget mà không thể nào không quen được :D

Và bạn hãy thử ra ngoài trang chủ để xem nó như nào thôi, :)))

Bạn có thể nhận thấy rằng, Nếu như bài viết của bạn có hình ảnh quá lớn thì nó sẽ bị tràn ra ngoài khung và chiếm mất phần của sidebar. Vì vậy, bây giờ chúng ta sẽ viết 1 dòng CSS đơn giản dành cho hình ảnh để nó có chiều rộng lớn nhất là bằng với chiều rộng của khung class chưa nó. Ta sẽ có đoạn CSS sau:

img {
     max-width:100%;
}

Bạn chèn nó vào phần CSS của blog nhé!
OK, và bây giờ bạn lại ra F5 trang chủ lần nữa để xem kết quả đã đạt được nhé!
Bạn có thể xem DEMO cho bài viết tại: http://huongdanthietketempalte-5.blogspot.com/