Cara Membuat Related Post Box

Kali ini saya akan membagikan cara untuk membuat related box untuk blogger, Related box ini berbeda dengan related post pada umumnya yang terpasang di blog. Related box adalah related post yang akan muncul ketika di scroll kebawah, jadi akan menarik perhatian pengunjung. Dengan begitu akan memperbanyak pageview blog sobat.

Related box yang akan saya bagikan dulu terinspirasi oleh forum Kaskus. namun, sekarang sudah tidak digunakan lagi oleh kaskus. Pasti sudah pada penasaran yah. Yuk, kita simak :

Cara Membuat Related Box untuk Blogger

1. Seperti biasa sobat login dulu ke blogger > Template > Edit HTML > Salin dan tambahkan CSS dibawah ini tepat diatas kode ]]></b:skin> atau </style>

/* Related Box by www.zynationdesign.net */
#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:#D8335B}
#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:#D8335B;padding:7px 15px;box-shadow:2px 3px 0 rgba(0,0,0,0.29)}

2. Setelah copykan kode di bawah ini tepat di bawah kode <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 : 'www.zynationdesign.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 zynation
};
</script>
<script type='text/javascript' src='https://rawgit.com/Ojikkidiw/zynation/master/promise.js'/>

Ganti kode yang ditandai sesuai kebutuhan

Sekian artikel untuk Cara Membuat Related Box untuk Blogger, semoga artikel yang saya bagikan bisa bermanfaat bagi sobat semua.