Template dan Tips Seputar Blogger

Monday, June 19, 2017

Cara Membuat Related Box untuk Blogger

Cara Membuat Related Box untuk Blogger - Kali ini saya akan membagikan cara untuk membuat related box untuk blogger,

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 ]]></b:skin> atau </style>

/* Related Box by blog.iumari.com */
#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. 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 : 'http://blog.iumari.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 iumari.com
};
</script>
<script type='text/javascript' src='https://cdn.rawgit.com/Indzign/theme/17b32490/relatedbox.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.

Berikan tanggapan Anda
EmoticonEmoticon

Adblock Detected

Like this blog? Keep us running by whitelisting this blog in your ad blocker

This is how to whitelisting this blog in your ad blocker

Thank you

×