Thêm hộp bài viết liên quan đẹp cho Blogspot


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ƯỚ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ẻ <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  
<script type="text/javascript">
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 : 'http://www.starbinhit.net', // 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 star binh blog
};
</script>
<script type="text/javascript" src="http://cdn.rawgit.com/Dihak/bloggerku/5048c6bd13c0d02a5ae41cfb6827a33a18d53d50/relatedbox/relatedbox.min.js"></script>
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 {
    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);
}

var relatedbox = {
    homepage : 'http://www.starbinhit.net', // Change with your homepage url
    title: 'Xem thêm', // 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 star binh blog
};
Phần được Bôi đen các bạn Edit lại cho phù hợp nhé.
Sau đó lưu mẫu lại và xem kết quả. Nếu bạn không ưng ý có thể sửa theo ý của bản thân.
Chúc các bạn thành công!


Star Bình Blog
Trần Thanh Bình
Designer Developer

Chào các bạn mình là Bình - một cậu học sinh, với đam mê và sở thích, mình lập nên blog này để lưu trữ những kiến thức, đồng thời cũng chia sẻ những gì mình biết và sưu tầm được tới bạn đọc.

  • ..
  • Bài liên quan

    - Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
    - Mọi chi tiết xin liên hệ:
    • Email: starbinhblog.com@gmail.com
    • Facebook: Fb.com/tomitsystem
    Xin chân thành cảm ơn những đóng góp của bạn để chúng tôi ngày càng phát triển hơn nữa...

    Bình luận Facebook:

    1 nhận xét:

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

    - Những bình luận không liên quan đến bài viết có thể bị xóa

    - 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