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

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'>&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>, </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

How To Download File :

Download Here

How To Download File :

Howktech

Muốn giỏi phải học, muốn học thì phải hỏi. Chính vì thế, hãy cùng tham gia thảo luận với nhau để tìm ra câu trả lời nếu có thắc mắc nhé!. Xem thêm về tôi

» Nhận Xét Của Bạn - Hãy Comment Lịch Sự Vì Bạn Có Hiểu Biết.

Loading...