How to make a Related Box for Blogger

How to Create a Related Box for Bloggers - This time I will share ways to create related boxes for bloggers,

This related box is different from the general related posts posted on the blog. Related box is a related post that will appear when scroll down, so it will attract the attention of visitors. That way, you will increase the pageview of your blog.

The related box that I will share is inspired by the Kaskus forum. however, it is no longer used by Kaskus. It must have been curious. Come on, we see:

How to make a Related Box for Blogger

1. As usual, my friend logged in first to blogger> Template> Edit HTML> Copy and add CSS below right above the code ]]> </b:skin> or </style>

/* Related Box */
#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)}

2. After copying the code below just below the <data: post.body /> code

<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 : 'https://stressthinking.blogspot.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 arlinadzgn.com
};
</script>
<script type='text/javascript' src='https://cdn.rawgit.com/Arlina-Design/frame/22f69f94/related-box.js'/>

Change the code marked as needed

Results

So many articles for How to Make Related Boxes for Bloggers, hopefully the articles I share can be useful for all friends.