Hướng dẫn thu gọn bài viết trên trang chủ

Chắc hẳn các bạn đã thấy rất nhiều blog nói về thủ thuật này rồi. Tuy nhiên, trong bài viết này, mình sẽ chỉ đưa ra thủ thuật mà mình cho là tối ưu nhất đối với blog của bạn thôi.

OK, Bây giờ, các bạn hãy tìm đến thẻ <data:post.body/> và thay nó bằng đoạn code dưới đây. Thường sẽ có 2 đoạn code như vậy. Và nó sẽ là đoạn thứ 2 từ trên xuống.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
     <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
          <div>
               <b:if cond='data:post.thumbnailUrl'>
                    <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
               <b:else/>
                    <img class='post-thumbnail' alt='no image' src='http://doiguocmoc.com/wp-content/uploads/2015/11/bannerdgm.png' width='72px' height='72px'/>
               </b:if>
               <data:post.snippet/>
          </div>
          <div class='jump-link'>
               <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
          </div>
     <b:else/>
          <data:post.body/>
     </b:if>
     <b:else/>
          <data:post.body/>
</b:if>

Các bạn cũng nên chú ý 1 chút trong đoạn code trên. Với các này thì chúng ta sẽ sử dụng Thumbnail mặc định của blogger có kích thước là 72x72 nhé. Và số ký tự rút gọn được hiển thị là 140 ký tự. Và http://doiguocmoc.com/wp-content/uploads/2015/11/bannerdgm.png là link hình ảnh khi mà bài viết của các bạn không có hình ảnh nào là tự Upload lên.

Chỉ đơn giản vậy thôi, bây giờ các bạn lưu Template lại và ra xem trang chủ nhé. Còn việc viết CSS như thế nào cho đẹp thì đó là do khả năng của bạn. Mình không thể viết hết ra được.

Các bạn có thể xem DEMO tại đây: http://huongdanthietketamplate-6.blogspot.com/

Chú ý: Đây là cách dùng những thẻ mặc định của Blogger nên sẽ có tốc đợ tải tốt nhất. Tuy nhiên, ngoài cách này cũng còn nhiều cách khác được chia sẻ trên mạng. Tuy nhiên, đa số đều sử dụng tới Javascript nên có thể sẽ làm trậm trang web của bạn. Tuy nhiên, nó có thể thùy biến nhiều hơn. Bạn hãy cân nhắc trước khi dùng nhé!

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/