Hộp bài viết liên quan ẩn hiện khi cuộn chuột cho blogspot V2

Hôm nay mình sẽ hướng dẫn các bạn cách tạo hộp bài viết liên quan ẩn hiện khi cuộn chuột cho blogspot.

Xem thêm: Chèn bài viết liên quan vào giữa bài viết cho Blogspot

Ưu điểm:

- Hộp dạng Slider nên rất gọn số lượng bài viết liên quan nhiều
- Gọn nhẹ không chiếm nhiều diện tích cũng như thẩm mỹ
- Giúp cho người sử dụng tiếp cận bài viết nhanh chóng
Trước khi thực hiện bạn có thể xem trực tiếp demo:

XEM DEMO

Hướng dẫn cách làm:

Bước 1: Bạn đăng nhập Blogger -> Chủ đề -> Chỉnh sửa HTML bạn nhấn tổ hợp phím Ctrl F và tìm kiếm thẻ đóng </head> và dán đoạn code sau lên phía trên

<script src='https://rawgit.com/nqt1502/nqtdl/master/boxlq.js' type='text/javascript'></script>

Bước 2: Bạn chú ý đặc biệt bước này, bạn tìm đến thẻ <data:post.body/> tuy nhiên kết quả sẽ cho nhiều hơn 1, vì vậy bạn cần thử từng cái (nên backup template nếu có lỗi thì còn mẫu để cập nhật lại)
Sau đó bạn dán code sau phía dưới <data:post.body/>

<script type='text/javascript'>var relatedbox={homepage:"http://www.blogchiasethuthuat.com"};</script>

Chỉnh sửa: Thay http://www.blogchiasethuthuat.com thành địa chỉ blog của bạn
Bước 3: Để làm đẹp cho tiện ích này bạn sử dụng CSS tìm đến thẻ ]]></b:skin và dán nó lên phía trên.

/* Related Box */
#related-box {
width:350px;
overflow:hidden;
height:200px;
position:fixed;
bottom:20px;
right:20px;
background:#fff;
border:1px solid #ddd;
transition:all .5s;
z-index:9999
}

#related-box .header h2 {
font-size:15px;
text-transform:uppercase;
font-weight:600;
margin:0;
text-align:center
}

#related-box .header {
padding:10px 0 0;
color:#222;
background:#fff
}

#related-box .tombol {
position:absolute;
top:10px;
left:15px
}

#related-box .item {
padding:15px;
width:350px;
float:left
}

#related-box .list {
height:120px;
overflow:hidden;
width:600px;
transition:all .5s
}

#related-box .gambar img {
height:100px;
width:120px;
float:left;
margin-right:15px
}

#related-box .header a {
color:#222
}

#related-box .info a {
font-size:14px;
color:#222;
font-weight:400;
line-height:normal;
padding:0 0 5px;
margin:0 0 5px;
display:table;
border-bottom:1px solid #eee
}

#related-box .info h3 {
margin:0
}

#related-box .navigation a {
float:left;
border:1px solid rgba(0,0,0,0.2);
margin:3px;
font-size:12px;
padding:5px;
line-height:normal
}

#related-box .navigation {
position:absolute;
width:60px;
right:7px;
bottom:8px
}

.relatedshow {
position:fixed;
bottom:40px;
right:-50px;
transition:all .5s;
z-index:9999;
margin:0 10px 0 0
}

.relatedshow a {
color:#fff;
background:#03a9f5;
padding:10px 12px;
border-radius:100%;
box-shadow:0 0 10px rgba(0,0,0,0.2)
}

Lưu mẫu lại và xem kết quả! Chúc bạn thành công!

Download Here