Thủ Thuật Blogspot | Tạo Hộp Bài Viết Liên Quan Cho Blogspot

Hôm nay Blog chúng tôi sẽ Chia sẻ một thủ thuật nhỏ về Tạo hộp Bài viết liên quan cho Blogspot.

DEMO 

Hộp Bài viết liên quan sẽ xuất hiện trong bài viết khi ta cuộn xuống, do đó sẽ thu hút sự chú ý của đọc giả. Bằng cách làm như thế sẽ giúp Website của chúng ta tăng lượt xem khá nhanh.

Chúng ta bắt tay vào làm nhé !

Bước 1 : Bạn đăng nhập vào Blogger

Bước 2 : Vào Mẫu > Chỉnh sửa HTML

Bước 3 : Sao chép đoạn CSS sau dán vào bên trên ]]></b:skin>

#related-box {
    z-index:99999999;
    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: 15px;
    margin: 0;
}
#related-box .header {
    padding: 10px 15px;
    color: #fff;
    background: #7577a9;
}
#related-box .tombol {
    position: absolute;
    top: 10px;
    right: 15px;
}
#related-box .item {
    padding: 15px;
    width: 350px;
    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;
    opacity: 1;
    font-size: 17px;
}
#related-box .info {
    width: 150px;
    font-size: 10px;
    color: #222;
    padding: 0 0 5px;
    margin: 0 0 5px;
    display: table;   
}
#related-box span {
    font-size:13px
}
#related-box .navigation a {
    width: 17px;
    height: 20px;
    line-height: 21.3px;
    float: left;
    border: 1px solid rgba(0, 0, 0, 0.32);
    margin-left: 10px;
    font-size: 12px;
}
#related-box .navigation a:hover {
    background:linear-gradient(120deg,#7577a9,#6d9698);
    color:#fff;
    border:1px solid rgb(117, 119, 169);
}
#related-box .navigation {
    position: absolute;
    width: 60px;
    right: 20px;
    bottom: 20px;
}
.relatedshow {
    position: fixed;
    z-index:99999999;
    bottom: 190px;
    right: -50px;
    transition: all 0.5s;
}
.relatedshow a {
    color: #fff;
    background: #7577a9;
    padding: 7px 15px;
    box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.29);}
.relatedshow a:hover {
    color: #fff;
}
i.fa-chevron-left{margin-left:2.5px}
i.fa-chevron-right{margin-left:3.7px}

Bước 4: Thêm đoạn CSS sau vào dưới thẻ <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 : 'http://www.bloggerku.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 bloggerku.com
};
</script>
<script type="text/javascript" src="http://cdn.rawgit.com/Dihak/bloggerku/5048c6bd13c0d02a5ae41cfb6827a33a18d53d50/relatedbox/relatedbox.min.js"></script>

* Chỉnh sửa * :
homepage: 'http://www.bloggerku.com/', thành URL website bạn
title: 'Related Post', thành tên Widget bạn muốn hiển thị
post: 3, Số bài viết bạn muốn hiển thị
date: true, Hiển thị ngày. Nếu không muốn hiển thị ngày bạn đổi  true thành flase
scr: 500, Khoảng cách bạn muốn Widget hiện
Bước 5 : Lưu lại và xem thành quả.
Chúc các bạn thành công !