Related Box Untuk Blogger

Kali ini saya akan membagikan cara untuk membuat related box untuk blogger, sudah lama sekali saya tidak update. Adminnya lagi sibuk membuat design template yang akan dipublish nanti.

Related box ini berbeda dengan related post. Related box adalah related post yang akan muncul ketika di scroll kebawah, jadi akan menarik perhatian pengunjung. Dengan begitu akan memperbanyak pageview blog sobat.

Oke, untuk lebih jelas, sobat silahkan lihat demo dibawah ini, sobat juga bisa mendownload source codenya di sini :


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

Cara Memasang Related Box Pada Blogger

1. Seperti biasa sobat login dulu ke blogger
2. Masuk ke bagian Template > Edit HTML
3. Copykan CSS dibawah ini tepat diatas kode ]]></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. Setelah copykan kode dibawah ini tepat dibawah 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://www.bloggerku.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 bloggerku.com
};
</script>
<script type="text/javascript" src="http://cdn.rawgit.com/Dihak/bloggerku/5048c6bd13c0d02a5ae41cfb6827a33a18d53d50/relatedbox/relatedbox.min.js"></script>

Nah, simpan dan save yang sudah di edit. sekarang lihat blog sobat, kalau sudah muncul related boxnya maka lanjut ke bagian cara setting related boxnya. Sobat bisa rubah bagian title, max post, sembunyikan tanggal, dan lain lain.

Masih di kode yang tadi, sobat tinggal ganti kode kode yang berwarna merah di bawah ini dengan yang sobat inginkan.

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

Jangan lupa save lagi, selesai deh..

Sekian artikel untuk cara membuat related box pada blogger, semoga artikel yang saya bagikan bisa bermanfaat bagi sobat. Kunjungi terus bloggerku agar tidak ketinggalan update..