How To Add Related Box in Blogger Website

This time I will share how to create a related box for blogger , I haven't updated in a long time. The admin is busy making a design that will be published later. 

This related box is different from the related post. Related box is a related post that will appear when scrolled down, so it will attract the attention of visitors. This will increase the pageviews of your blog. Okay, for clarity.

So Now Let's get Started.

How to Install a Related Box on Blogger :-

1. As usual, my friend logs in first to blogger.

2. Go to the Templates > Edit HTML.

3. Copy the CSS below right above the code ]]></b:skin> .

#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);
}

4. After copying the code below right below the code <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 : 'http://www.theforyou.online/', // 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 theforyou
};
</script>
<script type="text/javascript" src="http://cdn.rawgit.com/Dihak/bloggerku/5048c6bd13c0d02a5ae41cfb6827a33a18d53d50/relatedbox/relatedbox.min.js"></script>

Well, save and save the edited one. now look at your blog, if the related box appears, then proceed to the section on how to set the related box. 

Buddy can change the title, max post, hide the date, and others. 

Still in the previous code, my friend just replaces the red code below with the one you want.

var relatedbox = {
    homepage : 'http://www.theforyou.online', // 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 theforyou
};

Do not forget to save again, finished

Last Words :-

Well That is great tutorial on how to make the related box on blogger , I hope my article could share useful for my friend. Keep visiting my blog so you don't miss updates..