Blogspot: Bài viết mới cho nhãn (Label) không dùng Javascript

Bài viết mới nhất cho blogger không dùng Javascript

Bước 1: Đăng nhập Blogger.com -> Page Elements -> trên sidebar -> Add a Gadget -> Blog List (Danh sách Blog)

Tại mục Title -> Đặt tên nhãn tùy ý bạn (chủ đề của nhóm)

Tick chọn vào các mục Title of most recent item, Snippet of most recent item, Thumbnail of most recent item.

Nhấn ADD TO LIST

Sau đó dán vào mục Add by URL với địa chỉ sau đây:


Cứ thế cho đến khi nào bạn cần dừng lại (4,5,… là số bài viết mới nhất hiển thị cho nhãn)

Bạn cần thay nguyendaihoc.com bằng tên blogspot của bạn và Tên nhãn1 bằng tên của nhãn cần áp dụng, rồi nhấn SAVE để lưu tiện ích.

Bước 2: Vào Edit HTML, chọn Expand Widget Templates.

Dùng từ khóa BlogList1 (nhấn Ctrl+F) tìm đến đoạn code tương tự như sau:

<b:widget id='BlogList1' locked='false' title='Tên nhãn 1' type='BlogList'>
<b:includable id='main'>

…. Phần nằm giữa này là code trọng tâm của tiện ích …

</b:includable>
</b:widget>

Ở đây bạn cần chú ý thẻ <b:includable id='main'> và thẻ </b:includable> chứa code trọng tâm của tiện ích, nói chung đoạn code nằm giữa 2 thẻ này rất dài. Việc bạn cần làm tiếp theo là thay đoạn code nằm giữa 2 thẻ đó bằng đoạn code dưới đây:

<div class='widget-content'>
<div id='recentposts-ha'>
<ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<li>
<b:if cond='data:item.itemThumbnail'>
<img expr:src='data:item.itemThumbnail.url'/>
<b:else/>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSG7eW8zFxay4bC8nptqLLKCM9NdDWM18G2LwmakNjJlip68M7QnhJo8TRl-r-73nvrk4Z4DktlQi8Ws-QlI9WDr2CYiVzGYuf1LsPs3U-wGlEx94GQb6jB3qgpPS53qiVdoJW1lY2D2pE/s1600/no-image.PNG'/>
</b:if>
<a expr:href='data:item.itemUrl' expr:title='data:item.itemTitle' target='_blank'><data:item.itemTitle/></a><br />
<data:item.itemSnippet/>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>
</div>
</div>

Bước 3: Đặt code CSS bên dưới vào trước dòng ]]></b:skin>

#random-posts img, #recentposts-ha img, #recent-posts img{float:left;border:1px solid #d1d1d1;margin:0 5px 7px 5px;padding:3px;width:100px;height:80px;}
#random-posts a, #recentposts-ha a, #recent-posts a{font-weight:bold}

Lưu Template là OK.

Cứ như vậy bạn có thể áp dụng cho nhiều nhãn và bạn sẽ sử dụng BlogList2, BlogList3, BlogList4, BlogList5…

Lưu ý: nếu bạn áp dụng thủ thuật này tại những vùng có chiều rộng khá lớn (ví dụ phần Main) thì có thể bố trí các bài viết thành 2 cột, bạn chỉ cần thêm code CSS như thế này:

#recentposts-ha ul li {float: left;margin-right: 10px;width: 48%}