Tạo bài viết liên quan với ảnh thumbnail

Đây là một mẫu bài viết liên quan đẹp cho blog của bạn. Mẫu có ảnh thumbnail sẽ làm cho người đọc tiếp cận được với nhiều bài viết hơn trong blog của bạn sau khi đọc xong một bài viết.

BÀI VIẾT LIÊN QUAN VỚI ẢNH THUMBNAIL

Bước 1: Đăng nhập vào blogger vào phần chỉnh sửa HTML

Bước 2: Tìm thẻ </head> sau đó copy đoạn code bên dưới dán vào phía trước thẻ </head> vừa tìm thấy

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #EEEEEE;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;width:110px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 5px;  -moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Chú ý:
- Để thay đổi chiều rộng và cao của ảnh thumbnail chỉnh thông số 100px và 100px tại vị trí mình đã đánh dấu đỏ.
- Để thay đổi màu và độ lớn của tiêu đề bài viết liên quan bạn chỉnh thông số #666 và
110px mình đã đánh dấu màu xanh.
- Nếu bạn muốn mục bài viết liên quan hiển thị cả ở trang chủ thì bạn xóa 2 dòng code mình đánh dấu màu tím.

Bước 3: Tìm đoạn  code

<b:includable id='postQuickEdit' var='post'>

Sau đó copy và paste đoạn code bên dưới vào phía trước thẻ </b:includable> ở phía trên đoạn code <b:includable id='postQuickEdit' var='post'> 

Bước 4: Lưu mẫu và kiểm tra kết quả