Bài 3 - Cách lấy dữ liệu bài viết ra ngoài trang chủ blogpsot

[tintuc]
Bài 1:  Hướng dẫn thiết kế template blogspot
Bài 2: Hướng dẫn sắp xếp làm đẹp bố cục blogpsot

Bài này mình hướng dẫn cách lấy bài viết ra ngoài trang chủ blogspot

Trước tiên các bạn quay lại blog các bạn vô viết vài bài để test nhé. Xong các bạn vô chủ đề tìm tới phần CỘT GIỮA (COL-6)

Các bạn xóa nội dung tạm bên trong đi và thêm dòng code sau vào 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>

Sau đó nhấn lưu lại và view link blog lên xem kết quả, bài viết đã được load ra ngoài trang chủ. Tuy nhiên nó lại dài quá. Nên mình cần thu gọn bài viết lại.

Tiếp theo mình hướng dẫn cách thi gọn bài viết trên trang chủ:

Bây giờ các bạn vô trong giao diện nhấn Ctrl + F tìm <data:post.body/> Xong nhấn tìm cái đích cần tìm là cái <data:post.body/> thứ 2 từ trên xuống. Sau đó bạn thay code sau vô chữ  <data:post.body/>


<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' height='72px' width='72px'/>
<b:else/>
<img alt='no image' class='post-thumbnail' height='72px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMpj6cxghrh3NsAEde3N7FFtUGVX7vu2xOUxcbqgym-QDct390RpkmInmNkZexl_msN3h-0Jz7bR9WIq1iL3f83Y3N6n24htMywVZzmjBVBgyql3IWcBLg60aU3eyv55ZcPjruP5-VlqXa/s0/noimage.jpg' width='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>

Nhấn lưu lại, tiếp theo ta thêm 1 chút CSS cho nó nhé, copy css sau dán trước </head>

<style>
  .post-thumbnail{
width: 23%;
    float: left;}
.post-title {
    color: #494949;
    font-family: Raleway, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1em;
    text-decoration: none;
    text-align: left;
    margin-top: 25px;
}
  .jump-link a{float: right;}
</style>

sau đó nhấn lưu lại, view link blog và xem kết quả. CSS mình chỉ là tạm thời nên các bạn cần chỉnh sao cho đẹp, chuẩn.

Bây giờ bạn có thể vô bố cục add các tiện ích như: nhãn, phổ biến, hình, ....

Tổng kết: như vậy là mình đã hướng dẫn load dữ liệu bài viết ra trang chủ
[/tintuc]