Sau mỗi bài viết ở các trang website khác, các đều thấy mạng dạng Relate Post Box hiển thị một số bài viết liên quan để dẫn người dùng đến một bài viết tương tự.
Trong bài viết này, mình sẽ hướng dẫn các bạn tạo Box Relate Post tự động sau mỗi bài viết sẽ dẫn đến một bài viết liên quan. Việc này có thể giúp người dùng duy trì trên trang website của các bạn lâu hơn, cũng mang đến cho họ được những tài nguyên cần thiết mà có thể họ cần.

Tạo Related Post Box Chất Lượng Cho Bài Viết

Vậy nên, chúng ta hãy cùng bắt đầu nhé.

Hướng Dẫn Cài Đặt

Bước 1: Sau khi vào chỉnh sửa HTML, các bạn tìm kiếm đến thẻ ]]></b:skin> và copy đoạn css bên dưới đặt vào trên thẻ ]]></b:skin> nhé

#related-box {

width: 350px;

overflow: hidden;

height: 200px;

position: fixed;

bottom: 20px;

right: 20px;

background: #fff;

box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.29);

transition: all 0.5s;

}

#related-box .header h2 {

font-size: 12px;

margin: 0;

}

#related-box .header {

padding: 10px 15px;

color: #fff;

background: #00ABFF;

}

#related-box .tombol {

position: absolute;

top: 10px;

right: 15px;

}

#related-box .item {

padding: 15px;

width: 320px;

float: left;

}

#related-box .list {

height: 120px;

overflow: hidden;

width: 600px;

transition: all 0.5s;

}

#related-box .gambar img {

height: 100px;

float: left;

width: 50%;

margin-right: 10px;

}

#related-box .header a {

color: #fff;

}

#related-box .info {

font-size: 12px;

}

#related-box .navigation a {

float: left;

border: 1px solid rgba(0, 0, 0, 0.32);

margin-left: 10px;

font-size: 10px;

width: 10px;

padding: 3px;

}

#related-box .navigation {

position: absolute;

width: 60px;

right: 20px;

bottom: 20px;

}

.relatedshow {

position: fixed;

bottom: 190px;

right: -50px;

transition: all 0.5s;

}

.relatedshow a {

color: #fff;

background: #00ABFF;

padding: 7px 15px;

box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.29);

}

Đã xong đoạn tạo giao diện cho Related Post Box cho bài viết của website bạn.
Bước 2: Hãy copy đoạn mã bên dưới đặt ngay vào sau <data:post.body/>.

<script type="text/javascript">

// Related Article Settings

var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>, </b:if></b:loop></b:if>];

var relatedbox = {

homepage : 'https://www.howktech.com', // Change with your homepage url

title: 'Related Post', // Widget Title

post: 3, // Max post

date: true, // Show date

scr: 500, // Show the related box if scroll more than 500

showcredit: true // Add credit link to support howktech.com

};

</script>

<script type="text/javascript" src="http://cdn.rawgit.com/Dihak/bloggerku/5048c6bd13c0d02a5ae41cfb6827a33a18d53d50/relatedbox/relatedbox.min.js"></script>

Chú ý: Hãy chỉnh sữa URL Trang chủ của bạn vào DÒNG ĐƯỢC TÔ ĐỎ bên trong đoạn code nhé.
Ở trong đoạn này.

var relatedbox = {

homepage : 'https://www.howktech.com', // Change with your homepage url

title: 'Related Post', // Widget Title

post: 3, // Max post

date: true, // Show date

scr: 500, // Show the related box if scroll more than 500

showcredit: true // Add credit link to support howktech.com

};

Trong đó:
- Homepage: Là URL để tạo bài viết liên quan.
- Post: Vài viết tối đa cho Related Post Box.
- Date: Hiển thị ngày.
- Scr: Hiển thị hộp có liên quan nếu cuộn hơn 500
- Showcredit: Thêm liên kết hỗ trợ từ howkech.com

Và cuối cùng, hãy chỉnh sửa lại cho phù hợp với yêu cầu của các bạn nhé. Chúc các bạn thành công.

Demo