Snippet, Tips Blogger

Cara Membuat Related Box untuk Blogger

Kali ini saya akan membagikan Cara 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 </head>

<style>
/* Related Box by www.aliva.my.id */
#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)}
</style>

2. Setelah copykan kode di bawah ini tepat di bawah kode <data:post.body/>

<script>
// Related Box
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://www.aliva.my.id', // 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 aliva.my.id
};
</script>
<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/Arlina-Design/frame@master/related-box.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.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *