Like Page để cập nhật tin mới ngay trên facebook nhé

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.
Hộp bài viết liên quan ẩn hiện khi cuộn chuột cho blogspot V2
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:

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!

3 nhận xét:

  1. hóng mấy hôm rồi. cuối cũng cũng ra :D tks bác đã se

    Trả lờiXóa
  2. tks bác, rất dễ làm theo dù mình ko biết gì

    Trả lờiXóa
    Trả lời
    1. Cảm ơn bạn đã ủng hộ :)

      Xóa

- Bình luận của bạn sẽ được kiểm duyệt trước khi xuất bản

- Những bình luận mang tính xây dựng đóng góp bài viết mới được duyệt

- Vui lòng KHÔNG bình luận thô tục, không dấu, chèn các liên kết bên ngoài, bình luận không liên quan hoặc quá ngắn

- Hãy là con người văn minh từ những câu nói